CSS布局

借鉴于http://zh.learnlayout.com/display.html

一、display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block：常见的block元素为div，同样的还有p、form 现在的html5中还有header，section以及footer。

inline：span和a为常见的inline元素。

inline-block：

• vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
• 你需要设置每一列的宽度
• 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

其他：

none：

一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

还有很多的更有意思的 display 值，例如 list-item 和 table 。可参照https://developer.mozilla.org/en-US/docs/Web/CSS/display。

二、margin&盒模型

margin：auto。可以使块级元素居中，通过设置width。现在使用max-width，可控制最大页面值。

三、盒模型及box-sizing

margin-border-padding-content box-sizing可控制盒模型，当box-sizing：border-box时。

四、position

static：static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative ：relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

absolute：absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

fixed：一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

五、float clear

float:left clearfix 一种常见的浮动布局方式

六、媒体式响应（移动端） flex 

七、css框架  blueprint等