页面中每个html元素都可以看成是一个由padding(内边距),border(边框),内容区content，margin(外边距)组成的盒子，这就是盒子模型
1.普通盒子模型
普通盒子模型默认属性box-sizing:content-box
- width只包含内容的宽度，不包含padding,border
- 设置width和height只会运用到内容区域
- offsetWidth:元素在页面中实际占据的水平空间大小,offsetWidth=(width+padding+border),不包含margin
2.怪异盒子模型
怪异盒子模型默认属性box-sizing:border-box
- width包含了padding+width+border
- 此时offSetWidth与width相同
- width和height包含了内容区,padding,border，也不含margin
- 在想给元素设置执行宽高时十分好用
3.box-sizing属性
- content-box:1
- border-box:2
- inherit:用于指定boxing-sizeing的值从父元素继承(父元素是border-box子就是)
4.margin
- margin垂直方向会发生重叠，两个值不会叠加
- margin-left和-top取负值元素往反方向移动
- margin-right取负：右侧元素左移，自身不受影响
- margin-bottom取负：下侧元素上移，自身不受影响
5.BFC块级格式化上下文
BFC是一块独立的渲染区域，内部元素的渲染不会影响外部元素
BFC的形成条件
- float不为null
- position为absolute或fixed
- display 是 flex,inline-block,grid
- overflow 不为 visible
