日期:2016年7月29日

Chrome 开发工具 (Chrome Developer Tools):Network Panel说明

出处:http://www.cnblogs.com/starof/p/5443445.html 官方资料:Chrome Developer Tools: Network Panel 一、chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如详细的时间数据,http请求头响应头,cookies,WebSocket数据。 通过分析这些数据,可以知道哪个资源加载耗时最久,谁发起的网络请求,这些对性能优化很有帮助。 这些数据的获取都是通过一个api来完成的,Resource Timing API。 我们不需要知道它的实现原理,只要知道它能提供什么数据即可。 这些数据也可通过chrome浏览器的window.performace对象获取,如下 二、Network Panel概况 network监控网页中所有的http请求,一行代表一个http请求,每个字段代表请求的不同属性和状态。… Read More

HTML5: 全局属性

出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role=”xxx”>,但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="container"> ... </form> data-*自定义属性不影响页面布局,但可读可写。下面介绍怎样读写。 1、获取自定义属性 获取时通过dataset对象,使用”.”来获取属性,需要去掉data-前缀。 html: <div id='test' data-age="23">html5 data-*自定义属性 data-age</div>… Read More

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。 在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。 BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个 BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 BFC的运用 在w3c的规范中,除了上面的一段定义之外,BFC的相关知识点分布地比较零散,但基本集中在float、绝对定位、margin… Read More

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说,页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质,布局也就轻而易举。 在 W3C 规范中定义了标准的盒模型: Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding,… Read More