（整理）盒子模型的构成？在布局使用中要注意什么？

一、盒子模型构成：

盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)

作用：控制元素和元素之间，或者元素和内容之间的位置关系。
说明：
content(内容)：盒子的内容，显示文本和图像。
border(边框)：围绕在内边距和内容外的边框。
padding(内边距)：清除内容周围的区域，内边距是透明的。
margin(外边距)：清除边框外的区域，外边距是透明的。
盒子的大小怎么计算呢？
我们举个实例：如下图所示

它的效果图是这样的：

argin是显示元素边框之外的区域，不会把元素撑大所以计算元素大小时不应该算上margin的值。
总元素高度=内容区宽度+左填充+右填充+左边框+右边框
=300+30+30+5+5=370；
总元素高度=内容区高度+上填充+下填充+上边框+下边框
=200+30+30+5+5=270；

附：margin和padding分别适合什么场景来使用?
若想了解，可点击链接查看~

二、在布局中需注意的问题

css盒子塌陷问题
什么是盒子塌陷？
外部盒子本应该包裹住内部的浮动盒子，结果却没有。

问题出现的原因
父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto。
因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，而没有包含两个内部盒子。

解决方案

1. 给外部盒子也同样添加浮动
   把外部盒子也从标准文档流中抽离，让它和孩子们见面。
   缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。

2. 在外部盒子内最下方添上带clear属性的空盒子
   可以是div也可以是其它块级元素，把<div style="clear:both;"></div>放在盒内底部，用最下面的空盒子清除浮动，把盒子重新撑起来。
   缺点：引入了冗余元素

3. 用overflow:hidden清除浮动
   给外部盒子添上这个属性就好了，非常简单。
   缺点：有可能造成溢出元素不可见，影响展示效果。

4. 用after伪元素清除浮动
   给外部盒子的after伪元素设置clear属性，再隐藏它
   这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。

.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}

后续遇到问题会再继续补充~

参考文章：
CSS盒子塌陷问题解决方案
什么是盒模型？盒模型的组成都有哪些

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！