CSS布局

写在最前面疑似前言的东西(:q」∠)
最近摸鱼摸得有点忘乎所以导致进度严重跟不上并且把之前一些功能忘得一干二净感到深深的忏悔
因为有些知识确实一知半解的所以去借鉴了一下前人的智慧,这次还是只写一些自己会的吧(:з」∠)，温故知新还是有点说法的，以后会努力把版面弄得好看的！
1、左右布局
项目开发过程中遇到页面 div 左右布局的需求：左侧 div 固定宽度，右侧 div 自适应宽度，填充满剩余页面。
首先提供传统的方案： 左侧 div （可以加个div来clearfix）设置 float 属性为 left，右侧 div 设置 margin-left 属性等于或大于左侧 div 宽度,如图：

image.png

image.png

可以试试左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

image.png

image.png

2、左中右布局
(1) float+margin

image.png

image.png

这种方法布置right和left要放前面，要放前面，要放前面！！！

(2) float+absolute

image.png

image.png

此法一定要加top,bottom,right,left,不然就看不见！！！

3、水平居中
(1) margin和width实现水平居中

image.png

image.png

(2)设置左右margin值为 auto

image.png

image.png

4、垂直居中
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：

image.png

2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

image.png

5、其他小技巧
（1）clearfix清除浮动的影响：
1.找他父元素，如果父元素是body，那么加一个div嵌套
2.父元素加上属性clearfix
3.在css样式开头写下如下代码：
.clearfix{
content:"";
display:block;
clear:both;
}

（2）display:inline-block带来的宽度增加
就加一句话： vertical-align: top;反正看见inline-block就加好了