CSS学习笔记：盒模型

时间：2022-11-11 09:29:35

盒模型

CSS假定每个元素都会生成一个或多个矩形框。每个框中心都有一个内容区，这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0。
CSS学习笔记：盒模型

  • 可以用多种属性设置各外边距、边框和内边距。
  • 内容的背景也会应用到内边距
  • 外边距通常是透明的，从中可以看到父元素的背景

  • 内边距不能是负值，但外边距可以。

  • 边框的颜色如果没有设置，那么将取元素内容的前景色。

  • 如果边框样式有某种缝隙，则可以通过这些缝隙看到元素的背景。
  • 边框的宽度绝对不能为负。

对于不同类型的元素格式化时存在着差别。块级元素的处理不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。

包含块

每个元素都相对于其包含块摆放，包含块就是一个元素的布局上下文。
包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界构成。

<body>
<div>
<p>lalalala</p>
</div>
</body>

在这个例子中，p元素的包含块是div元素，类似的，div的包含块是body元素。
因此，p的布局依赖于div的布局，而div的布局则依赖于body的布局。

重要概念

  • 正常流：
    这是指正常西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本布局。
    大多数元素都在都在正常流中，要让一个元素不在正常流中，唯一的方法就是使之成为浮动或定位元素。

  • 非替换元素：
    如果元素的内容包含在文档中，则为非替换元素。例如，如果一个段落的文本内容都放在该元素本身之内，这个段落就是一个非替换元素。

  • 替换元素：
    CSS 里，替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。
    典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。
    CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

  • 块级元素：
    块级元素在正常流中，会在其框之前和之后生成换行，所以处于正常流中的块级元素会垂直摆放。
    通过声明display：block，可以让元素生成块级框。

  • 行内元素：
    行内元素不会再之前和之后换行，它们是块级元素的后代。
    通过声明display：inline，可以让元素生成一个行内框。

  • 根元素：
    位于文档树顶端的元素。在HTML文档中，这就是元素html。

块级元素

CSS学习笔记：盒模型

一般地，一个元素的width被定义为从左内边界到右内边界的距离。height则是从上内边界到下内边界的距离。这些属性都可以应用到元素。

水平格式化

水平格式化比较复杂，其部分复杂性在于width影响的是内容区的宽度，而不是整个可见的元素框。
因此如果为一个固定宽度的元素指定了内边距、边框或外边距，这些都会增加到宽度值。

<p style="width:200px;padding:10px;margin:20px">lalala</p>

此时整个元素框的宽度为200+10* 2+20*2 =260px。

一定要知道这样会隐式的增加width值。

对此有一个很简单的规则：正常流中块级元素框的水平部分总和就等于父元素的width。
假设一个div中有两个段落，这两个段落的外边距设置为1em。段落的内容宽度再加上其左右内边距、边框或外边距，就正好是div内容区的width。

水平属性

  • 水平格式化的七大属性是：margin-left、margin-right、border-left、border-right、padding-left、padding-right、width。

  • 这七个属性的值加在一起必须是元素包含块的宽度，往往是块元素的父元素的width值。

  • 在这7个属性中，只有3个属性可以设置为auto：

    • width
    • 左外边距
    • 右外边距

其余属性必须设置为特定的值，或者默认宽度为0.

请注意，width属性适用于除非替换或内联元素，表行和行组（即thead，tfoot和tbody）之外的所有元素。

使用auto

如果设置width、margin-left或maigin-right中的某个值为auto，而余下两个属性指定为特定的值，那么设置为auto的属性会确定所需的长度，从而使元素框的总宽度等于父元素的width。

假如7个属性的和必须等于400像素，没有设置内边距或边框，而且右外边距和width设置为100px，左外边距设置为auto。那么左外边距的宽度将是200像素。

从某种程度上讲，可以用auto弥补实际值与所需总和的差距。

要是这三个属性都设置为100px，即没有任何一个属性设置为auto，会怎么样呢？
如果这三个属性都设置为非auto的某个值，此时总会把margin-right强制为auto。
这意味着，如果外边距和width都设置为100px，用户代理将把右边距重置为auto。右外边距的auto值将会填补所需的距离，使元素的总宽度等于其包含块的width。

p {margin-left:100px;margin-right:100px;width:100px} 
/* right margin将被强制变为200px */

对于从左向右的语言会把margin-right设置为auto，但如果是从右到左的语言，一切正相反，所以会把margin-left强制为auto。

如果两个外边距都显式设置，而width设置为auto，width值将设置为所需的某个值，从而达到需要的总宽度。
这等价于只设置外边距而没有为width做任何声明，因为width的默认值就是auto。

不只一个auto

这三个属性中如果有两个都设置为auto会出现什么情况呢。

  • 如果两个外边距都设置为auto，它们会设置为相等的长度，因此将元素在其父元素中居中。
    将两个外边距设置为相等的长度是将元素居中的一种正确方法，这不同于使用text-align。（text-align只应用于块级元素的内联元素，所以将元素的text-align设置为center并不能将这个元素居中）

  • 将某个外边距以及width设置为auto，设置为auto的外边距会减为0。然后width会被设置为所需的值来使得元素完全填充其包含块。

p {margin-left:auto; margin-right:100px; width:auto;}
/*left margin evaluates to 0 */
  • 如果三个属性值都被设置为auto，两个外边距会设置为0，而width会尽可能宽。
    这种情况与默认情况是相同的，即没有为外边距或width显式声明任何值，在这种情况下，外边距默认为0，width默认为auto。

注意，由于水平外边距并不会合并，父元素的内边距、边距和外边距可能影响其子元素的布局。

负外边距

7个水平属性的总和要等于父元素的width，只要所有属性都是大于等于0，元素就不会大于其父元素的内容区。
但是，如果指定了负外边距：

div {width:400px; }
p {margin-left:10px; width:auto; margin-right:-50px;}

此时子元素p就会比父元素还宽：
10-40+440 = 400px；

440是width：auto的实际计算值，需要这样一个数与等式中余下的值相抵，从而使总和为父元素的宽度400px。
尽管这导致了子元素超出其父元素，但并没有违反规范，因为7个属性值加在一起仍等于所需的总宽度。

还有另一种情况，就是有可能将auto的右外边距计算为负值，如果其他属性值要求右外边距为负，以便满足不能比其包含块更宽的需求，就会出现这种情况。

百分数

如果width、内边距和外边距设置为百分数值，会应用同样的基本规则。值声明为长度还是百分数并不重要。

百分数相对于父元素的宽度来计算。

另外，边框的宽度不能是百分数，而只能是长度值。

替换元素

非替换块元素的所有规则同样适用于替换元素。
只有一个例外：如果width：auto，替换元素的宽度将是内容的固有宽度。
可以为width指定一个特性值来覆盖这个规则。此时元素的高度也会变化。如果一个替换元素的width不同于其固有宽度，那么height的值也会成比例变化，除非height自己也显示设置为一个特定值。
反过来也一样，如果设置了height，但width保持为auto，则width将随height的变化成比例调整。

垂直格式化

一个元素的默认高度由其内容决定。高度还会受内容宽度的影响；段落越窄，相应地就会越高，以便容纳其中所有的关联内容。

在CSS中，可以为任何块级元素设置显式高度。

  • 假定设定高度大于显示内容所需的高度，在这种情况下，多余的高度会产生一个视觉效果，好像有额外的内边距一样。
  • 假设设定高度小于显示内容所需的高度，浏览器会提供某种方法来查看所有内容，而不是增加元素框的高度。浏览器可能会向元素增加一个滚动条。
    如果元素内容大于元素框的高度，用户代理的具体行为将取决于overflow属性的值。

像width一样，height定义了内容区的高度，而不是可见元素框的高度。元素框上下的内边距、边框或外边距都会增加到height值。

垂直属性

与水平格式化的情况一样，垂直格式化也有7个相关属性：margin-top、margin-bottom、border-top、border-bottom、padding-top、padding-bottom、height。

  • 这7个属性的值之和必须等于元素包含块的height。这往往是块级元素父元素的height值。

  • 这七个属性种只有3个属性可以设置为auto：

    • height
    • 上外边距
    • 下外边距

上下内边距和边框必须设置为特定的值，或者默认为0.

如果正常流中一个块元素的margin-top活margin-bottom设置为auto，它会自动计算为0。如果值为0，就不能很容易地将元素在其包含块中垂直居中。
这也说明，如果将一个元素的上下外边距设置为auto，实际上他们都会重置为0，使元素没有外边距。

对于定位元素，上下外边距为auto时，其处理有所不同，以后再说

height必须设置为auto或某种类型的非负值。

  • 如果未明确指定包含块的高度，并且元素未绝对定位，则其高度的值计算为auto（它将与其内部的内容一样高，如果没有内容，则为零）。

百分数高度

如果一个块级正常流元素的height设置为一个百分数，这个值就是以包含块的height来计算。

<div style="height:6em">
<p style="height:50%">half</p>
</div>

由于将上下外边距设为auto时，实际上它们的高度会为0，因此，将元素垂直居中的唯一办法就是把上下外边距都设置为25%。

不过，如果没有显式地声明包含块的height，百分数高度会重置为auto。这时子元素将与包含块本身的高度完全相同。

auto高度

  • 如果将块级流元素设置为height：auto，显示时其高度将恰好足以包含其内联内容（包括文本）的行和。
  • 如果正常流元素的高度设置为auto，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边距框边界之间的距离。
    因此，子元素的外边距会超出包含这些子元素的元素。
<div class="container">
  <div class="a">
    aaaaaaa
  </div>
   <div class="b">
     bbbbbbbb
  </div>

</div>
.a{
height:200px;
background-color:red;
}
.b{
height:300px;
background-color:blue;
}
.a,.b{
padding:10px;
margin:10px
}
.container{
background-color:yellow;
}

此时我令div的两个子元素有内边距和外边距，可以发现父元素在垂直方向上并没有包含子元素的外边距，而只是从最高块级子元素的外边框边界到最低块级子元素外边距框边界之间的距离：
CSS学习笔记：盒模型

  • 但是如果块级元素有上内边距和下内边距，或者有上边框或下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

我们给上面例子中的父元素加上内边距，可以发现此时父元素的高度就是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

CSS学习笔记：盒模型

合并垂直外边距

Collapsing margins，即外边距折叠，指的是垂直方向上毗邻的两个或多个外边距 (margin) 会合并成一个外边距。

其中所说的 margin 毗邻，可以归结为以下两点：

  • 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
    注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻；
    只有在一个元素的 height 是 “auto” 的情况下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。
  • 这些 margin 都处于普通流中

具体折叠规则如下：
1)参与折叠的margin都是正值

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

CSS学习笔记：盒模型

在 margin 都是正数的情况下，取其中 margin 较大的值为最终 margin 值。

2)参与折叠的 margin 都是负值
当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移。

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

CSS学习笔记：盒模型

3) 参与折叠的 margin 中有正值，有负值
如果，毗邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

CSS学习笔记：盒模型

上面的例子最终的 margin 应该是 100 + (-50) = 50px。

4) 相邻的 margin 要一起参与计算，不得分步计算
要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。

而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。

一个复杂的实例：

<div style="margin:50px 0; background-color:green; width:50px;">
<div style="margin:-60px 0;">
<div style="margin:150px 0;">A</div>
</div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
<div style="margin:-120px 0;">
<div style="margin:200px 0;">B</div>
</div>
</div>

错误的计算方式：算 A 和 B 之间的 margin，分别算 A 和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是 90px。依此法算出 B 的为 80px；然后，A和B折叠，margin 为 90px。

请注意，多个 margin 相邻折叠成一个 margin，所以计算的时候，应该取所有相关的值一起计算，而不能分开分步来算。

所以，正确的计算方式为：

以上例子中，A 和 B 之间的 margin 折叠产生的 margin，是6个相邻 margin 折叠的结果。将其 margin 值分为两组：

正值：50px，150px，200px
负值：-60px，-100px，-120px
根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是 -120px，所以，最终折叠后的 margin 应该是 200 + (-120) = 80px。

浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

  • 浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会。
<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>

CSS学习笔记：盒模型

两个绿色的块儿之间，相距100px，而若 B 和它的浮动包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，显然，没有发生折叠。

  • 创建了块级格式化上下文（BFC）的元素，不和它的子元素发生 margin 折叠
    以 “overflow : hidden” 的元素为例：
<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
<div style="margin-top:50px; background-color:gold;">B</div>
</div>

若 B 和它的 “overflow:hidden” 包含块发生 margin 折叠的话，金色的条应该位于绿色块的最上方，否则，没有发生：
CSS学习笔记：盒模型

  • 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
<div style="border:1px solid red; width:100px;">
<div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>

以上代码运行后，我们讲得到的是红色边框的正方形，方框的宽高都应该是 100px，高度不应该是 150px。

CSS学习笔记：盒模型

负外边距

负外边距会影响外边距如何合并。

  • 如果垂直外边距都设置为负值，浏览器会取两个外边距绝对值的最大值。
  • 如果一个正外边距与一个负外边距合并，会从正外边距减去这个负外边距的绝对值。

注意，上下外边距为负时会有一种拉近效果，实际上，这与负水平外边距使元素超出其父元素没有什么区别。

  • 上负外边距使元素看上去被向上拉
  • 下负外边距使元素看上去被向下拉

考虑一个正负外边距合并的例子：

li{margin-bottom:20px}
ul{margin-bottom:-15px}
h1{margin-top:-18px}

其中，h1元素在ul元素的下方。
两个负外边距中绝对值较大的一个-18px增加到了最大的正外边距20px上，因此最终的外边距就是2px。

行内元素

行布局

对于行内元素，布局并没有块级元素那么简单和直接。
块级元素只是生成框，通常不允许其他内容与这些框并存。而行内框并不一定总是充满其父元素内容区。

基本术语和概念

  • 匿名文本：所有未包含在行内元素中的字符串
    注意，空格也是匿名文本的一部分，因为空格与其他字符一样都是正常的字符。

  • em框：em框在字体中被定义，实际的字形可能比其em框更高或更矮。在CSS中，font-size的值决定了各个em框的高度。

  • 内容区：元素中各字符的em框串在一起构成的框。
    对替换元素来说，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。

  • 行间距：是font-size值和line-height值之差。这个值实际上要分为两半，分别应用到内容区的顶部和底部。这两部分分别为半间距。行间距只应用于非替换元素。

  • 行内框：这个框通过向内容区增加行间距来描述。

    • 对于非替换元素，元素行内框的高度刚好等于line-height的值。
    • 对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素。

  • 行框：这是包含该行中出现的行内框的最高点和最低点的最小框。

  • 行内元素的背景应用于内容区及所有内边距。

  • 行内元素的边框要包围内容区及所有内边距和边框。

  • 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果，也就是说，他们不会影响行内框的高度。

  • 替换元素的内边距、边框和外边距会影响该元素行内框的高度。

行内非替换元素

建立框

首先，对于行内非替换元素或匿名文本一部分，font-size值确定了内容区的高度。
如果一个行内元素font-size为15px，则内容区高度为15px，因为元素中所有em框的高度都是15像素。

其次，再来考虑元素的line-height值，以及它与line-height之差。
line-height与font-size的差为行间距，分为两半并应用到内容区的上下，便形成行内框。
如果line-height的值比font-size的值小，那么行内框会小于内容区。这可能就会造成内容区的文字超出了行内框和行框的范围。

垂直对齐

如果改变行内框的vertical-align属性，也会应用同样的高度确定原则。

比如为一个元素设定vertical-align：4px，则会把元素上升4px，这会同时提升其内容区和行内框。如果原来此元素已经是整个行中的最高点，那么垂直对齐的这个修改会把整个行框的顶端也向上移4像素。

如果为一个元素的vertical-align设定为top，那么此元素可能会高于其他行内元素，此时此元素行内框的顶端与行框的顶端对齐。
类似的，其他关键值属性的效果如下：

  • top：将元素行内框的顶端与包含该元素的行框的顶端对齐
  • bottom：将元素行内框的底端与包含该元素的行框的底端对齐
  • text-top：将元素行内框的顶端与父元素内容区的顶端对齐
  • text-bottom：将元素行内框的底端与父元素内容区的底端对齐
  • middle：将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐
  • super：将元素的内容区和行内框上移
  • sub：将元素的内容区和行内框下移
  • 百分数：将元素上移或下移一定距离，这个距离由相对于元素line-height值的百分数确定。

管理line-height

之前我们了解到，改变一个行内元素的line-height可能导致文本行相互重叠。不过，这种修改都是针对单个元素的，如何以一种更一般的方式影像元素的line-height而避免内容重叠呢？
一种方法是对font-size有改变的元素结合使用em单位：

p{font-size:14px; line-height:1em}
big{font-size:250%; line-height:1em}

这样，虽然子元素字体变大了，但相应的line-height也增大了，因此不会造成文本行重叠。
要记住。line-height是相对于font-size设置，而不是父元素。

缩放行高

其实设置line-height的最好办法就是使用一个原始数字值，这个数字会成为缩放因子，而该因子是一个继承值而非计算值。假设希望一个元素的所有后代的line-height都是其font-size的1.5倍，可以如下声明：

body{line-height:1.5}

这个缩放因子在元素间逐层传递，在各层上，这个因子都作为一个乘数与各元素font-size相乘。

还有一种解决方案，就是适当地设置样式，使行高恰好能包含行内容，而没有多余的空间，那么就使line-height等于1.0。这意味着对于每个元素，行内框与内容框相同，那么就会使用所需的绝对最小大小来包含各元素的内容区。

大多数字体在字形字符行之间还显示有一点空间，因为字符往往比其em框要小。

增加框属性

内边距、外边距和边框都可以应用于行内非替换元素。行内元素的这些方面根本不会影响行框的高度。

行内元素的边框边界由font-size而不是line-height控制。举个例子，如果一个行内元素的font-size为12px，line-height为36px，其内容区就是12px高，边框将包围该内容区。

或者，可以为行内元素指定内边距，这会把边框从文本本身拉开。
但是这个内边距并没有改变内容区的具体形状。
自己试了一下：

<span class="a">aaaaaaa</span><span class="b">bbbbb</span>
.a{
line-height:18px;
background-color:aqua;

}
.b{
font-size:24px;
line-height:36px;
background-color:yellow;

}
span{padding:20px}

CSS学习笔记：盒模型

这里给两个行内框都加了padding，导致边框和背景色都随之扩大。但是可以看出：

  • 行框没有变化，还是第二个行内元素的line-height：36px导致的行框高度为36px。

  • 内容区高度没有变化，还是各font-size决定的

    CSS学习笔记：盒模型
    这张图看的也很清楚，上下两行重叠了，因为padding并没有撑大行内框和行框的高度，所以会造成这种重叠。

而至于外边距，外边距不会应用到行内非替换元素的顶端和底端，它们不影响行框的高度。

而行内元素的两端则是另一回事：
行内元素基本上会作为一行放置，然后分成多个部分。

  • 如果向一个行内元素应用外边距，这些外边距将出现在其开始和末尾；分别为左右外边距。

因此，虽然内边距和外边距不影响行高，但是它确实能影响一个元素内容的布局，可能将文本推离其左右两端。而如果左右外边距为负，可能会把文本拉近，甚至导致重叠。

行内替换元素

一般认为行内替换元素有固有的高度和宽度，因此，有固有高度的替换元素可能导致行框比正常要高。这不会改变行中任何元素的line-height值，包括替换元素本身，而只是会让行框的高度恰好能包含替换元素。
换句话说，会用替换元素整体（包括内容、外边距、边框和内边距）来定义此元素的行内框。

虽然行内替换元素的line-height对此元素的行内框没有任何影响，但是行内替换元素还是需要这么一个值，从而在垂直对齐时能正确地定位元素，因为vertical-align的百分数值是相对于元素的line-height来计算的。

不过，对于一些替换元素，将line-height的值传递到该替换元素中的后代元素可能很重要。SVG图像就是这样一个例子。

增加框属性

有了以上了解，看上去向行内替换元素应用外边距、边框和内边距似乎很简单。

  • 内边距和边框像平常一样应用到替换元素；而此时内边距和边框确实会影响行框的高度，因为它们要作为行内替换元素的行内框的一部分（不同于行内非替换元素）。
  • 外边距也包含在行框中，但外边距有自己的问题：
    • 设置正外边距就是会使替换元素的行内框更高
    • 设置负外边距会减少替换元素行内框的大小。
      负外边距会使替换元素的行内框小于正常大小，负外边距是使行内替换元素挤入其他行的唯一方法。

替换元素和基线

  • 默认的，行内替换元素位于基线上。
  • 如果为替换元素增加下内边距、边框或外边距，内容区会上移。
  • 替换元素没有自己的基线，所以相对来讲最好的办法是将其行内框的底端与基线对齐。因此，实际上是下外边距边界与基线对齐。

行内替换元素位于基线有一个有意思的效果：如果应用一个负的下外边距，元素实际上会被向下拉，因为其行内框的底端比其内容区的底端高。

改变元素显示

display: none

display: inline
display: block
display: contents
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: ruby
display: ruby-base
display: ruby-text
display: ruby-base-container
display: ruby-text-container 
display: run-in

改变角色

可以利用display属性改变元素的角色。这样做有一些好处：

  • 将链接作为块级元素，整个元素框会成为链接的一部分，都是可点击的区域。

但是，display改变的仅是元素的显示角色，而非元素的本质。比如行内元素可以作为一个块元素的后代，反之却不行。如果把一个行内元素改变为block角色，它还是不能包围一个块元素作为其后代。
display只是影响元素如何显示，而不影响它是何种元素。

inline-block

  • 行内块元素实际上会作为替换元素放在行中。这说明，行内块元素的底端默认位于文本行的基线上。

  • 而在行内块元素内部，会像块级元素一样设置内容的格式。就像所有块级或行内替换元素一样，行内块元素也有属性height和width，如果比周围内容高，这些属性会使行高增加。

  • 如果行内块级框的width没有指定，或为auto，元素框会收缩以适应内容，也就是元素框的宽度刚好足够包含该内容，而没有多余的空间。行内框也会这样做，但是行内框可能会跨多个文本行，但是行内块元素不能。

计算值

如果元素是浮动元素或定位元素，display的计算值可以改变。
如果为一个根元素声明display值，计算值也可以改变。
实际上，display、position和float会以很有意思的方式相互影响。

  • 如果一个元素是绝对定位元素，float的值设置为none。
  • 而对于浮动元素或绝对定位元素，display的计算值由声明值确定：
    • inline-table、table：计算为table
    • 其他基本都计算为block。
标签：

相关文章