这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

一、CSS简介

1.1 CSS是什么？

CSS (Cascading Style Sheets) : 层叠样式表 , 有时也会称之为 CSS样式表 或 级联样式表。

主要用来定义页面元素的样式：

设置字体和颜色
设置位置和大小
添加动画效果

1.2 CSS语法规范

CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明。

选择器 是用于选出需要设置 CSS 样式的 HTML 标签，选择器后跟的花括号内是对该对象设置的具体样式
属性 和 属性值 以 “键值对” 的形式出现 属性: 属性值;
属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等
属性和属性值之间用英文 : 分开
多个 “键值对” 之间用英文 ; 进行区分

<head>
    <style type="text/css">
        h4 {
            color: bule;
            font-size: 100px;
        }
    </style>
</head>

1.3 CSS的三种引入方式

1.3.1 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。

<div style="color: red; font-size: 12px;">
    青春不常在，抓紧谈恋爱
</div>

可以控制当前的标签设置样式
使用行内样式表设定 CSS，通常也被称为 行内式引入

1.3.2 内部样式表

内部样式表（嵌入样式表）时写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

<style type="text/css">
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放到文档的 <head> 标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
使用内部样式表设定 CSS，通常也被称为 嵌入式引入，这种方式是我们练习时常用的方式

1.3.3 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

新建一个后缀名为：.css 的样式文件，把所有的 CSS 代码都放入此文件中
在 HTML 页面中，使用 <link> 标签引入这个文件

<link rel="stylesheet" type="text/css" href="css文件路径">

属性	作用
`rel`	定义当前文档与被链接文档之间的关系，在这里需要指定为 "stylesheet"，表示被链接的文档是一个样式表文件
`type`	定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表，目前的浏览器已经支持省略 "type" 属性
`href`	定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径

注意： 使用外部样式表设定 CSS，通常也被称为 外链式 或 链接式引入，这种方式是开发中常用的方式。

1.4 CSS是如何工作的

二、CSS基础选择器

2.1 CSS选择器的作用

选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。

h1 {
	color: red;
	font-size: 25px;
}

以上 CSS 做了两件事：

找到所有的 h1 标签。
设置这些标签的样式：颜色为红色、字体大小为 25 像素。

2.2 选择器的分类

选择器分为 基础选择器 和 复合选择器 两个大类。

基础选择器是由 单个 选择器组成的
基础选择器又包括：标签选择器、类选择器、id 选择器、通配符选择器

2.3 通配符选择器

在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。

语法：

* {
	属性1: 属性值1;
	...
}

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景

// 利用通配符选择器清除所有的元素标签的内外边距
* {
	margin: 0;
	padding: 0;
}

2.4 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

作用： 标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优点： 能快速为页面中同类型的标签统一设置样式。

缺点： 不能设计差异化样式，只能选择全部的当前标签。

2.5 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

语法：

#id名 {
	属性1: 属性值1;
	...
}

例如： 将 id 为 nav 元素中的内容设置为红色。

#nav {
	color: red;
}

注意： id 属性只能在每个 HTML 文档中出现一次。

id 选择器和类选择器的区别：

类选择器 (class) 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id 选择器好比人的身份证号码，全中国是唯一的，不可重复（同一个 id 选择器只能调用一次）
id 选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

再次强调：同一 id 只能定义一次，同一 id 选择器也只能调用一次！（对于 CSS 修改样式来说，最好使用类选择器，id 选择器主要与后面的 JS 搭配使用）。

2.6 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器 。

CSS 语法：

.类名 {
	属性1: 属性值1;
	...
}

例如：将所有拥有 red 类的 HTML 元素均设置为红色。

.red {
	color: red;
}

HTML 语法：

<div class="red">变红色</div>

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个 . 号显示。

注意：

类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
可以理解为给这个标签起了一个别名来表示
长名称或词组可以使用中横线 - 来为类命名
不能使用已有的关键字作为类名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）

类选择器——多类名

可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

在标签 class 属性中写多个类名
多个类名中间必须用 空格 分开
这个标签就可以分别具有这些类名的样式

多类名开发中使用场景

可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）

2.7 属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择input 标签

选择器语法：

选中页面中所有的文本框，使用属性选择器如何实现呢？

input[type="text"] { }

2.8 伪类选择器

伪类选择器 用于向某些选择器添加特殊的效果，比如：给链接添加特殊效果（链接伪类），或选择第 n 个元素（结构伪类）。 伪类选择器 书写最大的特点是用冒号 : 表示，比如：:hover、:first-child。因为伪类选择器很多，比如：链接伪类、结构伪类 等，所以这里先讲解常用的链接伪类选择器。

伪类的由来：因为在页面中并没有这个真实存在的类，所以称为 “伪类”。

2.8.1 链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法	功能
`a:link` { }	选中a链接未访问过的状态
`a:visited`{ }	选中a链接访问之后的状态
`a:hover` { }	选中鼠标悬停的状态
`a:active`{ }	选中鼠标按下的状态

链接伪类选择器注意事项：

为了确保生效且不冲突，请按照 LVHA 的顺序声明 :link :visited :hover :active
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法：

/* a 是标签选择器 所有的链接 */
a {
	color: gray;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
	color: red; 	/* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 注意：要学会触类旁通，这里不只是可以改变颜色，当链接为图片时还可以改图片 */
        /* 1、a:link 把没有点击过的（访问过的）链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2、a:visited 选择点击过的（访问过的）链接选出来 */
        a:visited {
            color: orange;
        }

        /* 3、a:hover 选择鼠标经过（停留）的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4、a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

注意：:hover :active 也适用于其他标签元素。

2.8.2 焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
	background-color: yellow;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之focus伪类选择器</title>
    <style>
        /* 把获得光标的 input 表单元素选区出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

2.9 组合选择器

三、CSS字体属性

CSS Fonts（字体）属性用于定义：字体系列、大小、粗细、和 文字样式（如：斜体）。

3.1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p {
	font-family: "Microsoft YaHei";
}

div {
	font-family: Arial, "Microsoft YaHei";
}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常用的字体：body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style type="text/css">
        /* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
           如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
        h2 {
            /* font-family: '微软雅黑'; 可以使用中文，但不建议 */
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        p {
            font-family: "Times New Roman", Times, serif;
        }
    </style>
</head>

<body>
    <h2>资料：</h2>
    <p>姓名</p>
    <p>生日</p>
    <p>性别</p>
    <p>婚姻状况</p>
</body>

</html>

使用Web Fonts

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

p {
	font-size: 20px;
}

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小

3.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p {
	font-weight: bold;
}

属性值	描述
`normal`	默认值（不加粗的）
`bold`	定义粗体（加粗的）
`100-900`	400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位

学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

3.4 行高

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

p {
	line-height: 26px;
}

行间距 = 上间距 + 文本高度 + 下间距
上下间距 = （行间距 - 文本高度）/ 2
文本高度 = font-size

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style type="text/css">
        /* 行间距 = 上间距 + 文本高度 + 下间距 */
        /* 行间距 = 行高 */
        /* 文本高度 = 字体像素大小 */
        /* 上下间距 = （行间距 - 文本高度）/ 2 */
        p {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，
        这代表了中国最成熟的三套城市轨道交通系统</p>

    <p>可即使是这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤，
        对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

    <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

</html>

3.5 文字样式

CSS 使用 font-style 属性设置文本的风格。

p {
	font-style: normal;
}

属性值	作用
`normal`	默认值，浏览器会显示标准的字体样式 font-style: normal;
`italic`	浏览器会显示斜体的字体样式

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体样式（风格）</title>
    <style type="text/css">
        p {
            /* 让不倾斜的字体倾斜 */
            font-style: italic;
        }

        em {
            /* 让倾斜的字体不倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <p>上课时候的你</p>
    <em>下课时候的你</em>
</body>

</html>

3.6 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

body {
	font: font-style font-weight font-size/line-height font-family;
}

body {
	font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之复合属性</title>
    <style type="text/css">
        /* 想要 div 文字变倾斜、加粗、字号设置为 16 像素，并且是微软雅黑 */
        div {
            /* font-style: italic;
               font-weight: 700;
               font-size: 16px;
               font-family: 'Microsoft YaHei'; */

            /* 复合属性：简写的方式，里面的顺序不能打乱 以空格隔开 */
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'Microsoft YaHei';
            /* 注意：不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用 */
            /* font: 20px 'Microsoft YaHei'； */
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>

</html>

四、CSS文本属性

CSS Text（文本）属性可定义文本的 外观，比如：文本颜色、文本对齐、文本装饰、文本缩进、行间距 等。

4.1 文本颜色

color 属性用于定义文本的颜色。

div {
	color: red;
}

表示方式	属性值
预定义的颜色值	red，green，blue，black，white，gray
十六进制	#FF0000，#FF6600，#29D794（每两位对应：#红R绿G蓝B）
RGB 代码	rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观属性之文本颜色</title>
    <style type="text/css">
        div {
            /* color: deeppink; */
            /* color: #FF1493; 最常用 */
            color: rgb(255, 20, 147);
        }
    </style>
</head>

<body>
    <div>pink</div>
</body>

</html>

4.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。

div {
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
rigth	右对齐
center	居中对齐

注意：

text-align 属性只能作用于 块级元素，并让该块级元素内的 行内元素 实现居中（不一定是文字）。

上述例子中：h1 为块级元素，所以给 h1 设置 text-align，便会作用于里面的文本（如果里面还有行内元素的话，也会一同作用）。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本对齐</title>
    <style type="text/css">
        div {
            text-align: center;
        }
    </style>
</head>

<body>
   <div>
	   <p>zhoujiruizhoujirui</p>
   </div>
</body>

</html>

上述例子中：为 div 设置 text-align 之所以能够使其内部的块级元素 p 里的文字居中，原因是 p 会继承父元素 div 的 text-align 属性，所以相当于对 p 设置了 text-align。

text-align : center 能让哪些元素水平居中？

文本
span标签、a标签
input标签、img标签

注意点：

1.如果需要让以上元素水平居中，text-align : center 需要给以上元素的父元素设置

4.3 文本装饰

text-decoration 属性规定添加到文本的修饰，可以给文本添加 下划线、删除线、上划线 等。

div {
	text-decoration: underline;
}

属性值	描述
`none`	默认，没有装饰线（最常用）
`underline`	下划线，链接 a 自带下划线（常用）
`overline`	上划线（几乎不用）
`line-through`	删除线（不常用）

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本装饰</title>
    <style type="text/css">
        /* 默认为 none 没有装饰 */
        div {
            /* 上划线 几乎不用 */
            /* text-decoration: overline; */
            /* 删除线 不常用 */
            /* text-decoration: line-through; */
            /* 下划线 常用，链接 a 自带下划线 */
            text-decoration: underline;
        }

        a {
            /* 取消 a 默认的下划线 */
            text-decoration: none;
            color: #333333;
        }
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <a href="http://jerry-z-j-r.github.io">JERRY</a>
</body>

</html>

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div {
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
	text-indent: 2em;
}

em 是一个相对单位，就是当前元素 (font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本缩进</title>
    <style type="text/css">
        p {
            font-size: 24px;
            /* 文本的首行缩进多少距离，不仅可以为正值，还可以为负值 */
            /* text-indent: 20px; */
            /* em 为相对于当前元素的大小单位 */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，
        这代表了中国最成熟的三套城市轨道交通系统</p>

    <p>可即使是这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤，
        对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

    <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

</html>

五布局

5.1 布局是什么？

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

5.2 布局相关技术

5.3 盒子模型

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

内容区域的宽度和高度

作用：利用width 和height 属性默认设置是盒子内容区域的大小

属性：width /height

常见取值：数字+px

5.4 块级与行级

块级盒子：不和其它盒子并列摆放，适用所有的盒模型属性

行级盒子：和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子；内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code等
display:block	display:inline

5.5 常规流

行级排版上下文(Inline Formatting Context, IFC)

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则：

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
verticle-align决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文(Block Formatting Context, BFC)

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display:flow-root

BFC内的排版规则

盒子从上到下摆放
垂直margin合并
BFC内盒子内的margin不会与外面的合并
BFC不会和浮动元素重叠

参考引用

部分内容参考了周吉瑞github上整理的资料

CSS | 青训营笔记

一、CSS简介

1.1 CSS是什么？

1.2 CSS语法规范

1.3 CSS的三种引入方式

1.3.1 行内样式表

1.3.2 内部样式表

1.3.3 外部样式表

1.4 CSS是如何工作的

二、CSS基础选择器

2.1 CSS选择器的作用

2.2 选择器的分类

2.3 通配符选择器

2.4 标签选择器

2.5 id选择器

2.6 类选择器

2.7 属性选择器

2.8 伪类选择器

2.8.1 链接伪类选择器

2.8.2 焦点伪类选择器

2.9 组合选择器

三、CSS字体属性

3.1 字体系列

3.2 字体大小

3.3 字体粗细

3.4 行高

3.5 文字样式

3.6 字体复合属性

四、CSS文本属性

4.1 文本颜色

4.2 文本对齐

4.3 文本装饰

4.4 文本缩进

五 布局

5.1 布局是什么？

5.2 布局相关技术

5.3 盒子模型

内容区域的宽度和高度

5.4 块级与行级

5.5 常规流

行级排版上下文(Inline Formatting Context, IFC)

块级排版上下文(Block Formatting Context, BFC)

参考引用

五布局