保姆级教程 CSS 知识点梳理大全，超详细！！！
✴️大家好,我是王同学，好久不见，趁着假期王同学把CSS 知识点梳理了一遍
✴️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了
✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧
一、前端三层
二、CSS的书写位置
(一)、内嵌式
- 内嵌式，顾名思义，内嵌在.html文件中
- 在
<head></head>标签中，书写<style></style>标签对，里面书写CSS语句。
(二)、外链式
-
可以将CSS单独存为.css文件，然后用link标签引入它
-
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件
(三)、 导入式
导入式是最不常见的样式表导入方法,使用导入式引入文件，不会等待CSS文件加载完毕，而是会立即渲染HTML结构
(四)、行内式
行内式： 样式可以直接通过style属性写在标签上，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。
三、CSS选择器
首先我们来介绍传统的CSS2.1 选择器
（一）、标签选择器
标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
标签选择器的覆盖面非常大，所以通常用于标签的初始化
（二）、id选择器
- 标签可以有id属性，它是这个标签的唯一标识
- id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
- 同一个页面上不能有相同的id标签
- CSS选择器可以使用#井号选择指定的id标签
（三）、类选择器
- class属性表示类名
- 类名的命名规范和id的命名规范相同
- 我们使用点.前缀来指定class的标签
- class类名十分灵活，多个标签可以为相同的类名
- 同一个标签可以同时属于多个类，类名用空格隔开
在开发中我们也用到过原子类，这里简单的介绍一下
（四）、原子类
-
在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
-
在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式
<style>
.fs18 {
font-size: 18px;
}
.fs20 {
font-size: 20px;
}
.fs22 {
font-size: 22px;
}
.fs24 {
font-size: 24px;
}
.fs26 {
font-size: 26px;
}
.color-blue {
color: blue;
}
.color-red {
color: red;
}
.color-orange {
color: orange;
}
.color-pink {
color: pink;
}
.color-purple {
color: purple;
}
</style>
</head>
<body>
<p class="fs18 color-blue">好好学习 天天向上</p>
<p class="fs20 color-red">好好学习 天天向上</p>
<p class="fs22 color-orange">好好学习 天天向上</p>
<p class="fs24 color-pink">好好学习 天天向上</p>
<p class="fs26 color-purple">好好学习 天天向上</p>
</body>
（五）、复合选择器
后代选择器
交集选择器
并集选择器
并集选择器也叫做分组选择器，逗号表示分组
（六）、伪类选择器
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态
a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题
<style>
a:link {
color: rgb(255, 0, 242);
}
a:visited {
color: red;
}
a:hover {
color: pink;
}
a:active {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<p>
<a href=""> 百度</a>
</p>
<p>
<a href=" "> 京东</a>
</p>
<p>
<a href=""> 淘宝</a>
</p>
<p>
<a href=""> 慕课</a>
</p>
</body>
（七）、元素关系选择器
（七）、子选择器
当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
（八）、相邻兄弟选择器
- 相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
- 说白了，a+b就是选择紧跟在a后面的一个b
(九）、通用兄弟选择器（~）
通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素
（十）、序号选择器
（十一）、：first-child
first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p
(十二)、：last-child
：last-child表示选择最后一个子元素，比如下面的例子
（十二）、： nth-child()
： nth-child()可以选择任意序号的子元素
：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个
<style>
.box p:first-child {
color: red;
}
.box p:last-child {
color: aqua;
}
.box p:nth-child(3) {
color: orange;
}
.box p:nth-child(2n) {
color: pink;
}
.box1 p:nth-child(2n+1) {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
（十三）、序号选择器的兼容性
（十四）、属性选择器
<!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>Document</title>
<style>
/*
[alt] 有这个属性
[alt ="背景故宫"] 精准匹配
[alt ^="abc"] 开头位置匹配
[alt $="abc"] 结尾位置匹配
[alt *="abc"] 任意位置匹配
[alt |="abc"] abc-开头
[alt ~="abc"] abc为空格分开的独立部分
*/
img {
width: 300px;
}
img[alt^="北京"] {
border: 5px solid purple;
}
img[alt$="夜景"] {
border: 5px solid rgb(236, 184, 12);
}
img[alt*="美"] {
border: 5px solid rgb(52, 5, 138);
}
img[alt |="参赛作品"] {
border: 5px solid rgb(224, 228, 9);
}
img[alt~="手机拍摄"] {
border: 5px solid pink;
}
</style>
</head>
<body>
<img src="images/bj/" alt="北京故宫">
<img src="images/bj/" alt="北京鸟巢">
<img src="images/bj/" alt="北京十七孔桥">
<img src="images/wx/" alt="参赛作品-无锡体育场">
<img src="images/wx/" alt="手机拍摄 无锡太湖">
<img src="images/wx/" alt="无锡美景">
<img src="images/wx/" alt="无锡夜景">
</body>
</html>
（十五）、CSS3新增伪类
（十六）、伪元素
CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号
：：before
：：after
（十七）、：：selection
（十八）、：：first-letter和：：first-line
三、层叠性和选择器权重的计算
- CSS全名叫做“层叠样式表”，层叠性是他很重要的性质
- 层叠性：多个选择器可以同时作用于同一个标签，效果叠加
如果多个选择器的定义有冲突呢？CSS有严密的处理规则
复杂选择器的计算
复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重
四、文本与字体属性
（一）、常用的文本字体属性
-
color属性可以设置文本内容的前景色
-
color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法
-
用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。
（二）、十六进制表示法
十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制
（三）、rgb() 表示法
（四）、rgba()表示法
颜色可以使用rgba（） 表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心
（五）、font-size属性
font-size属性用来设置字号，单位为px 后面还会说到em和rem
网页文字正文字号通常是16px浏览器最小支持10px
（六）、font-weight属性
- font-weight属性设置字体的粗细程度，通常就用normal和bold两个值
（七）、font-style属性
作用：设置文字的倾斜
（八）、text-decoration属性
text-decoration属性用于设置文本的修饰外观的（下划线，删除线）
（九）、font-family属性
- font-family属性用于设置字体的属性
- 字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体
- 字体名称中有空格，必须要用引号来包裹
font-family：" 微软雅黑";
font-family: serif,"Times New Roman","微软雅黑";
中文字体也可以称呼他们的名字
字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少
问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体
定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体
（十）、阿里巴巴普惠体
阿里巴巴提供了一套免费商用授权的普惠字体，网址 /webfont#!/webfont/index
使用阿里巴巴普惠字体也省去了下载的麻烦
使用步骤：
下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式
第一步：下载字体
第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）
第三步：定义使用 webfont 的样式
第四步：为文字加上对应的样式
（十一）、text-indent属性
（十二）、 line-height行高
- line-height属性的单位可以是px为单位的数值
line-height：30px;
- line-height属性的单位可以是 没有单位是数值，表示字号的倍数，这是最推荐的写法
line-height：1.5;
- line-height属性也可以是百分数，表示字号的倍数
line-height：150%;
（十三）、单行文本垂直居中
行高等于盒子的高度，设置单行文本垂直居中对齐
设置text-align：center，即可实现文本水平居中
（十四）、font合写属性
（十五）、继承性
- 文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。
- 因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。
（十五）、继承性的就近原则
在继承的情况下，选择器权重计算失效，就近原则
五、盒子模型
（一）、什么是盒子模型
所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型
（二）、width属性
-
width属性表示盒子内容的宽度
-
width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
-
当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承
（三）、height属性
-
height属性表示盒子内容的高度
-
height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
-
盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0
（四）、padding属性详解
-
padding属性是盒子的内边距，即盒子边框内壁到文字的距离
-
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding
-
padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding
-
padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding
（五）、margin属性详解
margin是盒子的外边距，即盒子与其他盒子的距离
margin的塌陷问题
竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准
（六）、一些元素有默认的margin
一些元素（比如body、ul、p等)都有默认的margin，在开始制作网页的时候，要将他们清除
（七）、盒子的水平居中
将盒子的左右两边的margin都设置为0，盒子将水平居中
文本居中是text-align：center; 和盒子水平居中是两个概念
盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说
（八）、盒模型的计算
（九）、box-sizing属性
给盒子添加了box-sizing：border-box属性之后，盒子的width、height数字就表示盒子实际占有的宽高（不包含margin）了，即padding、border变为内缩，不再外扩。
box-sizing属性大量用于移动网页的制作中，因为它结合百分比布局，弹性布局等非常好用，在PC页面中使用较少。
（十）、行内元素和块级元素
（十一）、行内块
img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能够并排显示
（十二）、行内元素和块级元素的相互转换
-
使用display：block；可以将元素转换为块级元素
-
使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见
-
使用display：inline-block；可以将元素转换为行内块元素
（十三）、元素的隐藏
-
使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
-
使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置
六、浮动与定位
（一）、浮动
- 浮动的本质：用来实现并排的效果
- 浮动使用的要点：要浮动，并排的盒子都实现浮动
- 父盒子要有足够的宽度，否则子盒子会掉下去
（二）、浮动的顺序贴靠特性
子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素
如下图所示：3号盒子会掉到2号盒子的下面
（三）、浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签
（四）、右浮动
（五）、使用浮动的注意事项
-
垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动
-
“大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动
-
div是免费的，不要节约盒子
（六）、BFC规范
BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
观察下面的例子
出现以上问题的原因
-
一个盒子不设置height，当内容子元素都浮动时，无法撑起自身
-
这个盒子没有形成BFC
解决办法
（七）、如何创建BFC？
（七）、清除浮动
清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响
举例说明
来猜一下页面中会出现什么样的效果？
大家应该都会说两行两列？然而没有清除浮动就成行显示了！出现以下这种情况是没有清除浮动
清除浮动的方法一：
清除浮动的方法二：
使用方法二的副作用：margin会失效
清除浮动的方法三：
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: '';
clear: both;
display: block;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="clearfix">
<p></p>
<p></p>
</div>
<div class="clearfix">
<p></p>
<p></p>
</div>
清除浮动的方法四：
（八）、相对定位
相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位
位置词描述：值可以是负数，即往规定方向相反移动
相对定位的性质：相对定位的元素，会在老家留坑，本质上任然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面元素产生任何影响。
（九）、相对定位的用途
-
相对定位用来微调元素位置
-
相对定位的元素，可以当做绝对定位的参考盒子
（十）、绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置
绝对定位的位置描述词
绝对定位的元素脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
绝对定位的参考盒子
-
绝对定位的盒子并不是永远以浏览器作为基点
-
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
堆叠顺序 z-index属性
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
（十一）、绝对定位脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖
脱离标准文档流的方法：浮动、绝对定位、固定
定位
（十二）、绝对定位的用途
- 绝对定位用来制作压盖、遮罩的效果
- 绝对定位用来结合CSS精灵使用
- 绝对定位可以结合JS实现动画
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.carousel {
position: relative;
width: 650px;
height: 360px;
border: 1px solid #000;
margin: 40px auto;
}
.carousel .btn {
position: absolute;
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
border-radius: 50%;
text-align: center;
line-height: 40px;
background-color: rgba(255, 255, 255, .5);
/* 鼠标变为小手状态 */
cursor: pointer;
font-size: 26px;
font-family: consolas;
}
.carousel .btn:hover {
background-color: gold;
color: #fff;
}
.carousel .leftbtn {
left: 10px;
}
.carousel .rightbtn {
right: 10px;
}
.carousel ol {
position: absolute;
width: 120px;
height: 20px;
right: 20px;
bottom: 20px;
list-style: none;
}
.carousel ol li {
float: left;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, .5);
border-radius: 50%;
margin-right: 10px;
}
.carousel ol {
background-color: gold;
}
</style>
</head>
<body>
<div class="carousel">
<img src="images/bj/" alt="">
<a class="leftbtn btn"> <</a>
<a class="rightbtn btn">></a>
<ol>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
（十一）、固定定位
固定定位：不管页面如何滚动、他都永远固定在那里
固定定位脱离标准文档流
固定定位的用途：“返回顶部”、“楼层导航”
<!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>Document</title>
<style>
.box {
position: fixed;
width: 100px;
height: 100px;
right: 0;
bottom: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
<p> <img src="images/bj/" alt=""></p>
</body>
</html>
（七）、边框与圆角
（一）、border属性的三要素
（二）、线型
<!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>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
border: 3px solid #000;
}
.box2 {
width: 200px;
height: 200px;
border: 3px dotted #000;
margin: 20px 0;
}
.box3 {
width: 200px;
height: 200px;
border: 3px dashed #000;
}
</style
</style>
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
（三）、边框的三要素小属性
（四）、四个方向的边框
（五）、四个方向边框的三要素小属性
（六）、去掉边框
border-left：none；属性可以去掉左边框，以此类推
（七）、利用边框制作三角形
（八）、圆角
border-radius属性的值通常为px单位，表示圆角的半径
border-radius:10px
单独设置四个圆角
圆角也可以用百分比为单位
border-radius属性的值也可以用百分比为单位，表示圆角起始于每条边的哪里
（九）、盒子阴影—box-shadow属性
阴影延展
内阴影
多阴影
box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;
（十）、 过渡
transition过渡属性是CSS3浓妆重彩的特性，过渡可以为一个元素在不同样式之间变化添加自动补间动画
哪些属性可以参与过渡
-
背景颜色和文字颜色都可以被过渡
-
所有变形（包括2D和3D）都能被过渡
-
所有数值类型的属性，都可以参与过渡，比如width，height，left，top，border-radius
过渡的四个小属性
缓动参数
transition的第三个属性就是缓动参数，也就是变化速度曲线
（十一）、贝塞尔曲线
官网： /
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
overflow: hidden;
margin: 40px auto;
}
.box ul {
list-style: none;
}
.box ul li {
position: relative;
width: 380px;
height: 210px;
margin-right: 20px;
float: left;
}
img {
width: 380px;
height: 210px;
}
.box ul li .info {
position: absolute;
width: 370px;
height: 30px;
color: #fff;
line-height: 30px;
padding-left: 10px;
background-color: rgba(0, 0, 0, .5);
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.5s linear;
}
.box ul li .info:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/bj/" alt="">
<div class="info">北京的故宫</div>
</li>
<li><img src="images/bj/" alt="">
<div class="info">十七孔桥</div>
</li>
<li><img src="images/bj/" alt="">
<div class="info">国家大剧院</div>
</li>
</ul>
</div>
</body>
</html>
（十二）、背景固定— background-attachment
background-attachment属性决定着背景图像的位置是在视口内固定，还是随着包含它的区块滚动
（十二）— background-position属性
background-position属性可以设置背景图片出现在盒子的什么位置
可以用top、bottom、center、left、right描述图片出现的位置
（十三）、CSS精灵
CSS精灵：将多个小图标合并到一张图片上，使用background-position属性单独显示其中的一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图
CSS精灵可以减少HTTP的请求数量，加快网页的显示速度，缺点也很明显：不方便测量，后期改动麻烦
（十四）、background综合属性
（十五）、背景裁切
background-clip属性用来设置元素的背景裁切到哪个盒子
（十六）、线性渐变
渐变的方向可以写成度数的形式
线性渐变可以有多个颜色值，并且可以使用百分数定义他们出现的位置
（十七）、浏览器私有前缀
不同的浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识
（十八）、径向渐变
（十九）、2D变形
旋转变形
（二十）、transform-origin属性
（二十一）、缩放变形
（二十二）、斜切变形
（二十三）、位移变形
（二十四）、3D旋转
perspective属性
perspective属性用来定义透视的强度，可以理解为人眼到舞台的距离，单位是px
（二十五）、空间移动
（二十六）、动画的定义
可以使用 @keyframes来定义动画， keyframes表示关键帧，在项目上线之前，要补上@-webkit-这样的私有前缀
动画的调用
定义动画之后，就可以使用animation属性调用动画
第五个参数就是动画的执行次数，如果想永远执行可以写infinite
（二十七）、多关键帧动画
