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
<div style="clearfix">
例如：<div style="float:left">我变瘦了 </div>
<div>我在哪</div>
</div>
----------------
.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调节位置
-------------------------------------------------------------------------------------------
