正文

一览css布局标准

IP云
IP云V管理员/4 阅读
10/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

回顾历史，CSS1于1996.12.17发正式版，它是为辅助HTML的展现效果而生的。
1998.5.12，CSS2发正式版。随后发修订版CSS2.1，纠正了CSS2中的一些错误。注意从CSS2起，CSS的作用就不是辅助展现了，变为全全负责展现。
（注：当年CSS2的勘误表有兴趣可以看看）

CSS2.1明确了2个模型，一个是众所周知的盒模型(Box model)，CSS1没有盒模型的概念，盒模型的前身在CSS1里叫做面向盒的格式化模型。元素抽象为盒，以盒为对象设计思路清晰多了。CSS3的盒模型丰富了更多属性。盒的产生，以及盒的定位就是CSS2.1定义的第二个模型－可视格式化模型(Visual Formatting Model)。CSS3相关的布局标准实际上也在这个大的框架之下。

CSS布局有明确标准始于CSS2。CSS1里压根没提布局，虽然CSS1里有Float元素的定义，但它的设计不是为页面布局，只是为了实现图文绕排。早期用table布局便顺理成章。CSS2是98年变为推荐标准的，按理此时应该普及新的CSS布局标准，但table布局的使用习惯一直保持到2004年才被Jeffrey Zeldman那本书点醒。05年它的中文版《网站重构》出版，国内掀起重构浪潮。早期网页开发者是受软件教育的(Frontpage, Dreamweaver之类)，完全没有标准的概念。

所以要从标准出发学习CSS，而不是仅仅掌握一些工具(包括一些库)。这是有前车之鉴的。

回到布局的话题上。CSS2.1的布局分为3种：
1. 常规流(Normal Flow)
2. 浮动(Float)
3. 绝对定位(Absolute Position)

这3种不能混用。如果代码里看到position:absolute;display:block;这种明显是概念混乱。很多人也错把position:relative跟position:absolute归为一类。position:relative是常规流中的一种，例外是它可以和Float一起使用。关于CSS2.1布局的阐述请看这里：http://kejun.github.io/bootcamp_htmlcss/?5。

IE6时代被忽视的常规流布局：
1. Inline-Block。兼容性：http://caniuse.com/#feat=inline-block，触发IE的hasLayout可以实现相似的效果，以至于可以兼容IE6/7，逐渐被广泛应用。
2. CSS Table。兼容性：http://caniuse.com/#feat=css-table，仅仅不兼容IE6/7，在IE6时代被埋没。随着IE6/7的淡出终有出头之日了。

“对float的滥用就像当年对table的滥用“。很多人设计布局时不假思索的用Float，明显欠缺对布局技术有更多了解。尤其在低端浏览器日渐淡出，新的布局技术触手可及的当下，是时候学习实践这些新技术了。之前做过一个demo，用6种思路实现同一种两列布局：http://dabblet.com/gist/4094139。看完本文后，可以有更多实现思路。

今天脱囗而出的CSS3只是一种笼统的叫法。有CSS Level 1，CSS Level 2，时至今日还没有CSS Level 3。CSS2.1之上的新标准大部分仍在WD状态，只有CSS Color Level 3和Selectors Level 3进入REC状态。

（注：PD – Public Draft, 公共草案，初步想法。不乏PD之后就废弃的。WD – Working Draft, 工作草案。开始有人修订它了。LC – Last Call, 对外宣布了。CR – Candidate Recommendation, 候选推荐。REC – Recommendation，正式推荐。也就是正式版标准。这些状态只能说明标准的稳定状态。浏览器厂商从自身利益出发，选择性的支持了一些仍处于WD状态的标准。于是出现各种厂商前缀。标准制订跟不上发展，浏览器厂商在竞争中冒进，苦逼的是开发者。）

新的布局标准可以更简单更灵活的实现布局。CSS3目前有5种布局方案：
1. 多栏布局(Multi-Column Layout )
2. 灵活盒布局(Flexible Box Layout)
3. 栅格布局(Grid Layout)
4. CSS3的浮动盒(CSS3 Floating Boxes)
5. Regions

Multi-Column Layout
当前状态：CR
历史：1999.6.23发PD，2009.12.17进入CR状态
兼容性：http://caniuse.com/#feat=multicolumn
Demo: http://dabblet.com/gist/5507829，
问题：
1. 目前只能平均分栏，还不支持分别指定栏宽（未来会有）。
2. 浏览器支持的新旧标准不一。
比如，上例中div.intro的内容想保持在一栏中，chrome支持column-break-inside: avoid;这是2005.12.15更新的WD中的标准。由此推测chrome遵循的是05年的WD标准。目前CR标准已改成break-inside。Firefox20仍实现的是2001年的WD标准。
3. 多栏布局更适合用于内容流布局，不适合页面布局。

Flexible Box Layout
当前状态: CR
历史：2009.7.23发PD, 2011.3.22进入WD状态，2012.9.18进入CR状态
兼容性：http://caniuse.com/#feat=flexbox
Demo: http://dabblet.com/gist/5508104
理解它分为两部分：Flex容器(Flex Container)和Flex项(Flex Item)。
1. 定义Flex容器(display:flex)后, 它的一级子元素(inline box/block box/anonymous box)，可沿水平或垂直方向排列(flex-direction, 默认row)，可指定靠某一边对齐(flex-wrap)，可指定对齐方式(justify-content)。每个Flex项默认是等高的(align-items, 默认stretch)。
2. Flex项不指flex属性时，宽度由实际内容的宽度决定。
3. Flex项可以指定以什么比例填充空白。如：
.list li { flex:1; } 则均匀填充。
.list li:nth-child(1) { flex: 4; background: #f80; }  本例中Flex Item 1的宽为4/8。
4. flex属性是可以动画的。
5. Flex项可以控制顺序(order, 默认0，值高在后面)。
参考：http://d.hatena.ne.jp/teramako/20121021/p1

曾在weibo上出过一道题：“实现一个不定宽高的层，在窗口中水平垂直居中”，用Flex Box可以轻松实现:
html,body { height:100%; }
body { display:flex;justify-content:center;align-items:center; }

(Grid) Template Layout (曾经称为Advanced Layout)
当前状态：WD
历史：2005.12.15发PD, 2007.8.9进入WD状态。最终合并进Grid Layout

Grid Position
历史: 2007.9.5发PD，随后被废弃

Grid Layout
当前状态：WD
历史：2011.4.7发PD，2012.3.22进入WD状态，最新一版是2013.4.2
兼容性：http://caniuse.com/#feat=css-grid，
以这种兼容性还不值得学它。1996年有个基于帧布局的草案。当时没往这条路上走，最终绝对定位进入CSS2。Grid Layout正是建在它的基础之上。

CSS3的浮动盒(CSS3 Floating Boxes)
当前状态: WD
历史：2002.10.24就出现在CSS basic box model的草案中。
CSS3的浮动盒太未来了，还没有浏览器支持。比如：
float: right contour; contour关键字，文字可以沿图片不规则的轮廓绕排。
min-height: contain-floats; 新的清浮动方式
float-displace: block; 新的float-displace属性

Regions和Shapes
当前状态：WD
历史: 2011.6.9发表PD, 2011.11.29进入WD状态，最新一版WD是2012.8.23
兼容性：http://caniuse.com/#feat=css-regions
Demo: http://dabblet.com/gist/5509294 Chrome 19+, IE10+
它适用于内容流布局。兼容性有限，可以先简单看看。