揭秘CSS(第 1 版)
4.8.1 块级元素和块框
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

盒尺寸

处理溢出

框的生成

在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框。默认情况下,一个元素的类型,决定了该元素生成框的类型。块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框。

也可以通过元素的 display 属性,来改变框的显示类型。可以把块级元素的 display 属性设置为 inline 或 inline-block,让它生成行内级框;也可以把行内块级元素的 display 属性设置为 block,让它生成块级框。

块级元素和块框

块级元素(block-level element),就是那些在源文档中被格式化成块的元素。每个块级元素都会形成一个新的内容块,左右不能放置其他元素。典型的块级元素有div、p、h1~h6、ul、ol、table,等等。

如果一个元素的 display 属性值为 block、list-item、table、flex,它就会生成一个块级框,用来包含后代框和其他生成的内容。

每个块级框被渲染为完整的一行,即便一行的空间足以容纳多个块级框也是如此。假设在一个 div 容器中,包含三个块级子元素:

<div class = "wrapper">
    <div>div</div>
    <p style = "width: 100px;">p</p>
    <h1 style = "width: 100px;">h1</h1>
</div>

假设把 .wrapper 容器的宽度设置为 300px,把 p 元素和 h1 元素的宽度都设置为 100px。为了便于观察,并为div、p、h1都设置了 10px 的外边距和 1px 的虚线边框:

.wrapper {
   width: 300px;
   height: 120px;
   border: 1px solid #ccc;
}
div, p, h1 {
   margin: 10px;
   border: 1px dashed gray;
}

上述代码的运行结果如图 4‑59 所示:

块级元素
图4-59 块级元素

从上图可以看出,.wrapper 容器和三个子元素都分别生成一个块级框,由于 div、p、h1 子元素都是块级元素,它们分别独占一行。虽然一行的空间足以同时容纳 p 元素和 h1 元素, 但它们生成的块级框也是各自独占一行。

有些块级元素,除了生成块级框外,还会生成其他的框,如 display 属性值为 list-item 列表元素,会生成额外的框来放置列表的项目符号。假设有一个有序列表:

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项2</li>
</ol>

为了方便查看效果,为 ol 和 li 元素都设置 1px 的灰色边框:

ol {
   border: 1px solid #ccc;
}
li {
   border: 1px dashed gray;
}

有序列表 ol 元素本身是块级元素,其子元素 li 也是块级元素。因此,ol 元素会生成一个块级框,每个 li 子元素也会生成一个块级框。在为每个 li 子元素生成块级框时,还会生成额外的框,用来放置列表的项目符号。如图 4‑60 所示:

块级元素生成额外的框
图4-60 块级元素生成额外的框

除了 table 框和替换元素的框,一个块级框同时也是一个块容器框。一个块容器框要么只包含块级框,要么创建一个行格式化上下文,并只包含行内级框。

并不是所有的块容器框都是块级框,非替换的行内块(inline-block),以及非替换的表格单元格都是块容器框,但它们都不是块级框。如果一个框既是块级框,同时又是块容器框,则被称作块框。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验