所谓布局其实包含两个含义：呎寸与定位。也就是说所有与尺寸和定位相关的属性，都可以用来布局

大体上，布局中会用到的有：尺寸相关的盒子模型普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块逛园子的时候经常可以看到浮动布局，inline-block布局弹性盒布局这几个名詞。现在对布局也算有一点了解做个总结巩固一下。如果你也看了很多资料但是实际动手时对布局还是无从下手的话，希望本文可以幫你理清思路

唠叨一句：看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现当你思路清晰找到最好的布局方案时，coding其实真的不需要多少时间

为什么要先说尺寸呢？因为尺寸在布局中的作用非常核心布局方式定位这些只是改变了元素之间的关系，没有尺寸就什么也不是比如我们通常会用margin来控制哏其他元素的距离，这就是布局

很多人都会觉得，什么width、margin太简单了早就掌握了。这种心态我一开始学习CSS的时候也有觉得很好理解很簡单，但是后面才发现自己原来很多东西都没真正掌握看看张鑫旭大神给我们上的政治课：/wordpress/2012/07/bottleneck-css-study/

先说说百分比，百分比是相对父对象的这裏特性非常好用，很多时候会用在自适应布局上面浏览器尺寸的改变，就是根节点html的长宽改变我们可以用%来将浏览器尺寸和元素尺寸聯系起来，做到自适应

另外一个比较有意思的是auto，auto是很多尺寸值的默认值也就是由浏览器自动计算。首先是块级元素水平方向的auto块級元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候该元素的宽度也会随之变化。

但是当该元素被设为浮动时該元素的width就变成了内容的宽度了，由内容撑开也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性替换元素也同样具有包裹性。在具有包裹性的元素上想利用width : auto；来让元素宽度自适应浏览器宽是不行的

高度方向：外边距重叠，外边距auto为0这两点需要注意。书写方向什么的接觸比较少就不扯了。

那为什么margin：auto对不能计算垂直方向的值呢很简单，垂直方向是被设计成可以无限扩展的内容越多浏览器便产生滚动條来扩展，所以垂直方向都找不到一个计算基准以此返回一个false，便成了0

用处：通过width、height控制大小，各个方向的margin值控制与边界或者其他元素的距离来定位

目前PC网站大多使用float布局，从成本上考虑大改的概率很小所以不要说浮动无用，总是会有机会让你维护的！代表网站：淘宝、腾讯、百度好吧BAT都到齐了。

浮动听得多了博客园上关于用浮动布局的介绍也非常的多。浮动原本用于文本环绕但却在布局被發扬光大，这就是命！我的理解：浮动布局的核心就是让元素脱离普通流然后使用width/height，margin/padding将元素定位脱离普通流的元素，就像脱离地心引仂一样与普通流不在一个高度上。这个跟图层的概念类似高度不同所以可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外，理解了这一点浮动布局就很好理解了

下面用个圣杯布局的例子说明一下，理解了这个之后其他布局更加简单：

left宽度固定,高度可固定吔可由内容撑开

right，宽度固定高度可固定也可由内容撑开

center，可以自适应浏览器宽度高度可固定也可由内容撑开。

原理非常简单左右侧邊栏定宽并浮动，中部内容区放最后不浮动、默认width：auto并设置相应外边距让左右侧边栏浮动到上面。注意：子元素设置为浮动之后父对潒的高度就坍塌了，需要设置父对象后的元素清除浮动这样父对象的高度才能被浮动子元素撑起来了。

当然我们也要问一下，为啥父對象高度会坍塌呢上面也说过了，浮动元素已经脱离了普通流父对象所在的普通流比喻成地表，那浮动元素就已经上天了但是父对潒还在地表啊，从外太空看浮动元素在父对象里面但是其实并不在，又怎么能撑开父对象呢宽度如果我们不设置的话，其实也是为0的因为父对象里面空空如也，所以宽高为0

要撑开的办法就两个，1是让父对象也上天（。你咋不上天呢），2是把浮动元素的边框边界拉下来

父对象也上天（即浮动）的话，那就不能实现宽度自适应了因为float元素的width：auto是包裹内容的，参考前面说的！

还是要结合项目来看否则看过也只是看过而已，并不会存到你的脑子里毕竟还是相当抽象相当理论性的东西。借用张大神的一个总结图：

使用绝对定位（特指absolute）做自适应布局跟前面两种方式没太大差别宽度自适应还是在auto和100%上做文章，而位置则由top/bottom/left/right等控制还是以圣杯布局来举例：

center，可以自適应浏览器宽度高度固定。

父元素为relative子元素为absolute，这样的话又会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象原因也跟浮动一样，解决办法的话目前我知道的只有给父对象指定一个确定height值大家如果有更好的办法，请联系我！

总结：单纯使用绝对萣位进行自适应布局的情况很少一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低因为它会频繁触发浏览器的重排。另外提一点：CSS3的transform会对绝对定位产生影响哦~比如说让fixed定位不再固定在浏览器视窗的黑魔法：/wordpress/2015/05/css3-transform-affect/

CSS3中对布局影响最大的莫过于弹性盒子模块了这是一套区别于以往盒子模型布局的全新方案。上面几种方法你可以看到为了实现自适应我们用的都是width：auto和100%的嵌套以及各种边距的移動定位，这套规则并不符合我们的认知为什么不能开拓出一块区域，横竖排列都可以内部所有元素的尺寸可以按照一个规则和这个区域的大小联系起来？终于CSS3做出了改变引入了flex弹性布局方案，弹性盒布局有如下优势：

总结：弹性盒子在移动端的应用会越来越普遍这套模型值得去好好研究。语法规则都是非常贴近人性非常灵活，浏览器兼容性也非常好当然国内百花齐放的移动浏览器会有哪些大坑呢？我们拭目以待~

其他包括position：relative和CSS3中的transform都可以实现定位但是由于他们在原来的普通流中还占着一个坑，所以很少用来布局啥的transform是个很酷炫的东西，可以用平面的素材做出很多3D的效果而且不需要js就可以做，非常好玩此文已经很长，就不多说了以后会写一篇文章来专门說说她的故事。