CSS——盒模型及常见的问题

盒模型
　　　　content->padding->border->margin
　　注：

　　　　1、背景色只能填充到margin以内的区域
　　　　2、文字的content以内的区域添加
　　　　3、padding不能为负数，margin可以为负数
box-sizing
　　　　box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)|border-box
　　　　盒子尺寸，可以改变盒子模型的展示形态：
　　　　　　默认值：content-box: height、width -> content
　　　　　　border-box: height、width -> content、padding、border
　　　　使用场景：
　　　　　　1、不用再去计算一些值
　　　　　　2、解决一些百分比问题
盒子模型遇见的一些问题：
　　1、margin叠加问题：
　　　　给两个盒子同时添加上下外边距时，就会出现叠加的问题，这个问题只有上下有，左右是没有的。
　　　　上下叠加时取得是最大的量进行叠加。
　　解决方法：
　　　　1、BFC规范
　　　　2、想办法给一个元素添加间距
　　2、margin传递问题：
　　　　margin传递的问题只会出现在嵌套的结构中，且只有margin-top有传递的问题，其他三个方向的传递是没有问题的。
　　解决方案：
　　　　1、BFC规范
　　　　2、给父容器加边框
　　　　3、margin换成padding
　　3、盒子模型拓展
　　　　margin左右自适应居中（上下不行）
　　　　width、height不设置的时候会，对盒子模型的影响：会自动去计算容器的大小，节省代码