CSS学习笔记

CSS布局总结

CSS

自己写的太少，参考了网上很多资料，尝试总结一下CSS的各种布局，让自己写的页面的时候能够快速找到思路。

一·水平居中

1.使用inline-block和text-align:center
.parent{text-align: center;}
.child{display: inline-block;}
2.使用margin:0 auto;(定宽或者display：table;)
.child{width:200px;margin:0 auto;}
.child{display:table;margin:0 auto;}
3.使用绝对定位

4.使用flex布局
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}

二·垂直居中

1.使用vertical-align(元素必须是inline或inline-block，必须设置行高或者table-cell)
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
2.使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
3.使用flex布局
.parent{display:flex;align-items:center;}

三·水平垂直居中

1.利用vertical-align,text-align,inline-block实现
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
2.利用绝对定位实现
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
3.利用flex实现
.parent{display:flex;justify-content:center;algn-items:center;}

左右布局

1.利用float+clearfix实现左右布局

2.利用position:absolute;实现左右布局
　　

左中右布局(参考-张鑫旭)

1、绝对定位法

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

css代码如下（为截图）：

HTML代码为（图片）：

您可以狠狠地点击这里：绝对定位法演示demo

2、margin负值法

这种方法是在实际的网站中应用的最多的。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

见下面的css代码：

HTML代码：

您可以狠狠地点击这里：margin负值法演示demo

您需要注意几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓，我测试了IE6，Firefox，以及chrome浏览器，表现一致。

此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。

3、自身浮动法

此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

您可以狠狠地点击这里：自身浮动法演示demo

CSS代码如下：