回顾历史,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+
它适用于内容流布局。兼容性有限,可以先简单看看。

一览css布局标准的更多相关文章

  1. CSS布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  2. 第九篇、CSS布局

    <!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...

  3. css布局详解(二)——标准流布局(Nomal flow)

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  4. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  5. CSS布局(下)

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  6. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  7. [Bootstrap]7天深入Bootstrap(3)CSS布局

    Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...

  8. CSS布局——居中

    参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235 1.行内元素水平居中text-align:center对图片,按钮,文字等行内元素 ...

  9. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

随机推荐

  1. Skew Join与Left Semi Join相关

    Skew Join 真实数据中数据倾斜是一定的, hadoop 中默认是使用 hive.exec.reducers.bytes.per.reducer = 1000000000 也就是每个节点的red ...

  2. window 7 C盘整理

    发现两篇不错的文章可以参考一下: http://blog.renren.com/blog/200083873/467545630 http://www.uedbox.com/win7-c-disk-s ...

  3. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  4. 如何写angularJS模块

    angularJS中提供模块的概念,供我们把代码封装在模块单元中,使用模块能给我们带来的好处 保持全局命名空间的清洁 易于在不同应用间复用代码 demo.html <!doctype html& ...

  5. Testlink接口使用方法-python语言远程调用

    deepin@deepin-pc:~/test$ cat libclienttestlink.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- #! ...

  6. 在controller写sql在mapper拼接

    这是在controller里面: String search = ""; if("null".equals(start_time)||"". ...

  7. JS之路——浏览器window对象

    window对象的方法 window.alert(msg) window.close() window.print() var a = window.setIntval(function,毫秒) // ...

  8. Python三元表达式

    我们知道Python没有三元表达式,但是我们通过技巧达到三元表达式的效果. 摘自<Dive Into Python>: 在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的 ...

  9. maven学习心得

    心得:这几天一直在研究maven的配置,还真是伤心啊,网上资料不多,而且问题不断.确实很让人头疼 背景:之所以学习maven是因为我们需要一键部署,我们项目是已经差不多完成了,是eclipse的web ...

  10. Shell遍历文件的每一行

    由于使用for来读入文件里的行时,会自动把空格和换行符作为一样分隔符,因为当行里有空格的时候,输出的结果会很乱,所以…… cat input.txt |while read line> do&g ...