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;
}
可以说,示例中的所有元素都属于常规流,按照源代码中的顺序渲染到页面中。
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。
上一篇:CSS
流式布局和书写模式 下一篇:CSS
布局和包含块
开发学习网



