CSS 框模型

  • 时间:
  • 浏览:86

CSS 框模子 (Box Model) 划定了元素框处置元素内容、内边距、边框战 中边距的体例。

CSS 框模子概述


元素框的最外部分是现实的内容,间接包抄内容的是内边距。内边距显现了元素的布景。内边距的边沿是边框。边框之外是中边距,中边距默许是通明的,因而没有会遮挡厥后的任何元素。

提醒:布景利用于由内容战内边距、边框构成的地区。

内边距、边框战中边距皆是可选的,默许值是整。可是,很多元素将由用户代办署理款式表设置中边距战内边距。能够经由过程将元素的 margin 战 padding 设置为整去笼盖那些阅读器款式。那能够别离停止,也能够利用通用挑选器对一切元素停止设置:

* {
  margin: 0;
  padding: 0;
}

正在 CSS 中,width 战 height 指的是内容地区的宽度战下度。删减内边距、边框战中边距没有会影响内容地区的尺寸,可是会删减元素框的总尺寸。

假定框的每一个边上有 10 个像素的中边距战 5 个像素的内边距。若是期望那个元素框到达 100 个像素,便需求将内容的宽度设置为 70 像素,请看下图:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}


提醒:内边距、边框战中边距能够利用于1个元素的一切边,也能够利用于零丁的边。

提醒:中边距能够是背值,并且正在良多状况下皆要利用背值的中边距。

 

CSS 中边距兼并

 


中边距兼并指的是,当两个垂曲中边距相逢时,它们将构成1个中边距。

兼并后的中边距的下度即是两个产生兼并的中边距的下度中的较年夜者。

中边距兼并
中边距兼并(叠减)是1个相称简朴的观点。可是,正在理论中对网页停止规划时,它会形成很多混合。

简朴天道,中边距兼并指的是,当两个垂曲中边距相逢时,它们将构成1个中边距。兼并后的中边距的下度即是两个产生兼并的中边距的下度中的较年夜者。

当1个元素呈现正在另外一个元素下面时,第1个元素的下中边距取第2个元素的上中边距会产生兼并。请看下图:


当1个元素包括正在另外一个元素中时(假定出有内边距或边框把中边距分开开),它们的上战/或下中边距也会产生兼并。请看下图:

虽然看上来有些奇异,可是中边距乃至能够取本身产生兼并。

假定有1个空元素,它有中边距,可是出有边框或挖充。正在这类状况下,上中边距取下中边距便碰着了1起,它们会产生兼并:

若是那个中边距碰到另外一个元素的中边距,它借会产生兼并:

那便是1系列的段降元素占用空间十分小的缘由,由于它们的一切中边距皆兼并到1起,构成了1个小的中边距。中边距兼并初看上来能够有面奇异,可是现实上,它是成心义的。以由几个段降构成的典范文本页里为例。第1个段降下面的空间即是段降的上中边距。若是出有中边距兼并,后绝一切段降之间的中边距皆将是相邻上中边距战下中边距的战。那意味着段降之间的空间是页里顶部的两倍。若是产生中边距兼并,段降之间的上中边距战下中边距便兼并runningman����·正在1起,如许遍地的间隔便1致了。