一览CSS布局标准 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 一览CSS布局标准

一览CSS布局标准

浏览:2911次出处信息

回顾历史，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; }

.list { justify-content:center; }

(Grid) Template Layout (曾经称为Advanced Layout)