学习视频：https://www.bilibili.com/video/BV1zN2UYoEEo/
目录
- 基本介绍
- 语法
- 引入方式
- 内联样式（行内样式）
- 内部样式
- 外部样式
- 选择器
- 四种选择器
- 全局选择器
- 元素选择器
- 类选择器
- id选择器
- 合并选择器
- 选择器的优先级
- 字体属性
- color
- font-size
- font-weight字体粗细
- font-style字体样式（可以斜体）
- font-family字体（使用某种字体）
- 背景属性
- background-color背景颜色
- background-image背景图像
- background-repeat平铺属性
- background-size背景图像大小
- background-position背景图像起始位置
- 文本属性
- text-align
- text-decoration
- text-transform
- text-indent
- 表格属性
- border
- border-collapse边框折叠
- width和height
- 表格文字对齐
- 表格填充
- 表格颜色
- 字体颜色
- 关系选择器
- 后代选择器
- 子代选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 盒子模型
- 弹性盒模型
- 弹性盒内容
- 弹性容器上的属性
- display: flex
- flex-direction
- justify-content
- align-items
- 弹性子元素上的属性
- flex-grow（也可写作flex）
- 文档流
- 文档流产生的问题
- 元素空隙问题：如果想让img之间没有空隙，必须紧密连接。
- 高矮不齐，底边对齐
- 空格折叠
- 元素无空隙
- 脱离文档流
基本介绍
CSS：Cascading Style Sheet，层叠样式表，级联样式表，样式表。
语法
h1{color: blue;font-size: 12px;
}
- h1是选择器，通常表示被设置样式的html元素。
- 下面两行是两条声明（两条样式）
- color是样式中的属性（样式属性），blue是样式中的值。
引入方式
内联样式（行内样式）
<h3 style="color:red; font-size: 14px;">Hello</h3>
样式写在style属性中。
内部样式
添加style标签，在标签内写样式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3{color:blue;font-size: 12px;}</style>
</head>
<body><h3>Hello</h3>
</body>
</html>
这样，方便在同一个页面内复用样式。
外部样式
创建一个style.css文件，并引入<link rel="stylesheet" href="./style.css">。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css">
</head>
<body><h3>Hello</h3>
</body>
</html>
style.css文件：
h3{color: blue;font-size: 12px;
}
这样，方便不同文件之间复用样式。
选择器
四种选择器
全局选择器
可以和任何元素匹配，优先级最低，一般做样式初始化：
*{margin: 0;padding: 0;
}
元素选择器
直接用元素名称作为选择器，描述某一类元素的共性，无法描述个性。如p、div、span等元素。
p{color: blue;font-size: 12px;
}
类选择器
- 添加一个类
<p class="content-p">Hi, I'm Dad</p>
.content-p{color: green;
}
.后面跟着类名，类名可以由：字母/数字/横杠- 组成，但不能以数字开头。
- 添加多个类
多个类的话，中间空格隔开。
<p class="content-p content">Hi, I'm Dad</p>
.content-p{color: green;
}
.content{font-weight: 200;
}
id选择器
id只能使用一次（不应为多个元素添加同一个id），id应该是唯一标识符，id开头不能是数字。
<p id="dad">Hi, I'm Dad</p>
#dad{color: green;
}
合并选择器
多个单独的选择器之间逗号隔开，则同时为这些选择器设置共同的样式。
例如下面为id为dad的元素和span元素设置相同的样式：
#dad, span{color: green;
}
还可以组合别的选择器。
选择器的优先级
权重：
- 元素选择器：1
- 类选择器：10
- id选择器：100
- 行内样式：1000
同级别的重复样式，从代码顺序上，后面的会覆盖前面的。
例如下面ppp类的样式重复声明了，会取后面得，即color为yellow。
.ppp{color: blue;
}.ppp{color: yellow;
}
字体属性
CSS的字体属性，可以定义字体、颜色、大小、加粗、文字样式等。
color
规定文本颜色。
有四种方式：
.ppp{/* 文字方式 */ color: blue;/* 十六进制方式 */color: #0000ff;/* 取值范围0-255 */color: rgb(0,0,255);/* a表示透明度，0完全透明，1完全不透明 */color: rgba(0,0,255, 0.2);
}
font-size
字体大小
.ppp{font-size:8px;
}
font-weight字体粗细
设置文本粗细。
几种值：
- bold 粗体
- bolder 比粗体更粗
- lighter 更细
- 100-900 由细到粗。默认=400，bold=700
font-style字体样式（可以斜体）
几种值：
- normal 默认值
- italic 斜体
font-family字体（使用某种字体）
例如使用宋体：
.ppp{ font-family: '宋体';
}
宋体（也可以使用对应的英文Simsun）、微软雅黑。
可以指定多个字体font-family: "宋体", "微软雅黑";，按顺序找到能用的字体并使用，如果都没有则使用默认字体。
如果字体名称包含空格，则必须加上引号。
背景属性
background-color背景颜色
例如为一个div设置背景颜色：
div{width: 300px;height: 200px;background-color: #ff0000;
}
background-image背景图像
background-image: url("1.png");
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 900px;height: 700px;background-image: url("1.png");}</style>
</head>
<body><div></div>
</body>
</html>
图像平铺效果：
如果div改得小一点：
div{width: 300px;height: 300px;background-image: url("1.png");}
可见，是从左上角开始平铺的。div小的话，能铺多少是多少；div大的话，铺完一个再铺一个。
background-repeat平铺属性
设置如何平铺背景图像。
四种值：
- repeat，默认值，两个方向都平铺
- repeat-x，只有水平方向平铺
- repeat-y，只有垂直方向平铺
- no-repeat，不平铺
background-size背景图像大小
设置背景图像的大小。
四种值：
- 长宽数字值。第一个宽度值，第二个高度值（如果不赋值，则auto）。
- 长宽百分比。第一个宽度，第二个高度。第二个值不赋值，则auto。
- cover。保持纵横比，并将图片缩放到覆盖背景区域的最小大小。
- contain。保持纵横比，并将图片缩放到覆盖背景区域的最大大小。
background-position背景图像起始位置
设置背景图像起始位置，默认是0% 0%
可以left top左上角，也可以center center中间。
文本属性
text-align
指定元素文本的水平对齐方式
- left
- right
- center
<style>div{border: 1px solid;text-align:center;}</style>
</head>
<body><div>Hi</div>
</body>
text-decoration
规定添加到文本的修饰，可以添加下划线、上划线、删除线等。
值：
- underline 下划线
- overline 上划线
- line-through 删除线
text-transform
控制文本大小写。
- captialize 每个单词开头大写
- uppercase 全部大写
- lowercase 全部小写
text-indent
首行文本缩进。
text-indent: 50px;
如果为负值，则向左缩进。
表格属性
在vscode中快捷键table>tr*3>td*4{单元格}生成一个3行4列的表格。
border
table{border: 1px solid red;}
table,td{border: 1px solid red;}
border-collapse边框折叠
table{ border-collapse: collapse;}
将双边框变成单边框。只对table有效（去掉了table最外面的边框），td没有这个属性。
width和height
设置表格宽高。
table,td{border: 1px solid red;border-collapse: collapse;}table{width: 600px;height: 400px;}
表格文字对齐
水平对齐方式：text-align
垂直对齐方式：vertical-align
td{text-align: center;vertical-align: bottom;}
表格填充
为td设置padding，留出空白，就不用设置表格宽高了。
表格颜色
边框颜色（见前面border）、背景颜色（为td设置background-color）。
字体颜色
为td设置color属性。
关系选择器
后代选择器
语法是两个选择器中间用空格A B{}。
以下方代码为例，ul所包含的里面，不管嵌套了多少层，其中的li元素的文本颜色都是red。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li{color:red;}</style>
</head>
<body><ul><li>A1</li><li>B2</li><li>C3</li><div><ol><li>X1</li><li>Y2</li><li>Z3</li></ol></div></ul>
</body>
</html>
子代选择器
只有包含的第一层的子元素（直接子元素）才会生效，语法是A>B{}。
可以把上面的样式改为：
<style>ul>li{color:red;}</style>
那么，div里面的li元素的文本颜色样式不再生效。
也可以修改选择器为：
ul > div > ol > li{color:red;}
使得只有div里面的li元素的文本颜色样式生效。
相邻兄弟选择器
只有满足条件的后一个兄弟元素才会生效。语法是A+B{}。
例如，先给A1加个类，以A1为基准，让B2颜色改变：
<head><style>.first+li {color: red;}</style>
</head><body><ul><li class="first">A1</li><li>B2</li><li>C3</li><div><ol><li>X1</li><li>Y2</li><li>Z3</li></ol></div></ul>
</body>
加号（+）有点像在当前选择器基础上，往后再考虑、再匹配一个选择器。
通用兄弟选择器
满足条件的后面的（后面中间隔一个也可以接受，也会生效）所有的兄弟元素，都会生效样式。语法是：A~B{}。
<head><style>.first~li {color: red;}</style>
</head><body><ul><li class="first">A1</li><li>B2</li><li>C3</li><p>D4</p><li>E5</li><div><ol><li>X1</li><li>Y2</li><li>Z3</li></ol></div></ul>
</body>
盒子模型
box model，包含内容：
- 外边距margin
- 边框border
- 内边距padding
- 实际内容content
示例：
<head> <style>div {width: 100px;height: 100px;background-color: antiquewhite;padding: 20px 50px;border: 5px solid greenyellow;margin: 20px 40px;}</style>
</head>
<body><div>Hello China! I'm Ken.</div><p>我是段落p</p>
</body>
可以看到padding的范围也被填入了背景颜色。
弹性盒模型
flex box
是css3中一种新的布局模式。
当页面需要适应不同屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。
提供一种更加有效的方式，对一个容器内的子元素进行排列、对齐和分配空白空间。
弹性盒内容
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成，
通过设置display属性值为flex，将其定义为弹性容器，
弹性容器内包含了一个或多个弹性子元素。
弹性容器外和弹性子元素内是正常渲染的，弹性盒子只是定义弹性子元素在弹性容器内如何布局。
弹性容器上的属性
display: flex
在使用弹性盒之前的示例：
<!DOCTYPE html>
<html lang="en">
<head><style>.flex-container{width: 500px;height: 500px;background-color: #eee;}.flex-container>div{width: 100px;height: 100px;}.box1{background-color: red;}.box2{background-color: green;}.box3{background-color: blue;}</style>
</head>
<body><div class="flex-container"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>
</html>
由于div是块级元素，所以占一行，是按列排布的，其效果图：
为了使用弹性盒，首先需要在弹性容器的样式中增加一条：
.flex-container{display: flex;}
默认弹性盒里面内容横向摆放，所以效果图：
flex-direction
也可以修改默认方向：
- row，默认值，水平从左到右
- row-reverse，水平从右到左
- column，从上到下
- column-reverse，从下到上
使用row-reverse的效果图（靠右对齐了）：
justify-content
内容对齐（沿着flex方向），有三个值：
- flex-start，默认值，左对齐
- flex-end，右对齐
- center，中间对齐
flex-end效果图：
center效果图：
align-items
如果flex-direction是row或row-reverse，属于水平方向排列，那么justify-content就是水平方向上的对齐；否则就是垂直方向上的对齐。
而align-items是与flex-direction垂直方向上的对齐，也是三个值，与justify-content的三个值相同。
要让内容弹性子元素水平/垂直都居中，只需要这么设置：
.flex-container{display: flex;justify-content: center;align-items: center;}
弹性子元素上的属性
flex-grow（也可写作flex）
根据弹性盒子元素所设置的扩展因子作为比率，来分配剩余空间。
默认为0，即存在剩余空间，也不放大。
以横向为例，按比例2:2:1分配宽度：
<style>.flex-container{width: 500px;height: 500px;background-color: #eee;display: flex;}.flex-container>div{height: 100px;width: 100px;}.box1{background-color: red;flex: 2;}.box2{background-color: green;flex: 2;}.box3{background-color: blue;flex: 1;}</style>
</head>
<body><div class="flex-container"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
flex属性的优先级更高，此时width属性就不起作用了。
可以去掉box1的flex属性，则对于box1使用绝对宽度100px，对于box2和box3则按照2:1分配剩余的400px。
文档流
文档流是文档中可显示元素在排列时所占用的位置/空间。
块级元素，自上而下摆放；内联元素，从左到右摆放。
文档流产生的问题
标准流里面的限制非常多，导致很多页面效果无法实现：
高矮不齐，底边对齐
<body><span>右边是一个女孩</span><img src="girl.png" style="width: 200px;"/>
</body>
空格折叠
<body><span>右边是一个女孩</span><img src="girl.png" style="width: 200px;"/><p>我是一个 p标签</p>
</body>
文本中写了很多空格，但页面上只显示一个空格。
元素无空隙
两个img分两行写：
<body><img src="girl.png" style="width: 200px;"/><img src="girl.png" style="width: 200px;"/>
</body>
则会多一个间隙空白：
如果两个img写到一行中（中间没有空格），则两个图片之间没有空隙：
<body><img src="girl.png" style="width: 200px;"/> <img src="girl.png" style="width: 200px;"/>
</body>
脱离文档流
为了解决文档流的问题，采用方法：脱离文档流（脱离标准流，不使用默认的摆放方式）。
脱离文档流的方式：
- 浮动
- 绝对定位
- 固定定位
