CSS布局

1.块元素&内联元素

块级元素（例如div 默认属性为display：block 会独占一行可以加边框看效果）高度是由div中内容决定

####文档流：文档内元素的流动方向，内联元素是从左往右，块级元素是从上往下（因为默认每个块都是一行的宽度）####

内联元素高度是由其中文字高度决定的，内联元素设置width和height是无效的，上下的margin和padding也无效，要将它们设为display:inline-block才有效。

------------

尽量不写height和width，这两个属性会引出很多bug，要宽高的时候可以用padding，另外span元素设置padding的时候要将它设为display:inline-block，因为内联元素不能设置宽高，

##### inline-block具有inline的同行特性，也具有block的高度特性。使用了 inline-block 还要使用vertical-align: top; 来清除一个下边距的bug######

对于display:inline(内联元素)的元素，设置width/height/上下margin和padding都是无效的

------------

2. float（浮动）

布局过程经常！！用到浮动

例如：float:left; 元素靠左浮动

块元素加上浮动会内缩下面的div宽度只有4个字的宽度用了浮动后后面的div会跟着飘上来！！！所以需要在加了浮动的div的父级元素加上 clearfix 来解决bug

例如：

我变瘦了

我在哪

----------------

.clearfix::after{

content: "";

display: block;

clear: both;

}

---------------

3.让一个背景图居中，并且让它自适应屏幕

background: url("whhhhhh.jpg") no-repeat center center ;

background-size: cover;

4.让一个div水平居中

margin-left:auto;

margin-right:auto;

5.postion

让一个div在父级元素中绝对居中父DIV要使用position:relative;

儿子要使用 position: absolute;

6. 脱离文档流

相对于窗口定位：

position:fixed

相对于父级元素定位：

在父级元素加上：position:relative

给自己加上：position:absolute（绝对定位后元素会变成display:block）

7.使用::before和::after时

要加上这两行的代码，才会显示内容

content: "";

display:block; //如果是绝对定位就不用加，因为绝对定位后元素会变成display:block;

#####################################################################

1.左右布局

创建一个父及div 这个div有俩儿子父级div 要用下clearfix样式来清除儿子使用了float后带来的bug 在单独写个样式让自己在浏览器中左右居中 margin:0 auto; 这样好看点两个儿子添加float:left ；在设置下宽度

在div中没有内容的情况下给div加个边框容易辨识

2.左中右布局

同上只要三个儿子宽度加起来不超过父亲就OK

3.水平居中

使用 margin:0 auto; 想居中就别再加float了吆

4.垂直居中

文字的话可以用line-height: ; ##当自己太大时不准##

还可以使用position 这里又要讲到父亲跟儿子父亲必须添加position:relative

儿子要用position:absolute 这就是传说的绝对定位根据他老子定位然后设定padding margin top调节位置

-------------------------------------------------------------------------------------------