盒子模型的学习

介绍：

由盒子将页面中的元素（文本、图像、超级链接、div块等）包含在一个矩形区域内，这个矩形区域则称为“盒模型”。

盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。

盒子的实际大小为各部分之和，下图所示的盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图

内容：

作用:利用width和height属性设置内容区域的大小,默认是盒子内容区域的大小。

边框：

属性名:border (这是一个复合属性)

属性值:数字+px 线条的种类 颜色(不分先后顺序)

内外边距：

属性名:padding

 取值:数字+px

盒子的大小计算：（给盒子设置border和padding时,盒子会被撑大）

盒子计算方式盒子的大小 = 内容区域的大小+2*border的大小+2*padding的大小

如何使其不被撑大？

1. 手动减去border和padding的大小(很麻烦,需要大量的计算)
2. 使用内减模式(浏览器会自动帮我们计算多余的大小,在内容区域减去)

内减模式：给盒子设置box-sizing,border-box(设置盒子大小，边框大小)