炫意html5
最早CSS3和HTML5移动技术网站之一

css盒子模型:内联盒模型、width、height、替换元素、边距、border

css是一门具象语言,并不像js那样具有逻辑性,因此,就算入行了前端很久的工程师,也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱,深入理解css盒模型,这对我们在布局上会有一个质的提升。

盒子模型


相信很多人对这幅图都不陌生,盒子模型简单点理解就是外边距(margin)+边框(border)+内边距(padding)+内容(content),页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个“外在盒子”和一个“内在盒子”,其中“外在盒子”负责元素是一行显示还是换行显示,而“内在盒子”则负责宽高、内容展现。我们都知道inline-block(inline对应于“外在盒子”,block对应于“内在盒子”),而block可以简单地理解为block-block,table为block-table(因为还有一个inline-table)。

内联盒模型

  • 内容区域(content area)
  • 内联盒子(inline box)
  • 行框盒子(line box)
  • 包含盒子(containing box)

内容区域(content area)。内容区域指的是一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子(character box);但是图片这样的替换元素,其显示内容不是文字,因此内容区域可以看成是元素自身。

内联盒子(inline box)。“内联盒子”不会让内容成块显示,而是排成一行,这里的内联盒子指的是元素的“外在盒子”,用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。如下:

行框盒子(line box)。每一行就是一个行框盒子,每个行框盒子都是由一个个内联盒子组成,注意:line-height是作用在行框盒子上的,并最终决定高度(替换元素除外,后面会讲解什么是替换元素)。

包含盒子(containing box)。此盒子由一行一行的“行框盒子”组成(css规范中,并没有“包含盒子”的说法,更准确的称呼是“包含块”(containing block)。

width

width的默认值是auto,但很多人却都不理解这个值是什么意思,因为auto在不同场景会有不同的表现:

  • fill-available
  • fit-content
  • min-content
  • max-content

fill-available:充分利用可用空间,例如div、p这些元素的宽度是默认100%于父级容器的。但是width: auto却不同于width: 100%,这是很多人不理解的地方。如果你设置了width: 100%,这里指的是内容区域100%,即css3中的content-box,这时如果你设置了padding、border或者margin,元素都会撑破父元素,从而破坏布局。你当然可以设置box-sizing: border-box,但可惜的是css3中没有margin-box,这时候你如果设置了margin,依然会撑破父元素,但是width: auto却不会,如下所示:

fit-content:收缩到合适,典型代表浮动、绝对定位(有例外,设置了对立属性:left、right、top、bottom时,宽度和高度由祖先元素position非static的元素决定,但是替换元素除外:img、video、canvas等)、inline-block、table。利用这个特性我们可以实现,文字整体居中,多行则居左显示,如下:

min-content:收缩到最小。在表格中最常见,当每一列空间都不够的时候,文字能断则断,中文随便断,英文单词不能断。可以根据这个特性实现凹凸图形等效果,如下:

max-content:超出容器限制,内容很长的连续英文或数字,或者内联元素被设置为了white-space: nowrap。

height

height的默认值也是auto,指的是其高度由内部元素堆叠而成,内部元素盒子有多高,元素就有多高。但在绝对定位中,若同时设置了top与bottom,则其高度由父盒子高度减去top与bottom。

height: 100%。如果父元素height为auto,则子元素height:100%是无效的,要想子元素height: 100%生效,则:

  • 父元素设定显式高度值
  • 使用绝对定位(绝对定位元素的百分比是根据padding box计算的,非绝对定位元素百分比是根据content box计算的)

替换元素

由于替换元素在很多表现上都与普通内联元素不一样,因此在这里着重介绍一下替换元素。

  • 根据“外在盒子”是内联还是块级,我们把元素分为内联元素和块级元素,而根据内容是否可替换,我们把元素分为可替换元素和非替换元素。
  • <img>,<video>,<canvas>,<input>,<textarea>,<iframe>都是替换元素。
  • 替换元素外观不受页面css的影响,有自己的尺寸,一般为300 * 150,在很多css属性上有自己的一套表现规则,例如vertical-align默认就是元素下边缘对齐,而不是基线对齐。
  • 替换元素尺寸计算规则:css尺寸 > html尺寸 > 固有尺寸
  • 内联替换元素和块级替换元素规则一致,即display: block,其宽度也不会100%。
  • 替换元素固有尺寸无法更改,width和height改变的是content-box的宽高,而默认替换元素的object-fit是fill,也就是会填充content-box,因此看上去像是改变了固有尺寸。
  • 替换元素before和after伪元素无效。

padding

  • padding与内联元素
  • padding的百分比值

padding与内联元素。padding作用在块级元素上会影响盒子的宽高,但是如果作用在内联元素上(不包括替换元素),似乎就只能作用在水平方向上,垂直方向上就没看到任何影响。但事实并不是没有影响,只是视觉上我们觉得没有影响而已。因为内联元素没有可视宽度和可视高度的说法(clientWidth和clientHeight永远是0),垂直方向完全受line-height和vertical-align的影响,视觉上并没有改变上一行和下一行内容的间距,因此,给我们的感觉就是垂直方向上padding没有起作用。利用这个特性,我们可以在垂直方向上增大可点击区域,这样既不会破坏现有布局,也能很好地响应用户的点击。特别是在移动端,一个关闭的“x”如果太小,用户就很难点击到,调大字体又会影响布局,这时候就可以用到padding。

padding的百分比值。padding不支持负值,padding百分比无论宽高都是相对于width来说的,另外padding区域是跟着行框盒子走的。因此,如果padding作用于内联元素,则宽度和高度细节有差异,并且padding会断行,其原因在于strut,意思是说每一个行框盒子前面都有一个不可见的盒子,其line-height和font-size都继承于父元素,称为strut。利用padding的这些特性,我们可以实现如下效果:

  • 利用padding实现一个正方形
  • 内联元素padding高度差异(只需把font-size设为0即可变为正方形)
  • padding断行(由于padding作用在行框盒子上,因此文字换行,padding也跟着换行,后面的背景盖住了前面的,就形成了这种效果)

margin

  • margin: auto
  • margin改变元素尺寸
  • margin负值
  • margin合并
  • margin无效的情况

margin: auto生效的前提是元素在width和height为auto的时候能够自动填充容器,这样,在设置width或height的值时,如果还有剩余尺寸,margin: auto就可以利用剩余尺寸。因此在绝对定位元素设置了top、bottom、left、right的情况下,就可以很方便地实现水平垂直居中,如下:

margin改变元素尺寸。在元素width为auto的情况下,margin正值和负值都能改变元素的尺寸。如下:

margin负值。margin支持负值,并且用途十分广泛,例如,在等宽的盒子中,最后一个元素不因margin-right而折行;实现等高布局等。如下:

盒子并列占满父元素:

等高布局,其原理是利用padding撑开一片足够大的高度,再用margin负值将顶下去的元素收回来:

margin合并。块级元素的上外边距与下外边距有时会合并为单个外边距,这种现象称为“margin合并”。一般会有以下三种:

1、相邻兄弟元素margin合并

2、父级和第一个/最后一个子元素合并

margin-top合并,解决方案:

    父元素设置为块状格式化上下文元素
    父元素设置border-top值
    父元素设置padding-top值
    父元素和第一个子元素之间添加内联元素进行分隔

margin-bottom合并,解决方案:

    父元素设置为块状格式化上下文元素
    父元素设置border-bottom值
    父元素设置padding-bottom值
    父元素和最后一个子元素之间添加内联元素进行分隔
    父元素设置 height、min-height 或 max-height。

3、空块级元素的margin合并,即自身有margin-top和margin-bottom,但元素是空的,此时会合并为一个margin。

margin无效。margin在某些场景下会失效,但有些“失效”只是视觉上的表现而已。如下:

  • display 计算值 inline 的非替换元素的垂直 margin 是无效的,虽然规范提到有 渲染,但浏览器表现却未寻得一点踪迹,这和 padding 是有明显区别的。对于内联替换元素, 垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并。
  • 表格中的<tr>和<td>元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是无效的。但是,如果计算值是 table-caption、table 或者 inline-table 则没有此问题,可以通过 margin 控制外间距,甚至::first-letter 伪元素也可以解析 margin。
  • margin合并的时候,更改margin值可能无效。因为垂直方向上会发生margin合并。
  • 绝对定位元素非定位方位的margin值“无效”(其实margin是有效的,只是元素绝对定位了,并不影响其相邻元素的渲染)。
  • 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。这里的失效也是假的,原因跟绝对定位的margin无效类似,在一个默认流下,其定位方向是左侧和上方,此时只有margin-left和margin-top可以影响其定位,而margin-right和margin-bottom则只会影响其相邻元素,若此时没有相邻元素,则看上去像是margin无效。
  • 内联特性导致的margin值无效。一个div元素中有一个img图片,我们对img使用margin-top负值,当margin-top负值达到一定值的时候,再往上图片也不会上移。

border

  • 制作图形
  • 等高布局

相信不少同学都使用过border来制作图形,例如三角形、圆形等等,此处就不举例子,主要讲讲等高布局,代码和效果如下所示:

其原理就是父元素撑开一个border-left,菜单栏左浮动,并且宽度跟父元素border保持一致,通过margin-left负值往左偏移到border位置,另外父元素设置伪元素after来清除浮动,这样就可以实现左侧固定,右侧自适应的两栏等高布局。

本文转自:https://segmentfault.com/a/1190000014692461

炫意HTML5 » css盒子模型:内联盒模型、width、height、替换元素、边距、border

CSS3教程HTML5教程