CSS定位元素盒子模型_html/css

盒子模型有关的三个属性

边框（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 状态下的行为。但只有最新版本的浏览器才支持该属性