正常布局流 - 布局样式 - CSS 教材

正常布局流（Normal Flow）指的就是当我们未对元素设置任何的布局样式时，浏览器默认的 HTML 布局方式。

对于块级元素来说，它默认宽度是父元素的 100%，并且块级元素总是单独作为一行。可以设置元素的宽高。

对于行内元素（内联元素）来说，行内元素的宽度等于自身内容的宽度，行内元素可与其他行内元素共处一行，在父元素的宽度不足以排列行内元素的情况下则会换行。还有一点是行内元素不能被设置宽高。

对于行内块级元素来说，它兼顾了块级元素与行内元素的特性，既可以共处一行，也可以设置宽高。

通过设置 display 属性可以改变元素类型：

block：块级元素。
inline：行内元素。
inline-block：行内块级元素。

浏览器会从上往下解析 HTML 代码，把元素解析成一个个的盒模型，给元素加上内边距、边框、外边距，按照从上至下从左至右的顺序把元素排列在页面之上。

<h1>进击的巨人</h1>
<p>
    <img src="https://3yya.com/jinji-small.jpg" />
    《进击的巨人》（日语：進撃の巨人）是<a
        href="https://zh.wikipedia.org/wiki/%E8%AB%AB%E5%B1%B1%E5%89%B5"
        >日本漫画家谏山创</a
    >创作的漫画作品。漫画于2009年9月至2021年4月间在讲谈社《别册少年Magazine》上连载，单行本全34卷。故事建立在人类与巨人的冲突上，人类居住在由高墙包围的城市，对抗会吃人的巨人，并寻找著关于巨人的答案。
</p>
<h2>剧情大纲</h2>
<p>
    故事围绕在主人翁<a
        href="https://zh.wikipedia.org/wiki/%E8%89%BE%E9%80%A3%C2%B7%E8%91%89%E5%8D%A1"
        >艾伦·耶格尔</a
    >与三笠和阿尔敏三人的经历。在保护他们家乡的玛丽亚之墙被巨人摧毁后，艾伦亲眼目睹母亲被巨人吃掉，誓言要杀光所有巨人。
</p>
<h2>电视动画</h2>
<p>
    制作公司是WIT STUDIO（《进击的巨人》也是该公司从Production
    I.G独立以后制作首部漫画改编动画），2013年4月6日开始播放第一季。2017年4月1日开始播放第二季。2018年7月22日开始播放第三季第一部分。2019年4月28日播放第二部分。最终季改由MAPPA制作，并于2020年12月7日开始播放第一部分，2022年1月10日起播放第二部分。
</p>

$$demo

<h1>进击的巨人</h1>

<p>

《进击的巨人》（日语：進撃の巨人）是<a

href="https://zh.wikipedia.org/wiki/%E8%AB%AB%E5%B1%B1%E5%89%B5"

日本漫画家谏山创</a

创作的漫画作品。漫画于2009年9月至2021年4月间在讲谈社《别册少年Magazine》上连载，单行本全34卷。故事建立在人类与巨人的冲突上，人类居住在由高墙包围的城市，对抗会吃人的巨人，并寻找著关于巨人的答案。

</p>

<p>

故事围绕在主人翁<a

href="https://zh.wikipedia.org/wiki/%E8%89%BE%E9%80%A3%C2%B7%E8%91%89%E5%8D%A1"

艾伦·耶格尔</a

与三笠和阿尔敏三人的经历。在保护他们家乡的玛丽亚之墙被巨人摧毁后，艾伦亲眼目睹母亲被巨人吃掉，誓言要杀光所有巨人。

</p>

<p>

制作公司是WIT STUDIO（《进击的巨人》也是该公司从Production

I.G独立以后制作首部漫画改编动画），2013年4月6日开始播放第一季。2017年4月1日开始播放第二季。2018年7月22日开始播放第三季第一部分。2019年4月28日播放第二部分。最终季改由MAPPA制作，并于2020年12月7日开始播放第一部分，2022年1月10日起播放第二部分。

</p>

$$tip

虽然通过 CSS 可以调整页面的布局，但如果能通过正常布局流就能完成的布局还是推荐使用默认布局，因此建立一个结构良好的 HTML 文档结构以贴切页面最终效果尤为重要。