盒子模型有关的三个属性
边框（border） 。可以设置边框的宽窄、样式和颜色。
内边距（padding） 。可以设置盒子内容区与边框的间距。
外边距（margin） 。可以设置盒子与相邻元素的间距。
边框（border）有 3 个相关属性。
宽度（border-width）。可以使用 thin、 medium 和 thick 等文本值，也可以使用除百分比和负值之外的任何绝对值。
样式（border-style）。有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、ridge、 inset 和 outset 等文本值。
颜色（border-color）。可以使用任意颜色值，包括 RGB、 HSL、十六进制颜色值和颜色关键字。
默认值
默认情况下，边框的三个相关属性的值分别为 border-width:medium;border-style:none;border-color:black;
叠加外边距
垂直方向上的外边距会叠加。像这样上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框
--垂直方向上叠加外边距，哪个大外边距既是哪个。
--叠加的只是垂直外边距，水平外边距不叠加。对于水平相邻的元素，它们的水平间距是相邻外边距之和
外边距的单位
--根据经验，为文本元素设置外边距时通常需要混合使用不同的单位。比如说，一个段落的左、右外边距可以使用像素，以便该段文本始终与包含元素边界保持固定间距，不受字号变大或变小的影响。而对于上、下外边距，以 em 为单位则可以让段间距随字号变化而相应增大或缩小。
盒子有多大
1.没有宽度的盒子
所谓“没有宽度”就是指没有显式地设置元素的 width 属性。如果不设置块级元素的 width 属性，那么这个属性的默认值是 auto，结果会让元素的宽度扩展到与父元素同宽。
--盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
2.有宽度的盒子
--盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
--CSS3 新增了一个 box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为。但只有最新版本的浏览器才支持该属性
下载本文