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
