盒模型

CSS盒子模型

页面中的所有元素都可以看成一个盒子，并且占用页面空间下图所示是盒子模型的具体结构：

盒子模型由四部分组成。如表所示：

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
border	边框，用于定义元素的边框
margin	外边距，用于定义当前元素与其他元素之间的距离

1、内容区
它主要呈现了盒子的主要信息内容，内容区可设置宽度高度，当内容过多超过width和height时，可以使用overflow属性来指定溢出处理方法。
2、内边距（相当于元素内部）
指内容区和边框之间的空间，内边距属性有padding-top、padding-right、padding-bottom、padding-left。可简写：padding:top right bottom left。
3、边框
边框属性有border-width、border-style、border-color,可简写：border：border-width、border-style、border-color。
4、外边距(相当于元素外部)
指两个盒子之间的距离，可能时子元素与父元素之间的距离、也可能是兄弟元素之间的内容。外边距属性有margin-top、margin-right、margin-bottom、margin-left可简写：margin:top right bottom left。可以为负值相反方向移动。
子盒子
content(内容盒)、content+padding(填充盒)、content+padding+border(边框盒)。
如何让元素隐藏：1、透明度 2、display:none 3、overflow：hidden。
box-sizing用于计算元素的宽度和高度，常用的属性有content-box和border-box两个值。
content-box是box-sizing属性默认值，在css中定义宽度高度之外绘制的元素的内边框和边框，border-box:通过从设定的宽度和高度分别减去边框和内边距才能得到内容和宽度。

视觉格式化模型
视觉格式化模型要求所有元素必须放至到包含块中，元素在包含的宽度尺寸受盒模型和定位体系影响,盒模型=盒子尺寸 定位体系=盒子体系，定位体系分为三种：常规流 浮动 绝对定位 。
定位体系判断 ：1、当position(默认值static)定位体系如果不等于absolute或fixed 就判断float(默认值none)是否等于left或right 如果还不相等就、是常规流(也叫普通流、文档流、普通文档流)。
常规流水平居中：设置宽度width:XXX; margin:0 auto; 文本居中：text-align:center;
盒子位置
垂直方向上若两个外边距相邻则进行合并(折叠)，两个数值都为正，取最大值、两个数值都为负值，取最小值、一正一负 取相加之间的和。
相邻外边距适用场景
1、兄弟级:A的下边距和B的上边距。
2、父子级:情况一：父元素上外边距与一个元素的上外边距，情况二：父元素下边距与最后一个子元素的下外边距。
上外布局重合解决方法：给父元素加一个border、给父元素添加box-sizing:border-box;、给父元素添加padding-top:XXX; 到父元素高度会增加、over flow:hidden(最常用)