盒模型

盒子模型

组成：content(内容)+padding(填充物/内边距)+border(边框)+margin(盒子与盒子之间的距离)

content：内容区域，由width和height组成

padding：内边距(内填充)。值为三个时表(上 左右 下)、两个值(上下  左右)

margin：外边距（外填充），盒子与盒子之间的距离。

注意：

• 背景颜色会填充到margin以内的区域（不包括margin）即content、padding、border。
• 文字固定在content区域显示
• padding不能出现负值，而margin是可以出现负值的

box-sizing属性

取值有content-box：是一个默认值，指盒子设置的宽width高height只赋给content

border-box：指盒子设置的宽width高height由content、padding、border三者来分配。使用场景:1.不用再去计算一些值  2.解决一些100%的问题。

盒子模型的一些问题：

• margin叠加问题：即当两个盒子同时存在，给上面margin-botom：30px；下面margin-top：30px；是不会出现叠加情况，而是取上下中值较大的作为margin。解决方案:1.  BFC规范(较抽象)   2.只给一个元素添加margin间距
• margin传递问题：只出现在嵌套的结构中，且只有margin-top具有传递问题。解决方案：1.BFC规范 2.给父容器加边框 3.子容器的margin换成父容器的padding

扩展:

• margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，也不是不可以，只是Eileen我还没学到那里）
• width、height不设置的时候，对盒子模型的影响，不设置width时系统会自动去计算容器的大小，而不是超出父容器范围，节省代码。