Heim  >  Artikel  >  Web-Frontend  >  CSS定位元素盒子模型_html/css_WEB-ITnose

CSS定位元素盒子模型_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:06:191417Durchsuche

        页面版式主要由三个属性控制: 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 状态下的行为。但只有最新版本的浏览器才支持该属性

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn