css 布局

 

回顾历史,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,逐渐被广泛应用。(在 justdo/css 里做过实例

2. CSS Table(不是 html 中的 table,这里指的是 display:table)。
兼容性:http://caniuse.com/#feat=css-table,仅仅不兼容IE6/7,在IE6时代被埋没。随着IE6/7的淡出终有出头之日了。
 
 
用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+
它适用于内容流布局。兼容性有限,可以先简单看看。 
posted @ 2014-10-20 23:07  砺能  阅读(...)  评论(...编辑  收藏