1.左右布局
实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，（然后本人充当抄袭的急先锋，拾人牙慧了）
首先提供传统的方案： 左侧 DIV （可以加个div来clearfix）设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度,如图：
第二可以试试左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度，废话不说，上图：
2.左中右布局(传说中的圣杯布局)
1.float+margin,上图：
不过这种方法布置right和left得要放前面，切记
2. float+absolute：
切记，此法一定要加top,bottom,right,left,不然就看不见
3.flex来写（这个老夫也在学习中，不太理解）：
3.水平居中：
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:子元素设置 position:relative 和 left:50%
另外还有flex布局，不过我也在学，先不说了
4.垂直居中:
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：
parentElement{
position:relative;
}
childElement{
position:absolute;
top:50%;
transform:translateY(-50%);
}
2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
parentElement{
height:xxx;
}
.childElement{
position:relative;
top:50%;
transform:translateY(-50%);
}
3.最后是flex大招：
parentElement{
display:flex;/*Flex布局*/
display:-webkit-flex;/* Safari */
align-items:center;/*指定垂直居中*/
}
5.其他小技巧
clearfix清除浮动的影响：记住如下代码，一招搞定元素的浮动带来的高度塌陷
1.找他父元素，如果父元素是body，那么加一个div嵌套
2.父元素加上属性clearfix
3.在css样式开头写下如下代码：
.clearfix{
content:"";
display:block;
clear:both;
}
这是目前为止我知道最好的无副作用的解决高度塌陷的方法
display:inline-block带来的宽度增加
就加一句话： vertical-align: top;反正看见inline-block就加好了