布局原理
TRANSCRIPT
新业务新人培训课程计划
《页面制作-布局原理》
F2E 霸先
• 渲染引擎
• 渲染过程简介
• 盒模型
• 栅格
• 基本代码结构
• 布局
• 渲染引擎
• 渲染过程简介
• 盒模型
• 栅格
• 基本代码结构
• 布局
浏览器
渲染引擎
Trident(MSHTML)
• Internet Explorer
• 傲游
• 世界之窗浏览器
• Avant
• 腾讯TT
• Netscape 8
• NetCaptor
• Sleipnir
• GOSURF
• GreenBrowser
• KKman
Gecko
• Fennec
• Firefox
• 网景（6至9）
• SeaMonkey
• Camino
• Flock
• Galeon
• K-Meleon
• Minimo
• Mozilla
• Sleipnir
• Songbird
• XeroBank
KHTML(webkit)
• Safari
• Konqueror
• Epiphany
• Chrome
• iCab
• OmniWeb
• Midori
• Shiira
Presto
• Opera
• 任天堂DS浏览
器
Java软件平台
• HotJava
• Opera Mini
• UCWEB
渲染引擎
Tasman
• Internet Explorer for Mac
• MSN for Mac OS X
文本界面
• Lynx
• Links
• w3m
手持设备或嵌入式系统
• Internet Explorer
Mobile
• Minimo
• Opera Mobile
• PSP浏览器
其它
• Amaya
• Dillo
• Mosaic
• 渲染引擎
• 渲染过程简介
• 盒模型
• 栅格
• 基本代码结构
• 布局
渲染过程简介
渲染过程简介
• 用户输入网址（假设是个html页面，并且是第一次访
问），浏览器向服务器发出请求，服务器返回html文件；
• 浏览器开始载入html代码，发现<head>标签内有一个
<link>标签引用外部CSS文件；
• 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
• 浏览器继续载入html中<body>部分的代码，并且CSS文
件已经拿到手了，可以开始渲染页面了；
渲染过程简介
• 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出
请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
• 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的
排布，因此浏览器需要回过头来重新渲染这部分代码；
• 浏览器发现了一个包含一行javascript代码的<script>标签，赶快运行
它；
• javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个
<div>（style.display=”none”）。杯具啊，突然就少了这么一个元
素，浏览器不得不重新渲染这部分代码；
渲染过程简介
• 终于等到了</html>的到来，浏览器泪流满面……
• 等等，还没完，用户点了一下界面中的“换肤”按钮，
javascript让浏览器换了一下<link>标签的CSS路径；
• 浏览器召集了在座的各位<div><span><ul><li>们，“大伙
儿收拾收拾行李，咱得重新来过……”，浏览器向服务器
请求了新的CSS文件，重新渲染页面。
Reflow&Repaint的原因
• 调整窗口大小（Resizing the window）
• 改变字体（Changing the font）
• 增加或者移除样式表（Adding or removing a stylesheet）
• 内容变化，比如用户在input框中输入文字（Content
changes, such as a user typing text in an input box）
Reflow&Repaint的原因
• 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激
活)（Activation of CSS pseudo classes such as :hover
(in IE the activation of the pseudo class of a sibling)）
• 操作 class 属性（Manipulating the class attribute）
• 脚本操作 DOM（A script manipulating the DOM）
• 计算 offsetWidth 和 offsetHeight 属性（Calculating
offsetWidth and offsetHeight）
• 设置 style 属性的值 （Setting a property of the style
attribute）
如何避免Reflow&Repaint
1. 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树
的最里层)（Change classes on the element you wish to style (as
low in the dom tree as possible)）
2. 避免设置多项内联样式（Avoid setting multiple inline styles）
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值
（Apply animations to elements that are position fixed or absolute）
4. 权衡平滑和速度（Trade smoothness for speed）
5. 避免使用 table 布局（Avoid tables for layout）
6. 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript
expressions in the CSS (IE only)）
• 渲染引擎
• 渲染过程简介
• 盒模型
• 栅格
• 基本代码结构
• 布局
盒模型原理
盒模型原理
• width是content的宽度，quicksmode下是
padding+border+content的宽度
• css规范指出，边框绘制在“元素的背景之上”；
• css2指出，背景只延伸到padding;
• css2.1更正为：元素的背景是内容、内边距和边框区的背景
• background-color和background-image在ff、safari、opera、
chrome下表现一致，都从border开始
• Ie6、7所有模式下,background-image和background-color都是
从padding开始,ie8 quicksmode下也如此
• 浏览器把所有元素都看成长方形
• 渲染引擎
• 渲染过程简介
• 盒模型
• 栅格
• 基本代码结构
• 布局
栅格
栅格系统定义
栅格系统的英文为“Grid Systems”,又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格。栅格系统以规则的网格阵列来指导和规范版面布局以及信息分布,是一种平面设计的方法与风格。栅格系统的使用不仅可以让信息的呈现更加美观易读,而且为前期规划和后续设计带来更多的灵活与规范。
《栅格系统与版式设计》
http://book.douban.com/subject/1491830/
栅格系统发展及现状
根据维基百科 的描述,1692年,法国国王路易十四因不满当时的印刷水平,下令由
数学家尼古拉斯领导成立管理印刷的皇家特别委员会,旨在设计科学合理而且实
用的新字体。他们以罗马体为基础,每个字体分为64个以方格为单元的基本单
位,每个单位再分成36个小格,形成有2304个小格的网格。他们在这个严谨的几何
网格中设计字体和版面编排,这是栅格系统的开端。
1919年德国著名建筑家沃尔特•格罗佩斯在魏玛建立国立包豪斯学院,成为继
荷兰“风格派”运动、俄国“构成主义”运动之外的现代主义设计运动中心。在它们
的交互影响下,平面设计带有明显的栅格系统的特点,即:高度理性、简约主义、功
能化和几何形式化的风格。
栅格系统发展及现状
1959年,在包豪斯的理性设计为基础发展起来的、以瑞士出版的《新平面设计》杂志为标志的“瑞士
平面设计”或“国际主义平面设计”因简洁洗练,传达清晰准确而日渐流行。该流派“主张段落分明,功能明确,
强调将逻辑排列视为观察外界事物的出发点”,使用近乎标准化的比例公式制作栅格系统,以便精确而优美
地配置图片和文字,是二战后影响最大、最具时代精神的设计风格。
20世纪60年代,“瑞士平面设计风格”在美国的快速推广和广泛运用,大量应用栅格系统进行设计,追求
平面设计的标准化和清晰良好的视觉传达功能,使美国平面设计的水平迅速提高,对美国出版业产生了巨
大的、积极的促进作用,可视为欧洲在二战后对各方面都处于强势地位的美国的一次强力的文化输出。
依托美国的强大经济实力,“瑞士风”的影响进一步扩展到全世界。
随着中国经济的发展和文化等领域的日渐开放,栅格系统开始进入中国设计领域。但因为各种原因,
栅格系统的并不被真正重视,只在某些领域如报纸、杂志期刊等领域因为栅格系统的高效率被广泛应用,
但对其比例、美感和风格的追求始终差强人意。很多设计虽然设计精美,秩序井然,明显有栅格系统的影
响,但更多是设计师积累多年经验之后无意识的使用,对栅格系统仍然不甚了了。近年来尽管许多设计家
如书籍装帧大家余秉楠等大力推广栅格系统,但栅格系统在中国仍在起步阶段,需要一个接受和消化的过
程。
网页中栅格的一些实现
• Float布局
– 960 grids
– YUI2 css grids
– The 1KB css grids
• 表格布局
• 负边距布局
– YUI2 css grids
• 绝对定位布局
• inline-block布局法
– YUI3 css grids(推荐)
YUI3 css grids
• 支持任意宽度，使用inline-block实现
• 将宽度按照1\2\3\4\5\6\8\12\24等分，最小
1/24，最大100%，基本兼容大部分布局
示例
基本代码结构
基本代码结构
• 所有css放在header区，按需加载的除外，combo为一个
文件
• js放body后面，页面加载速度最快，用户可交互时间长
• js放头部当元素available的时候加载，可交互时间短，页
面load时间长
• 划分好页面功能模块，细分js，在重要模块html完成后立
即加载其对应的js，保证可交互时间，不重要的功能在页
面加载后再执行
• 重的页面按需加载
• Velocity 2010：Fast By Default
Liquid layout
Liquid layout
• 一般是百分比配合float或者负边距实现
• 详情参照《CSS Mastery》
• 优点– 流动布局页面对用户更友好，因为它能自适应用户的设置。
– 页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
– 如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
• 缺点– 设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定
的分辨率下看起来好的。
– 图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。
– 在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。
fixed layout
• 固定宽度
• 优点– 固定宽度布局更容易使用，在设计方面更容易定制。
– 在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。
– 不需要min-width和max-width，所有浏览器都支持。
– 即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅读。
• 缺点– 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现
了“黄金比例”，“三分定律”，综合平衡和其他设计原则。
– 屏幕分辨率过小时需要垂直滚动条。
– 无缝纹理，连续的图案需要适应更大的分辨率。
– 固定宽度布局一般在可用性上得分较低。
END