Heim > Artikel > Web-Frontend > CSS定位元素盒子模型_html/css_WEB-ITnose
页面版式主要由三个属性控制: position 属性、 display 属性和 float 属性。其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局。
盒子模型有关的三个属性
边框(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 状态下的行为。但只有最新版本的浏览器才支持该属性