巴黎的妖

CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配。 看如下规则： 示例 1 1 #nav li {} 看起来很快，实际上很慢，尽管这让人有点费解。我们中的大多数人，尤其是那些从左到右阅读的人，可能猜想浏览器也是执行从左到右匹配规则的，因此会推测这条规则的开销并不高。 在脑海中，我们想象浏览器会像这样工作

什么是viewport，为什么需要viewport viewport：视口，视觉窗口，显示区域。 在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏 览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设

一、基本概念 （1） CSS pixels与device pixels CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。 device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS

首先我要申明一点，对于web开发者来说“标准尺寸”是没啥用处的，所以我忽略了这个，而且我也不会讨论显示的细节以及其他一些复杂问题，因此我对其中的一些概念描述的可能不是很专业，在此表示抱歉。 Web开发者到底需要啥 在开始下面的内容之前，大家先了解一下CSS Pixels与Device Pixels之间的区别：  CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。 media type 让我们先了解一下media type，其实这个大家会

什么是响应式网页设计？ 响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！ 或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观

一、为什么要使用响应式设计？ 我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向，从而在所有设备上都能用。 二、一个碎片化的世界 截止2013年，有成千上万种不同的设备在浏览网页，所以我们不可能设计出适应所有屏幕大小的网页。相反，我们必须得采用一种更加流畅的方式去设计。 三、移动优先 最近一个比较火的词叫移动优先。它的意思是，先为移动端设计样式，然后再

在 Firefox 中，系统会针对 DOM 更新注册展示层，作为侦听器。展示层将框架创建工作委托给 FrameConstructor，由该构造器解析样式并创建框架。 样式计算 构建呈现树时，需要计算每一个呈现对象的可视化属性。这是通过计算每个元素的样式属性来完成的。 样式包括来自各种来源的样式表、inline 样式元素和 HTML 中的可视化属性（例如“bgcolor”属性）。其

呈现器是和 DOM 元素相对应的，但并非一一对应。 比如非可视化的 DOM 元素不会插入呈现树中，例如“head”元素。如果元素的 display 属性值为“none”，那么也不会显示在呈现树中（但是 visibility 属性值为“hidden”的元素仍会显示）。 有一些 DOM 元素对应多个可视化对象。它们往往是具有复杂结构的元素，无法用单一的矩形来描述。例如，“select”

1 div{ width:600px; overflow:auto; } p{ width:100%; padding:10px; } p{ width:auto; padding:10px; } 如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，