一、左右布局

1.table:table的li实现

实现原理：

　　table标签是能够具有实现左右布局的属性，也是我们项目中使用最多的。table布局也是页面布局中使用的最早的布局方式，随着前端技术的发展，table布局由于自身的局限性逐渐被div布局取代。

查看代码（主要代码）：

代码说明：

tr表示一行，td表示一列，先实现行再实现列，所以tr中可以添加td实现盒子的左右布局。另:由于table布局由于性能问题已经逐渐被放弃使用，所以提供了table的li标签实现，供参考。

2.inline-block

实现原理：

display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以使用它可以进行左右布局。另：它不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理。

查看代码：

3.float实现左右布局

实现原理：

float属性是css中关于布局的一个关键属性，其意为将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。 float属性属于布局属性，其中有着很多重要应用。

float属性的三个特性为：

a、包裹性：可以按照区域块中子元素的实际宽度进行包裹；

b、破坏性：float区域块不会被父级区域块包裹，造成前端常见的高度塌陷问题，解决办法是清除浮动；

c、占位性（个人称呼），浮动区域块虽然是脱离了父级区域，但是它是要占用一定的正常流区域的，即如果不清除浮动，我们会看到它会占用它后面的同级元素（如果没有会占用它父级后面的同级元素，如果还是没有则向上追溯）的区域，影响同级元素，所以常见清浮动。

查看代码：

代码说明：

float布局部分和inline-block布局部分比较相似，但是其中最主要的区别是：将

.c1{height:60px}

以后就会发现float布局对于后面节点的布局采用交错式的布局，inline-block采用正常式的布局。

二、左中右布局

1. float+margin

注意：中间的middle元素是content的最后一个元素

2. float+absolute

三、水平居中

1. text-align:center

.parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span></div>

该方法可以水平居中块级元素中的行内元素，如`inline`，`inline-block`；

对于块级元素中的块级元素，只会让子元素中的内容居中，子元素仍然是左对齐，如上述例子中span改成`display：block`，则child会左对齐，其中的文字会相对于span居中。

2. margin:0 auto

.parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span class="child">123</span></div>

对于已知width的块级元素，可以用`margin：0 auto`来设置水平居中。

四、垂直居中

1. line-height

对于已知height的单行文本，设置line-height=height的值，即可实现垂直居中。

2. vertical-align: middle

模拟成表格属性来实现居中。

.parent {display: table-cell; //模拟表格属性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span></div>

3. position：absolute + translate

对于height和width未知的元素可以采用该方法

.parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}<div class="parent"><span class="child">123<br>123<br>123</span></div>

4. flex布局

对于多个元素可以采用该布局方案，这应该是目前为止用的最省心顺手的方案了吧，这个可以参考阮一峰老师的文章（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool），上面写得很详细了，这里简单举个例子：

.parent {display: flex;// 左右对齐 flex-start | flex-end | center | space-between | space-aroundjustify-content: center;// 上下对齐 flex-start | flex-end | center | baseline | stretchalign-items: center;width: 500px;height: 100px;border: 1px solid #ddd;}.child {width: 30px;height: 30px;background: #ddd;}<div class="parent"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div>

五、布局技巧

position属性

1.说明

position属性和float一样，也是一种使元素脱离文档流的属性

position： static | relative | absolute | fixed |inherit

①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；文档流的布局不变，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。

辅助属性：

position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：

①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。

②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。

③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。

④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。

上面属性的值可以为负，单位：px

2.对于四种定位属性的解释

对于以下代码

<div  style="border: solid 5px #333; width:300px;"><div  id="redBox" style="height: 100px; width: 100px; background-color: Red;float:right; "></div><div id="greenBox" style="height: 120px; width: 100px; background-color: Green;"></div><div id="yellowBox" style="height: 100px; width: 100px; background-color: Yellow;"></div></div>

（static作为默认布局，不作解释）

2.1使用relative属性

相对定位；文档流的布局不变，只改变自身位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置，可以覆盖其他元素。

然后将greenBox设置为position:relative; left:180px ;top:10px;会出现图二

                 　　 图一

　　　　　　　　图二  

　　　　　　　　图三

2.2使用absolute属性

绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

然后将greenBox设置为position:absolute; left:180px ;top:10px;会出现图3

这里可能会发现，图三top和relative间距是不同的，然而top都是10px，这是为什么呢？

重新回到对绝对定位的理解

绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

看标红的那句话，这也就是说，position的位置是相对于body而言的，然而最外面的box和body距离10px，所以他们顶部才会重合

将父元素的position设置为relative或者absolute  则会出现图四

                   图四

绝对定位上的垂直居中问题

对于盒子模型，应该有很深的理解，盒子模型可以对定宽元素使用margin:0  auto;来做到水平居中；

但是对于垂直居中，使用类似的方法margin: auto 0;却做不到，这是因为垂直方向上的外边距等于零css会自动解读为margin-top:0；

然而在absolute属性中，垂直居中得到了一种很好的解决方式

使用{left:0; right : 0; margin:0 auto;}可以得到水平居中，

使用{top:0; bottom:0;margin: auto 0; }可以得到垂直居中，

同样的，使用{left:0; right : 0;top:0; bottom:0; margin: auto ;}可以得到垂直水平同时居中。

<div style="border: solid 5px #333;position:absolute;height:300px; width:300px;"><div id="greenBox" style="height: 120px; width: 100px; background-color: Green;position:absolute;  ; left:0; right:0;top:0;bottom:0; margin: auto;"> absolute     

        </div></div>

2.3使用fixed属性

固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

fixed是相对与浏览器窗口的，也就是固定在屏幕的某个位置，不能随着滚动条移动。

3.相关属性overflow，z-index

overflow: scroll | hidden

scroll,超出元素块的内容以滚动条显示，

hidden:超出部分隐藏

z-index：<integer>

因为position属性的元素可以相互遮盖，所以需要z-index属性来改变默认的覆盖先后顺序。