随笔分类 -  【010】前端开发

摘要:首先一个常识就是,在浏览器执行JS脚本过程中,当出现脚本错误,并且你没有手动进行异常捕捉时,他会在浏览器下面出现黄色的叹号,这是正常的,这也不是最重要的,最重要的是,出错行以下的所有JS代码将中停执行,这是我们不希望看到的,所以说,对于自己写的,拿不准的脚本还是加上异常捕捉比较好。 try: 语句测 阅读全文
posted @ 2019-06-23 22:41 给时光以生命 阅读(16395) 评论(1) 推荐(0)
摘要:一、var变量 二、let变量 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景,在ES6之前,大部分人会选择使用闭包来解决这个问题,今天我们使用ES6提供的let来解决这个问题。 代码大同小异,只需将上例子代码for循环中的var改为let,即可实现的效果是点击不同的<l 阅读全文
posted @ 2019-06-23 16:13 给时光以生命 阅读(44749) 评论(0) 推荐(5)
摘要:window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题,但是当页面中有大量远程图片或要 阅读全文
posted @ 2019-06-23 12:15 给时光以生命 阅读(3944) 评论(0) 推荐(1)
摘要:说明: 限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit 阅读全文
posted @ 2019-06-19 00:38 给时光以生命 阅读(23808) 评论(1) 推荐(3)
摘要:准确的说,float浮动属于半脱离文档流,1、float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动,你会看到这几个div并不会重叠,而是会顺序排列。可以参考设置 阅读全文
posted @ 2019-06-13 03:39 给时光以生命 阅读(19340) 评论(0) 推荐(0)
摘要:一、Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的实现。 针对上述的问题,网景公司的程序员创造了Cookie。 二、Cookie的传输 服务器端在实现Cookie标准 阅读全文
posted @ 2019-06-12 14:43 给时光以生命 阅读(372) 评论(0) 推荐(0)
摘要:什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容 阅读全文
posted @ 2019-06-11 21:44 给时光以生命 阅读(1647) 评论(0) 推荐(0)
摘要:像 px、em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。 新单位也成为视窗单位,视窗(Viewport)单位已经有了好几年了,但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并 阅读全文
posted @ 2019-06-09 15:17 给时光以生命 阅读(1820) 评论(0) 推荐(0)
摘要:一、cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。" - w3school cookie 是访问过的网站创建的文件,用于存 阅读全文
posted @ 2019-06-09 02:32 给时光以生命 阅读(2422) 评论(0) 推荐(0)
摘要:浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。 一、cookie和session cookie和session都是用来跟踪浏览器用户身份的会话方式。 区别: 1、保持状态:cookie保存在浏览器端,session保存在服务器端 阅读全文
posted @ 2019-06-08 19:28 给时光以生命 阅读(1323) 评论(0) 推荐(1)
摘要:一、Cookie、session和localStorage的区别 cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cooki 阅读全文
posted @ 2019-06-08 19:24 给时光以生命 阅读(39286) 评论(0) 推荐(2)
摘要:看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘、单一的设计思路,于是就有了这篇 阅读全文
posted @ 2019-06-07 22:11 给时光以生命 阅读(6154) 评论(0) 推荐(1)
摘要:圣杯布局与双飞翼布局的区别: 圣杯布局(两边定宽,中间自适应的另一种实现方式,这两种方式在结构的书写上还是有不一样的),主要是用相对定位与浮动和padding实现。 实现两边定宽,中间自适应,主要是通过浮动与margin实现,代码如下: 效果如下: 阅读全文
posted @ 2019-06-07 19:06 给时光以生命 阅读(889) 评论(0) 推荐(0)
摘要:圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。 圣杯布局也可以做成以下几种布局方式: 1.固定宽度布局:为网页设置一个固定的宽度 阅读全文
posted @ 2019-06-07 18:40 给时光以生命 阅读(2227) 评论(0) 推荐(0)
摘要:在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全 阅读全文
posted @ 2019-06-07 12:40 给时光以生命 阅读(3072) 评论(0) 推荐(0)
摘要:网格布局(Grid)是最强大的 CSS 布局方案。 Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计。 grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它未来不久会对它有很好的支持,目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人 阅读全文
posted @ 2019-06-07 10:48 给时光以生命 阅读(910) 评论(0) 推荐(1)
摘要:响应式布局是一个网站能够兼容多个终端 而不是为每个终端做一个特定的版本 @media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选) 1.meta 标签 最简单的处理方式是加上一个 meta 标签设置屏幕按1:1尺寸 阅读全文
posted @ 2019-06-07 02:13 给时光以生命 阅读(2690) 评论(0) 推荐(0)
摘要:我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。 阅读全文
posted @ 2019-06-06 23:38 给时光以生命 阅读(15820) 评论(0) 推荐(2)
摘要:table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 teble 布局。 但是它也有自身的局限性,比如 table 比其它 html 标记占更多的字节(造成 阅读全文
posted @ 2019-06-06 12:59 给时光以生命 阅读(1695) 评论(0) 推荐(0)
摘要:前言 Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度 阅读全文
posted @ 2019-06-06 02:31 给时光以生命 阅读(5956) 评论(0) 推荐(1)