CSS 框的生成:块级元素和块框

2021年9月28日 1点热度 0条评论 来源: ixygj197875

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

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

块级元素和块框

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

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

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


  1. <div class = "wrapper">
  2.     <div>div</div>
  3.     <p style = "width: 100px;">p</p>
  4.     <h1 style = "width: 100px;">h1</h1>
  5. </div>

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


  1. .wrapper {
  2.    width: 300px;
  3.    height: 120px;
  4.    border: 1px solid #ccc;
  5. }
  6. div, p, h1 {
  7.    margin: 10px;
  8.    border: 1px dashed gray;
  9. }

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

图4-59 块级元素

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

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


  1. <ol>
  2.    <li>列表项1</li>
  3.    <li>列表项2</li>
  4.    <li>列表项2</li>
  5. </ol>

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


  1. ol {
  2.    border: 1px solid #ccc;
  3. }
  4. li {
  5.    border: 1px dashed gray;
  6. }

有序列表 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 上开源。

    原文作者:ixygj197875
    原文地址: https://blog.csdn.net/ixygj197875/article/details/79338318
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。