shuimuniao的专栏

浏览器引擎会为每一个文档树节点建立一个box。布局的过程实际就是按照visual formatting model来设置box的位置。每一个box存在一个content区域，可选的padding区域，可选的border，可选的margin区域。下图展示了这些区域的位置关系。每一个box都有四个边界。1）content 边界，也称为内边界。content的高通过height属性设置，

如果转载本文，请注明出处！这篇文章的地址是：https://www.webkit.org/blog/130/css-transforms。写于2007年10月26日。webkit的最新版本已经初步支持了2d转换，方法是通过css设置2d参数。目前支持对box进行伸缩、旋转、倾斜、平移操作。设置2d参数的css属性名称是“-webkit-t

原文地址是：https://www.webkit.org/blog/386/3d-transforms ，写于2009年7月16日。Mac OS X平台上的webkit已经支持了3d转换。3d转换就是：通过css属性值设置DOM节点的3d坐标，最终实现一种3d立体效果。3d转换是对2d转换的一个升级。关于2d转换可以阅读文章：译文。从iphone2.0版本开始，webkit已经

AffineTransform类描述了一种二维仿射变换的功能，它是一种二维坐标到二维坐标之间的线性变换，保持二维图形的“平直性”（译注：straightness，即变换后直线还是直线不会打弯，圆弧还是圆弧）和“平行性”（译注：parallelness，其实是指保二维图形间的相对位置关系不变，平行线还是平行线，相交直线的交角不变。大二学过的复变，“保形变换/保角变换”都还记得吧，数学就是王道啊！）。

CSS gradient渐变之webkit核心浏览器下的使用by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=734一、关于渐变渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使

转载，请注明出处！原文地址：http://www.greenbytes.de/tech/webdav/draft-ietf-httpbis-p5-range-latest.html一、 byte ranges        因为HTTP entity是以字节流的形式传递，所以byte-range这个概念对一些HTTP实体就很有意义。额外提一句，并非所有的客户/服务器都需要支持byt

转自 Etag 是什么　　Etag 是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。　　HTTP协议规格说明定义ETag为“被请求变量的实体值” 。另一种说法是，ETag是一个可以与Web资源关联的记号（token）。典型的Web资源可以一个Web页，但也可能是JSON或XML文档。服

转自 head区是指首页HTML代码的和之间的内容。 必须加入的标签 1.公司版权注释 2.网页显示字符集 简体中文： 繁体中文： 英 语： 3.网页制作者信息 4.网站简介 5.搜索关键字 6.网页的css规范 7.网页标题 xxxxx

Local Storage 属于 Web Storage 标准,是HTML5的一部分,又称为DOM Storage. 那么究竟什么是HTML5本地存储 ？ 简单来说，它就是一种让网页可以把键值对存储在用户浏览器客户端的方法。像Cookie一样，这些数据不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。LocalStorage、SessionStorage、IndexedDB、cooki

文本行高度取决于本行中的inline box。为了计算文本行的高度，需要先计算每一个line box的高度。按照下面的方法计算line box的高度。1）如果结点是replaced类型，inline-block类型，inline-table类型，那么linebox的高度是margin区域的高度。（注此高度与结点的高度有些不同）假设网页源码如下，#container{

height属性height属性定义了box的content区域的高度。height的属性值可以是具体数值，可以是百分数，也可是”auto”。如果结点是non-replaced inline类型，那么即使设置了结点的height属性，该属性也不会影响box的高度。如果height属性值为”auto”，那么在布局时会根据某些规则计算height属性值。如果height属性值为百分数，那么

1. width属性width属性定义了box的content区域的宽度。width的属性值可以是具体数值，可以是百分数，也可是”auto”。如果结点是non-replacedinline类型，或者是table row类型，或者是rowgroup类型，那么即使设置了结点的width属性，该属性也不会影响作为结点box的宽度。对于除了上述三种类型之外的结点来说，width属性都会影响结点bo

如果要计算一个box的位置以及宽高，那么必须知道它的containing box，然后才能在containing box的基础上计算出box的位置、宽高。选取containing box的方法是固定的，具体如下：1）文档根节点的containing box也被称为initial containing box。Initial containing box是以文档左上角作为原点，view-port

为了友好地在媒体上显示文档树，需要一种可以将文档树转换为友好界面的方法。Visual formatting model 定义了这种转换方法。一棵文档树会有一个或者多个结点，每一个结点都会对应一个box。因此，一棵文档树会产生一个或者多个box。这些box的位置受多个因素影响，具体包括：1)box类型、box的二维属性；2)位置模式；3)结点之间的关系；4）资源的特有属性，例如浏览器窗口的可视区

一个元素具有内在的二维属性，宽、高属性是受外部资源影响的，那么该元素可被称为replaced element。常见的replaced element有:元素, 元素, form表单的组件(, , , ）。其余inline元素被称为non-replaced elements。replaced element的宽和高是受内在二维属性的影响，而不是完全由css属性决定的。假设一张图片test.b

转载，请注明出处！                 为了让一款应用具备高效、易操作的特点，不仅需要设计友好的用户界面，还要正确、及时的响应用户输入。移动设备与PC机不同，PC机需要快速的响应鼠标事件，移动设备需要快速的响应触控事件及手势事件。触控事件需要记录：1）屏幕上有几根手指；2）每一根手指的位置；3）每一根手指的动作（压下，还是抬起，还是移动）。手势事件是在高端设备上应用的。并非所有