CSS 应用或脱离流式布局

原创
admin 4个月前 (08-23) 阅读数 27 #CSS

应用或脱离流式布局

在之前的文档中我解释了常规流中块(block)和行(inline)布局,常规流中的所有元素都会以这种布局方式运作。

在下面的例子中,我新建了一个标题(h1 元素),一个段落(p 元素),一个无序列表(ul 元素)和一个包含 strong 元素的段落(p 元素),标题和段落都是块级(block level),strong 元素为行级(inline)。列表中的项通过弹性盒布局排成一行,但是列表本身仍然处于块和内联布局中 - 他的 display 属性为 block。

html
<div class="box">
  <h1>A heading</h1>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <p>
    Their names were <strong>Stephen and Joseph Montgolfier</strong>, they were
    papermakers by trade, and were noted as possessing thoughtful minds and a
    deep interest in all scientific knowledge and new discovery.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box > * {
  border: 1px solid green;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
}

可以说,示例中的所有元素都属于常规流,按照源代码中的顺序渲染到页面中。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。

作者文章
热门
最新文章
标签列表