HTML与CSS布局技巧总结

很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。

单列布局

水平居中

水平居中的布局方式是最常见的一种，常常用于头部、内容区、页脚，它主要的作用是控制盒子在整个页面以水平居中的方式呈现。

使用margin：0 auto来实现

.child{width:800px; margin: 0 auto;}

优势：兼容性好
劣势：需要指定盒子 宽度

1.使用table来实现

.child{display: table; margin: 0 auto;}

优势：不需要父容器parent，只需要对自身进行设置
劣势：IE6、7需要调整结构

2.使用inline-block和text-align来实现

.parent{text-align: center;}
.child{display: inline-block;}

优势：兼容性好
劣势：需要同时设置子元素和父元素

3.使用绝对定位absolute来实现

使用绝对定位来实现水平居中布局有两种情况，一种子容器无宽度，另一种子容器有宽度。无宽度可以用一下代码，如果是有宽度，则可以设置margin-left负值为容器宽度的一半。

.parent{position: relative;}
.child{position: absolute; left: 50%; transform: translateX(-50%);}

优势：无需设置容器宽度，在移动端可以使用
劣势：兼容性差，需要IE9及以上浏览器的支持

4.使用flex布局来实现

flex有两种方法来实现水平居中，父容器设置display：flex， 一种直接在父容器中设置justify-content属性值center。第二种在子容器中使用margin： 0 auto

.parent{display: flex; justify-content: center;}

.parent{display: flex;}
.child{margin: 0 auto;}

优势：实现起来简单，尤其是使用在响应式布局中
劣势：兼容性差，如果大面积的使用该布局可能会影响效率

垂直居中

这边说的垂直居中是子容器无高的垂直居中，并非单行文本垂直居中line-height<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjEuyrnTw774ttS2qM67YWJzb2x1dGXAtMq1z9ajqM2sy67Gvb7T1tC1xMq508O3vbeoo6zTxcHT0rvR+aOpPC9wPg0KPHByZSBjbGFzcz0="brush:java;"> .parent{position: relative;} .child{position: absolute; top: 50%; transform: translateY(-50%);}

2.使用flex来实现

.parent{display: flex; align-items: center;}

3.使用display：table-cell来实现

.parent{display: table-cell;vertical-align: middle;height: 400px;}

总结：将水平居中和垂直居中两种布局方法相互的结合起来就可以实现水平居中布局。这边只举一个用绝对定位来实现水平垂直居中布局的方法，别的方法大家可以尝试自己练习。（以下介绍各种布局时都是基于上面水平和垂直居中的方法，所有对于它们的优劣就不再分析。）

.parent{position: relative;}
.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

多列布局

多列布局也是非常常见的，适用于一侧定宽，另一侧自适应的布局。

浮动布沮喎?/kf/yidong/wp/" target="_blank" class="keylink">WPC9zdHJvbmc+PC9wPg0KPHA+x7C2zsqxvOTO0tfcveG5/bnY09rBvcHQuKG2r7K8vta3vbeoo6zV4sDvztK+zbK71Nm009DC19y94cHLo6zI57n709DQy8iktcTF89PRv8nS1LLOv7zHsLbLyrG85LnY09q4obavsry+1rXEt723qKOo19y94aOpoaM8L3A+DQo8cD48c3Ryb25nPrbgwdC1yLfWsry+1jwvc3Ryb25nPjwvcD4NCjxwPrbgwdC1yLfWsry+1rOjs6Oz9s/W1NrE2sjd1tCjrLbgyv3Oqs2suabE3KGizay917y2xNrI3bXEsqLFxc/Uyr6hozxiciAvPg0KPGltZyBhbHQ9"这里写图片描述" src="/uploadfile/Collfiles/20160413/20160413100501742.png" title="\" />

    1

.parent{display: flex;}
.column{flex: 1;}
.column+ .column{margin-left: 20px;}

.parent{display: table; table-layout: fixed; width: 100%;}
.column{display: table-cell; padding-left: 20px;}

.column{float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}

.parent{display: flex; flex-direction: column;width: 300px;}
.row{height: 100px; display: flex;border: 1px solid red;}
.item{width: 100px; background-color: #ccc;border: 1px solid red;}

.parent{display: table; table-layout: fixed; width: 100%;}
.row{display: table-row;}
.item{display: table-cell; width: 33.3%; height: 200px; border: 1px solid red;}

html,body,.parent{height: 100%; overflow: hidden;}
        .top{position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: black; height: 100px;}
        .left{position: absolute; top: 100px; left: 0;bottom: 50px; width: 200px; background-color: orange;}
        .right{position: absolute; top: 100px; left: 200px; right: 0; bottom: 50px; background-color: grey; overflow: hidden;}
        .bottom{position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background-color: pink;}

@media screen and (max-width: 480px){
         /*屏幕小于480px的样式*/
}