css里布局有三种方式
1.使用盒子模型，涉及到的css属性：width/height/padding
margin/border/display。。。。属性
这种布局方式我们称之为文档流或者标准流
标准流里display这个属性非常重要
有两种显示方式：block==>块级元素  inline==>行级元素
块级元素是独占一行，高度有内容来填充，能够设置宽高
行家元素大小由内容来填充设置宽高无效
2.浮动：脱离了标准流，所有的元素都能设置宽高都不独占一行了
3.定位：绝对定位，相对定位，固定定位
盒子模型

width  数字
用来设置元素的宽度

height  数字
用来设置元素的高度

padding  数字
用来设置内边距

margin  数字
用来设置外边距

margin和padding一样都有上下左右四个选项

border  数字  样式  颜色
用来设置边框的线宽  颜色  和样式，样式有实线和虚线等

display  块级或者行级  block  或者 line
用来设置时行级还是块级元素

box-sizing
用来规定边框和padding时否会撑大盒子

float
left  和right 这是向左浮动还是向右浮动
注意浮动的规律是拼命的向左或者向右来移动知道前方有元素或者到边界了  他不会换行值只会在空间不足的情况下换行但是有时候是换行到最近满足空间的方式

清除浮动
是给浮动的父元素添加一个after伪类
设置这几个属性
cleart：both：比对左右浮动的最大px值然后建立一个满足最大的元素div

visibility：hidden：隐藏这个创建的div

content：“：这个创建的div内容是空的

这个是防止浮动使父级边框塌陷

外边距的塌陷问题
margin塌陷问题:

1. 两个元素的垂直margin会塌陷，并不会相加，而是取最大值。左右的margin会叠加
2. 给子元素设置margin-top会直接作用到父元素。
 给父元素加border-top 或者 给父元素加padding-top