网站设计制作之CSS布局标准

网站设计制作中,css样式表示网页设计必备技术,回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的。

1998.5.12,CSS2发正式版。随后发修订版CSS2.1,纠正了CSS2中的一些错误。注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现。


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+

它适用于内容流布局。兼容性有限,可以先简单看看。