文章目录
什么是CSS
CSS（Cascading Style Sheets） 是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
HTML 是网页的基本框架，CSS 则是对这些框架进行修饰美化。
基本语法规范
选择器 + {一条/N条声明}
- 选择器的作用是决定针对谁进行修改，要修改啥
- 声明的属性则是键值对形式的，键值对之间使用 ; 分割
<style>
p {
color: red;
font-size: 30px;
}
</style>
<p>hello</p>
上面的这段CSS代码的意思就是选中了 p 标签，然后 p 标签中的元素的颜色为红色，字体大小为 30 px。
引入方式
CSS 选择器怎样才会选中 HTML 元素呢？
内部样式表
如果 CSS 代码和 HTML 代码在一个文件中的话，可以将 CSS 代码写在 <style> 标签中，然后这个 <style>标签可以放在 <head> 标签中也可以放在 <body> 标签中，但是一般放在 <head> 标签中。
这样的写的优点是：能够让样式和页面结构分离；缺点就是：分离的不够彻底，尤其是当 CSS 内容多的时候。
行内样式表
也可以通过在标签中的 style 属性中指定某个标签的样式，这种方式只能针对某一个标签来书写样式，并且不能写太复杂的样式。当内部样式表和行内样式表都选中修饰的是一个标签的话，行内样式表的优先级较高。
<style>
div {
color: red;
}
</style>
<div style="color: green;">你好呀</div>
外部样式
外部样式引入 CSS 样式是实际开发中最常用的一种引入方式，外部样式引入是将我们的 CSS 代码写入一个 css 文件中，然后通过 <link> 标签来引入 css 样式：
<link rel="stylesheet" href="[CSS文件路径]">
- rel 属性指定了当前文档与被链接文档之间的关系类型。在这里，它表示被链接的文档是一个样式表。
test1.html 文件：
<link rel="stylesheet" href="test1.css">
<div >你好呀</div>
test1.css 文件：
div {
color: red
}
外部样式引入的优点是样式和结构彻底分离了，但是缺点是可能会受到浏览器的影响，修改之后不一定立刻生效。
选择器
选择器的功能：选择器是用来选中页面中指定的标签元素的，想要设置元素的样式首先需要的就是先选中元素。
选择器的种类：在 CSS2 中选择器的种类主要有两种：基础选择器和复合选择器：
基础选择器：
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器（把多种基础选择器综合运用起来）：
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
参考文档：https://www.w3school.com.cn/cssref/css_selectors.asp
基础选择器
标签选择器
标签选择器可以将一类标签都选中：
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>Java</p>
<p>Java</p>
<p>Java</p>
<div>C++</div>
<div>C++</div>
<div>C++</div>
类选择器
类选择器可以差异化表示不同的标签，并且可以让多个标签使用同一个标签：
<style>
.hhh {
color: red
}
</style>
<div class="hhh">你好</div>
<div>世界</div>
类选择器使用要以 . 开头，然后类名就是我们在标签中的 class 属性中指定的类名，一个标签可以存在多个类名，多个类名之间使用空格分割：
<style>
.box {
width: 200px;
height: 100px;
}
.aaa {
color: red;
}
.bbb {
color: green;
}
.ccc {
color: blue;
}
</style>
<div class="box aaa">HTML</div>
<div class="box bbb">CSS</div>
<div class="box ccc">JavaScript</div>
类名不要使用纯数字，或者中文，以及标签名来命名
id 选择器
id 选择器的作用和类选择器是类似的，不同的是，同一个 HTML 文件中 id 是唯一的.
id 选择器以 # 开始，然后加上标签的 id 值就可以了：
<style>
#hhh {
color:aqua
}
</style>
<div id="hhh">CSS</div>
通配符选择器
使用 * 的定义，选中所有标签：
<style>
* {
color: red;
}
</style>
<p>HTML</p>
<p>HTML</p>
<p>HTML</p>
<div>CSS</div>
<div>CSS</div>
<div>CSS</div>
<span>JavaScript</span>
<span>JavaScript</span>
<span>JavaScript</span>
基础选择器小结
| 选择器 | 作用 | 特点 |
|---|---|---|
| 标签选择器 | 能选出所有相同的标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活，最常用 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML文件中只能出现一次 |
| 通配符选择器 | 选择出所有标签 | 特殊情况下使用 |
复合选择器
后代选择器
后代选择器又叫做包含选择器，选择某个父元素中的某个子元素：元素1 元素2 {样式声明}
- 元素 1 和元素 2 之间使用空格分开
- 元素 1 是父级，元素 2 是子级，只选元素 2，不影响元素 1
后代选择器通常使用在，当我们需要选择的标签存在相同标签的时候，只想选中部分标签的情况：
<style>
ul li {
color: red
}
</style>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
既然后代选择器可以选中父元素中的子元素，那也当然可以选中孙子元素：
<style>
ul li a{
color: red
}
</style>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>
<a href="#">点击跳转</a>
</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
元素1、元素2、元素3…并不一定都要是类选择器、标签选择器等，可以同时存在标签选择器、类选择器、id选择器等。
子选择器
子选择器和后代选择器类似，但是子选择器只能选择子标签。元素1>元素2 {样式声明}
<style>
.aaa>a {
color: red
}
</style>
<div class="aaa">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
使用后代选择器之后，这两个链接都会被选中：
<style>
.aaa a {
color: red
}
</style>
并集选择器
并集选择器用于选择多组标签（集体声明）：元素1,元素2 {样式声明}
多个元素之间通过逗号分割，表示同时选中多个元素。
<style>
div, h3 {
color: red;
}
</style>
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
伪类选择器
1. 链接伪类选择器
- a:link：选择未被访问过的链接
- a:visited：选择已经被访问过的链接
- a:hover：选择鼠标指针悬停上的链接
- a:active：选择活动链接（鼠标按下了但是未弹起）
这是默认 a 标签的样式：
<a href="#">小猫</a>
<a href="#">小狗</a>
<style>
a:link {
color: black;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
悬停：
点击之后不松开：
点击之后的链接的样式：
要想让一个已经已经别访问的链接恢复成未访问的状态，可以使用 ctrl + shift + delete 清除浏览器历史记录。
注意：
- 按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 “绿化”
- 浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
- 实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多
2. force 伪类选择器
选取获取焦点的 input 表单元素。
<style>
.three>input:focus {
color: red;
}
</style>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
选中这个输入框：
不选中：
符合选择器小结
| 选择器 | 作用 | 注意 |
|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选亲儿子, 不能选孙子 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接伪类选择器 | 选择不同状态的链接 | 重点掌握 a:hover 的写法. |
| :focuse 伪类选择器 | 选择被选中的元素 | 重点掌握 input:focus |
CSS常用元素属性
CSS 属性有很多，大家可以参考文档https://www.w3school.com.cn/cssref/index.asp#google_vignette
字体属性
设置字体
font-family属性设置字体。
<style>
p {
font-family: '微软雅黑';
}
</style>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quaerat exercitationem a fuga! Maxime pariatur alias at facilis, illo placeat cum animi possimus deserunt nulla totam similique, suscipit nam quaerat.</p>
- 字体名称可以使用中文，但是不建议使用中文
- 多个字体之间使用逗号分隔（从左到右查找字体，如果都找不到，会使用默认字体）
- 如果字体名有空格，需使用引号包裹
- 建议使用常用字体，否则兼容性不好
<style>
p {
font-family: '宋体';
}
</style>
字体大小
font-size 属性用来设置字体的大小。
<style>
p {
font-size: 40px;
}
</style>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quaerat exercitationem a fuga! Maxime pariatur alias at facilis, illo placeat cum animi possimus deserunt nulla totam similique, suscipit nam quaerat.</p>
可以直接给 body 标签设置字体大小。
字体粗细
使用 font-weight 属性为字体设置粗细。
<style>
p {
font-weight: bold;
}
</style>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quaerat exercitationem a fuga! Maxime pariatur alias at facilis, illo placeat cum animi possimus deserunt nulla totam similique, suscipit nam quaerat.</p>
- 可以使用数字表示粗细，也可以使用汉字
- bold == 700，400是不变粗，也就是 normal==400
- 字体大小的范围是 100-900
<style>
p {
font-weight: 200;
}
</style>
文字样式
使用 font-style 属性来设置文字样式。
<style>
p {
font-style: italic;
}
</style>
- italic 表示设置斜体
- normal 表示不设置斜体
文本属性
文本颜色
在学习文本颜色之前，我们需要先知道什么是 RGB？
RGB（Red, Green, Blue）是一种色彩模式，它是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。
数值越大表示该分量的颜色就越浓。255，255，255表示白色，0，0，0 表示黑色。
设置文本颜色
- color: red
- color: #ff0000
- color: rgb(255,0,0)
可以使用颜色的英文来表示，也可以使用十六进制的形式来表示颜色，还可以通过 rgb 来设置颜色。
十六进制表示颜色，如果两两相同，就可以使用一个来表示：#ff00ff -> #f0f
<style>
p {
color: red;
/* color: #f00;
color: rgb(255,0,0) */
}
</style>
文本对齐
text-align 属性控制文本的水平方向的对齐，这个属性不止能控制文本对齐，还可以控制图片等元素。
text–align的值有3个：
- center：居中对齐
- left：左对齐
- right：右对齐
<style>
p {
text-align: center;
}
</style>
<p>你好</p>
<style>
p {
text-align: left;
}
</style>
<style>
p {
text-align: right;
}
</style>
文本装饰
text-decoration 属性设置文本装饰。
常用取值：
- underline：下划线
- none：什么都没有，可以给 a 标签去掉默认的下划线
- overline：上划线
- line-through：删除线
<style>
.aaa {
text-decoration: underline;
}
.bbb {
text-decoration: none;
}
.ccc {
text-decoration: overline;
}
.ddd {
text-decoration: line-through;
}
</style>
<div class="test-decoration">
<div class="aaa">你好</div>
<div class="bbb">你好</div>
<div class="ccc">你好</div>
<div class="ddd">你好</div>
</div>
文本缩进
text-indent 设置段落首行的文本缩进，其他行不受约束。
- 单位可以使用 px，也可以使用 em，但是使用 em 更好，1em 就是当前元素的文字大小
- 缩进可以是负的，表示左缩进（会导致文本冒出去了）
<style>
.aaa {
text-indent: 2px;
}
.bbb {
text-indent: 15em;
}
</style>
<div class="test-decoration">
<div class="aaa">你好</div>
<div class="bbb">你好</div>
</div>
行高
line-height 属性设置文本的行高。
行高是指上下文本行之间的基线距离。
HTML 中展示文字设计到这几个基准线：
- 顶线
- 中线
- 基线（相当于英语四格线的倒数第二个线）
- 底线
行高 = 上边距 + 下边距 + 字体大小
<style>
.line-height .one {
line-height: 40px;
font-size: 16px;
}
</style>
<div class="line-height">
<div>
上一行
</div>
<div class="one">
中间行
</div>
<div>
下一行
</div>
</div>
当行高等于元素的高度的时候，就可以实现垂直方向上二点居中：
<style>
.aaa {
height: 100px;
line-height: 100px;
}
</style>
背景属性
background-color 属性设置背景颜色。默认是 transparent 透明的。
<style>
.aaa {
background-color: red;
}
.bbb {
background-color: #0f0;
}
.ccc {
background-color: transparent;
}
</style>
<div class="bgc">
<div class="aaa">背景1</div>
<div class="bbb">背景2</div>
<div class="ccc">背景3</div>
</div>
背景图片
background-image 属性设置背景图片，该属性的取值为 url(图片地址)。该属性比 image 标签更容易控制图片在盒子中的位置。
<style>
.bgc {
height: 700px;
width: 700px;
background-image: url(bear.jpg);
}
</style>
背景平铺
什么是背景平铺：
背景平铺是网页设计和界面设计中常用的一种技术或效果，它指的是将一张图像或图案以特定的方式重复出现在背景中，以填充整个背景区域。
我将上面的 .dbc 的宽度和高度都设置大一点：
这里我的图片的大小是小于 .bgc 的大小的，所以为了将图片填满 .bgc，图片就会重复出现，直至将 .bgc 填满。
可以使用 backgroud-repeat 来设置平铺的格式：
- repeat：平铺
- no-repeat：不平铺
- repeat-x：水平平铺
- repeat-y：垂直平铺
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
背景位置
background-position 属性修改背景的位置。
参数有三种风格：
- 方位名词：top、left、right、bottom
- 精准单位：坐标或者百分比（以左上角为原点）
- 混合单位：同时包含方位名词和精准单位
<style>
.bgc {
height: 750px;
width: 1500px;
background-image: url(bear.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
center 表示水平和垂直方向居中：
background-position: top left;
top、left 参数的位置没有关系，样式都是一样的，表示左上角：
background-position: 100px top;
表示距离左边界 100px，top：
- 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
- 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
- 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
- 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
- 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂
直居中)
计算机中的坐标：
背景尺寸
background-size: length|percentage|cover|contain 属性设置背景尺寸。
- 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
- 也可以填百分比: 按照父元素的尺寸设置
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无
法显示在背景定位区域中 - 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
cover 属性是将图片的长度和宽度都扩展到完全覆盖背景区域，而 contain 则是高度或者宽度完全适应内容区域。
<style>
.bgc {
width: 1500px;
height: 750px;
background-image: url(bear.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
圆角矩形
border-radius: length 是边框带圆角效果。
length 是内切圆的半径，数值越大，弧线越强烈：
<style>
div {
width: 200px;
height: 100px;
border: 2px solid red;
border-radius: 10px;
}
</style>
<div>你好 你好 你好 你好 你好 你好</div>
border 属性中的值表示边界的宽度、边界是实线还是虚线、边界的颜色。
如何生成圆角矩形
让 border-radius 的值为矩形高度的一半即可：
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}
</style>
上面的写法是一次将四个角都给指定了，也可以将四个角分出来写：
border-radius: 10px 20px 30px 40px;
这样写的话就是从左上角开始顺时针的顺序排列，也就是左上角、右上角、右下角、左下角。
上面的写法等价于这种写法：
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
元素的显示模式
在 CSS 中，HTML 的标签的显示模式有很多，这里主要介绍两个：
- 块级元素
- 行内元素
块级元素
块级元素的特点;
- 总是在新行上开始，占据一整行。
- 高度，行高以及外边距和内边距部分可改变。
- 宽度默认是父级元素宽度的 100% (和父元素一样宽)
- 可以容纳内联元素和块级元素。
常见的块级元素包括 <div>、<p>、<h1>-<h6>、<ol>、<ul>、<li>、<menu>、<form>、<table>、<header>、<section>、<footer> 等。这些元素通常用于结构化页面内容和布局。
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
<div class="parent">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
</div>
</div>
- 文字类的元素内不能使用块级元素
- p 标签主要用于存放数字，内部不能放块级元素，尤其是 div
行内元素
行内元素（Inline Elements） 是HTML元素的一种分类。这种元素不会开始新的一行，而是和其他元素并排。行内元素不会占据整行空间，只会占据内容所需的空间。
常见的行内元素：包括<span>、<a>（链接）、<img>（图像）、<input>（输入框）、<label>（标签）等。
行内元素的特点：
- 不独占一行，一行可以显示多个
- 设置高度、宽度、行高无效
- 左右外边距有效（上下无效），内边距有效
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素，不能放块级元素
<style>
span {
width: 250px;
height: 250px;
background-color: red;
}
</style>
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
</div>
可以看到，虽然我设置了 width 和 height，但是实际展示的效果不是我们预期的结果，也就是对行内元素设置高度和宽度是没用的。
- a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做)
- a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素
改变显示模式
使用 display 属性可以修改元素的显示模式。通过这个属性可以将块级元素修改为行内元素，也可以将行内元素修改为块级元素。
- display: block 改为块级元素
- display: inline 改为行内元素
- display: inline-block 改为行内块元素
盒模型
每一个 HTML 元素就相当于是一个矩形的“盒子”。这个盒子由这几部分组成：
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
边框
基础属性：
- 边框粗细：border-width
- 边框样式：border-style，默认没有边框，solid 实现边框 dashed 虚线边框 dotted 点线边框
- 边框颜色：border-color
<style>
.aaa {
width: 150px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: red;
}
.bbb {
width: 150px;
height: 50px;
border-width: 2px;
border-style: dashed;
border-color: red;
}
.ccc {
width: 150px;
height: 50px;
border-width: 2px;
border-style: dotted;
border-color: red;
}
</style>
<div class="aaa">你好1</div>
<div class="bbb">你好2</div>
<div class="ccc">你好3</div>
这三个属性可以进行简写：border: 2px solod red，值的顺序可以任意。
还可以单独设置四个方向的边框的样式：
<style>
div {
width: 100px;
height: 50px;
border-top: 2px solid red;
border-right: 2px dashed blue;
border-bottom: 2px solid green;
border-left: 2px dotted purple
}
</style>
<div>你好</div>
可以看到，我们设置的 div 标签的宽度为 100px，高度为 50 px，但是实际的宽度和高度却大于这个值，也就是边框会撑大盒子，如果我们不想要边框撑大盒子该怎么办呢？这就得依靠 box-sizing 属性修改浏览器的行为，使得边框不再撑大盒子。
将 box-sizing 属性设置为 border-box：
* {
box-sizing: border-box;
}
内边距
通过设置 padding 的值来设置内容和边框之间的距离。默认内容都是顶着边框来放置的，我们可以设置 padding 属性的值来使得内容和边框之间留有距离。
- padding-top：内容和上边框之间的距离
- padding-right：内容和有边框之间的距离
- padding-bottom：内容和下边框之间的距离
- padding-left：内容和左边框之间的距离
设置内边距之前：
<style>
div {
width: 100px;
height: 50px;
}
</style>
设置内边框之后：
<style>
div {
width: 100px;
height: 50px;
padding-top: 20px;
padding-right: 45px;
padding-bottom: 20px;
padding-left: 45px;
}
</style>
可以看到整个盒子的大小由 100 * 50 变成了 190 * 9，说明内边距也会影响盒子的大小，要想内边距不改变盒子的大小，可以使用上面边框一样的操作，设置 box-sizing 属性的值为 border-box 就行了。
上面设置内边距的方式是每个方向的边距都设置出来，我们也可以使用复合的写法：
- padding: 5px; 表示四个方向都是 5px
- padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
- padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
- padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
外边距
外边距是用来控制盒子和盒子之间的间距的。控制外边距的属性是 margin
- margin-top：上外边距
- margin-right：右外边距
- mairgin-bottom：下外边距
- margin-left：左外边距
在没有设置外边距之前，两个盒子是紧挨着的。
然后我们设置外边距：
<style>
div {
width: 100px;
height: 50px;
margin-top: 10px;
}
</style>
外边距的方式也支持复合写法：
- margin: 10px; // 四个方向都设置
- margin: 10px 20px; // 上下为 10, 左右 20
- margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
- margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
块级元素设置水平居中
将块级元素设置为水平居中，可以通过 margin 属性来实现：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
三种写法都可以
<style>
div {
width: 100px;
height: 50px;
margin: auto;
}
</style>
这个水平居中的方式和 text-align 不一样，text-align 是让行内元素或者行内块元素居中的，这个则是设置块的水平对齐方式，对于垂直居中，不能使用上下 margin 设置为 auto 的方式来实现。
去除浏览器默认样式
浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别，为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器的默认样式，通过使用通配符就可以完成这件事：
* {
margin: 0;
padding: 0;
}
弹性布局
弹性布局（Flexible Box Layout），也称为Flex布局，是一种基于盒模型的布局方式。它通过调整容器和内部元素的尺寸、位置和显示顺序，来优化页面在不同设备和屏幕尺寸下的显示效果。
下面是没有使用弹性布局的页面：
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
</div>
<style>
div {
width: 500px;
height: 250px;
background-color: green;
}
span {
width: 100px;
height: 50px;
background-color: red;
}
</style>
可以看到，我们设置的 span 标签的宽度和宽度没有起作用这是因为对行内元素设置高度和宽度是不会起作用的，而我们的弹性布局则是将这些行内元素转换为块级元素：
flex 布局基本概念
flex 是 flexible box 的缩写，意为“弹性盒子”。任何一个 HTML 元素，都可以指定为 display: flex 完成布局。
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式。
- 被设置为 display:flex 属性的元素, 称为 flex container
- 它的所有子元素立刻称为了该容器的成员, 称为 flex item
- flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
- 当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效
弹性盒子分为两个轴，水平轴被称为“主轴”，垂直轴被称为“侧轴”。设置主轴方向上的子元素的排列方式依靠 justify-content 属性，侧轴方向上的子元素的排列方式则依靠 align-items 元素。
justify-content 属性的取值：
| 值描述 | |
|---|---|
| flex-start | 默认值，项目位于容器开头 |
| flex-end | 项目位于容器的结尾 |
| center | 项目位于容器中央 |
| space-between | 项目在行与行之间留有空隙 |
| space-around | 项目在行之前、行之间和行之后留有空间 |
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
align-items 取值：
| 值 | 描述 |
|---|---|
| stretch | 默认值，行拉伸以占据剩余空间 |
| center | 朝着弹性容器的中央对行打包 |
| flex-start | 朝着弹性容器的开头对行打包 |
| flex-end | 朝着弹性容器的结尾对行打包 |
| space-between | 行均匀分布在弹性容器中 |
| space-around | 行均匀分布在贪心容器中，两端各占一半 |
justify-content: space-around;
align-items: stretch;
justify-content: space-around;
align-items: center;
