1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

正常布局流(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>

<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>

$$

$$tip

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

$$