1. 文档流（normal flow）
即默认布局，将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动。
2. 显示框类型
每一个元素都有display值，这个属性用于定义建立布局时元素生成的显示框类型，我们可以按需求重写，以达到我们想要的效果。比如 li 是块级元素，但是可以在具体写水平菜单时修改为inline更方便。
display
这些都是最基本的几个，还有更多设置。
3. 盒子模型
盒子模型
这里是一般的盒子模型，基本所有的块级元素都会有，大小由外边距（margin）、边框（border）、内边距（padding）、高（height）、宽（width）组成，所以你若是需要高为多少的盒子，可能需要减去要设置的一定的边宽和内边距。
- 但是，现在有了box-sizing属性（>= IE8），
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
你可以这样设置，使高宽包含内边距和边框宽。
4. 定位布局
position
基于文档流, 我们可以这样理解以下的定位模式:
- 相对定位： 即相对于元素在文档流中位置进行偏移， 但保留原占位。
- 绝对定位：即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。
- 固定定位：即完全脱离文档流, 相对于视区进行偏移。
5. 浮动布局
可设计流动布局。（float浮动、绝对定位、固定定位都会使得元素脱离文档流而存在，但是在IE中浮动元素也存在于文档流中）
.float-right {
float: right;
}
.float-left{
float: left;
}
浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，它从文档流中抽出并尽可能移动至最左侧或者最右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为浮动会对下一个非float元素产生影响，所以我们需要按需求清除浮动使用：
.clear-right {
clear: right;
}
.clear-left{
clear: left;
}
.clear-both{
clear: both;
}
有时清除float会发生溢出，即内部较大元素撑出包含它的元素。可以使用clearfix hack，即对外容器使用overflow: auto;即对溢出部分自适应。然后对于IE6还要加一行zoom: 1;这个zoom就是IE私有属性了，表示缩放倍数。当然，清除浮动对于不同浏览器还有可能有不同，比较麻烦。
.clearfix-hack {
overflow: auto;
}
/* for IE */
.clearfix-hack {
overflow: auto;
zoom: 1;
}
6. 基于百分比的栅格布局
将width、height设置为以%为单位，这是比较常用的布局技巧，响应式的栅格布局方法很多也就是这样来设置的。同时辅以流动特性和媒体查询，就可以很好地做到跨屏适应。
.width-12 {
width: 100%;
}
.width-11 {
width: 91.66666667%;
}
......
.width-2 {
width: 16.66666667%;
}
.width-1 {
width: 8.33333333%;
}
7. 媒体查询
这是实现响应式多屏适应的一种很重要的手段：
@media screen and (min-width: 768px) {
.container {
width: 1170px;
}
}
@media screen and (max-width: 767px) {
.container {
width: 750px;
}
}
即在不同宽度的窗口上渲染不同的CSS。
7. column多栏布局
CSS新属性，用于实现文字的多列布局，是的，就像报刊那样。
/* >= IE9 */
.three-column {
padding: 1em;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
}
这就会将这个内部的文本显示成三列。
9. Flexbox弹性布局
这是最新的一种布局方式，也可能将成为未来布局的首选方式
.flexbox {
display: flex;
}
.flexbox2 {
display: inline-flex;
}
设置flex属性后，子元素的float、clear、vertical-align属性会失效。
flex使布局更方便
<!-- HTML -->
<div class="container">
<div class="noflex1">这里是固定的200px</div>
<div class="noflex2">这里是固定不变的300px</div>
<div class="flex1">
<div class="flex-center">
flex-item居中
</div>
</div>
<div class="flex2">左边一格占剩下的1/3，这里占有剩下的2/3</div>
</div>
/* CSS */
div {
height: 300px;
font-size: 30px;
}
.container {
/*width: 100%;*/
width: 100%;
display: -webkit-flex;
display: flex;
background-color: #233333;
}
.noflex1 {
-webkit-flex: initial;
flex: initial;
width: 100px;
background-color: #666666;
}
.noflex2 {
-webkit-flex: none;
flex: none;
width: 200px;
background-color: #765432;
}
.flex-center {
width: 100px;
height: 100px;
background-color: #8080FF;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
/* flex使得CSS终于有一种比较好的居中方式了！ */
display: -webkit-flex;
display: flex;
/* 让内容（flex item）在交叉轴（cross axis）上（垂直）居中 */
-webkit-align-items: center;
align-items: center;
/* 让内容在主轴（main axis）上（水平）居中 */
-webkit-justify-content: center;
justify-content: center;
background-color: #FCFCFC;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
background-color: #AAAAAA;
}
flex还有跟多概念，具体可参考手册。
10. Grid网格布局模型（CSS Grid Layout Module）
前端的世界真是瞬息万变，这里的grid是CSS的一个最新特性，新到W3C组织几天前才宣布规范已稳定，但是因为太新了，各浏览器并没有很好的支持这个特性，在一些浏览器里甚至是实验功能，需要手动开启。
所以写完后，放在浏览器里是不会有效果的，这是因为浏览器并没有默认开启网格功能，只有IE10默认开启了（实际我使用IE11和Edge时并没有效果，然后我开启了Chrome的实验性网络平台功能才看到了grid布局的效果，但效果不是很好）。
网格布局更像是曾经的table布局，先设置一个网格容器，并设置其行列数，然后设置子项目行列......但它又有更多创新且更为复杂、更多浮夸的功能，是的非常浮夸，想要了解更多，还是多多关注grid布局的最新动态。但是我劝大家暂时不要在这个没有浏览器能够很好支持、还默认关闭的特性上浪费时间了。
11.使用rem单位进行响应式布局
rem是CSS3一个新增加的单位，但是已经得到了现在大多浏览器的很好的支持。
（等待更新中……）
网友评论