**本篇文章食用的简单说明**
本篇文章为复习CSS与CSS3进行了知识点梳理，其中标题十部分在文章《HTML与HTML5知识点复习整理》中已经包括（有标注），加粗部分为重点！！！加粗加红为重重点！！！
由于CSS涉及过多，本篇文章只是大概部分，一些技巧和移动端知识在后续过程中会继续更新，欢迎小伙伴在评论区补充~
推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在左下方目录处点击相应部分可以进行跳转。
又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤
***记忆梳理***
一、CSS是什么，用来做什么
二、CSS引入方式
三、CSS基础选择器
- 包括几种，它们的作用
- 区别
四、CSS复合选择器
- 包括几种，它们的作用
五、CSS新增选择器
- 包括几种，它们的作用
- 选择器权重
- 三大特性
六、字体属性
- 字体
- 字号
- 字体粗细
- 字体样式
- 字体连写
七、文本属性
- 文本颜色
- 文本对齐
- 文本缩进
- 文本修饰
- 行高:单行文字垂直居中的代码*
八、背景属性
- 背景颜色
- 背景图像
- 背景平铺
- 背景图片位置
- 背景附着
- 背景色半透明
- 背景复合写法
九、注释
十、HTML元素分类与元素转换/CSS元素显示模式（《HTML与HTML5知识点复习整理》中已经包括）
- 元素分类
- 元素转换
十一、网页布局
- 盒子模型
- 外边距应用、块级行内行内块的居中方式
- 标准流
- 浮动
- 定位
十一、CSS3新特性
- 图片模糊
- 函数自动计算
- 过渡
十二、元素的显示与隐藏
- 包括几种，它们的作用，区别
一、CSS指层叠样式表(Cascading Style Sheets)，美化HTML，解决布局问题。解释：以多种方式规定样式信息，样式表定义如何显示 HTML 元素。
二、CSS引入方式---"多种方式"
2.1 外部方式
优先级：<link /> > @import
(1)链接<link />：一边加载数据，一边优化，视觉效果好。
<head><!-- link只能在head部分，可以引入多个css -->
<link type="text/css" rel="styleSheet" href="css文件路径" />
</head>
(2)导入：@import：先加载数据，再加载样式，可能造成数据先显示，样式还在加载。
<style type="text/css"><!-- @import必须在style部分 -->
@import url("css文件路径");
</style>
2.2 内部方式<style>
<head>
<style type="text/css">
div { /* css整体放在head部分*/
width:200px;
height:100px;
bacground-color:pink;
}
</style>
</head>
2.3 行内方式/内联方式:直接在HTML元素内使用style，优先级最大，不推荐
<h1 style="color:red;">我是h1标题，还记得我吗QAQ</h1>
优先级：行内样式>外部样式=内部样式（后两者“就近原则”，以最后出现的为准）
三、CSS基础选择器
3.1 标签选择器：用 HTML 标签名称作为选择器，选出所有相同的标签，权重为1
3.2 class类选择器:可以选出1个或多个标签，权重为10
<style>
.box { /* .class {属性1...} */
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<div class="box">我是一个盒子</div><!-- class="类名" 类名的第一个字符不能使用数字 -->
多类名:多个类名中间必须用空格分开,这个标签就可以分别具有这些类名的样式,较多使用
<div class="类名1 类名2">我是一个盒子</div>
3.3 id选择器:一次只能选择一个标签，id 属性在每个 HTML 文档中只能出现一次
<style>
#box { /* .id {属性1...} */
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<div id="box">我是一个盒子</div><!-- id="类名" -->
3.4 * 通配符选择器：选择所有标签
<style>
* { /* * {属性1...} */
margin:0'
padding:0; /* 常用来清除内外边距 */
}
</style>
3.5 类选择器与id选择器的区别
类选择器一个标签可以起多个名字，一个名字可以多个标签使用，修改样式中使用多。
id选择器唯一不得重复，经常与JavaScript搭配使用。
四、CSS复合选择器
4.1 派生选择器：根据上下文关系来确定某个标签的样式
(1)后代选择器：元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
<style>
strong { /* 被h2 strong覆盖*/
color: blue;
}
h2 {
color: #000;
}
h2 strong { /* 元素1 元素2 { 样式声明 } 元素1 和 元素2 中间用空格隔开*/
color: pink;
}
</style>
<h2>我是一个正常的h2标题</h2>
<h2>我是一个<strong>粉色的h2标题</strong></h2>
(2)>子元素选择器：选择它下一级全部的亲儿子,元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
<style>
h1 > strong {color:pink;}
</style>
<h1>我是 <strong>h1</strong> <strong>标签！</strong> 变为粉色</h1>
<h1>我是 <em>h1 <strong>标签！</strong></em> 不变色</h1>
(3)+相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素。
4.2 , 并集选择器:选择某些相同样式的元素，集体声明
4.3 : 伪类选择器
4.3.1 链接伪类选择器:请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active
4.3.2 :focus 伪类选择器:用于选取获得焦点(光标)的表单元素
五、CSS3新增选择器
5.1 属性选择器：根据元素特定属性选择元素，权重为10
E[att]：选择具有att属性的E元素
E[att = "val"]：选择具有att属性且值等于val的E元素
E[att^ = "val"]：选择具有att属性且值等于val开头的E元素
E[att$ = "val"]：选择具有att属性且值等于val结尾的E元素
E[att* = "val"]：选择具有att属性且值中含有等于val的E元素
5.2 结构伪类选择器：根据文档结构来选择元素，权重为10
E:first-child 匹配父元素第一个子元素E
E:last-child 匹配父元素最后一个子元素E
E:nth-child(n) 匹配父元素第n个子元素E
E:first-of-type(n) 指定类型E的第一个元素
E:last-of-type(n) 指定类型E的最后个元素
E:nth-of-type(n) 指定类型E的第n个元素
5.2.1 E:nth-child(n) 匹配父元素第n个子元素E
（1）n可以是数字，关键字和公式
（2）n里面数字从1开始
（3）关键字：even偶数，odd奇数
（4）常见公式：从0开始，但是第0个元素或超出个数会忽略
2n 偶数，2n+1 奇数，5n 5的倍数，n+5 从第五个（包含第5个）到最后，-n+5 前五个（包含第5个）...
5.3 nth-child和nth-of-type区别
nth-child对父元素里面所有孩子排序选择（序号固定），先找到第n个孩子，查看是否匹配
nth-of-type对父元素里面指定子元素排序选择，先匹配，后找第n个孩子
5.4 ::伪元素选择器：新创建的元素在文档树中找不到，称为伪元素
5.4.1 ::before和::after：创建一个元素，但属于行内元素，必须有content属性，权重为1
::before在元素内部的前面插入内容，但属于行内元素
::after在元素内部的后面插入内容，但属于行内元素
5.4.1 清除浮动的方法
（1）额外标签法/隔墙法：在最后一个浮动的子元素后面添加一个额外/空标签。
（2）父级添加overflow属性：overflow:hidden/auto/scroll.但无法显示溢出部分。
**伪元素清除浮动算是第一种额外标签法的一个升级和优化**
（3）父级添加after属性
.clearfix:after {
content:""; /* 伪元素必须写的属性*/
display:block; /* 插入的元素必须是块级*/
height:0; /* 不要看见这个元素*/
clear:both; /* 核心代码清除浮动*/
visibility:hidden; /* 不要看见这个元素*/
}
（4）父级添加双伪元素
.clearfix:before,.clearfix:after {
content:""; /* 伪元素必须写的属性*/
display:table; /* 转换为块级元素并且一行显示*/
}
.clearfix:after {
clear:both; /* 核心代码清除浮动*/
}
5.5 *选择器权重*---三大特性1.优先级：同一个元素指定多个选择器产生优先级；选择器相同，则执行层叠性，选择器不同，则根据选择器权重执行。
*选择器权重*
继承或*通配符 0,0,0,0
标签/元素选择器 0,0,0,1
类,属性,伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 无穷大
**权重叠加**：如果是复合选择器，则会权重叠加，需计算权重
div ul li 0,0,0,3
.nav ul li 0,0,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1
注意：权重是4组数字组成，但不会进位
通配符*和继承权重0;标签/元素选择器1;类，伪类选择器10;id选择器100;行内样式表1000;！important无穷大
继承权重0，如果元素未直接选中，不管父元素权重多高，子元素权重都为0
5.6 三大特性2.继承性：子标签继承父标签的某些样式（以text-,font-,line- 开头，color）
5.7 三大特性3.层叠性：相同选择器设置相同样式会覆盖/层叠 样式冲突：后来者居上
六、字体属性
6.1 font-family字体
p {font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}
6.2 font-size字号/字体大小：12px 16px(谷歌默认) 18px
6.3 font-weight字体粗细：normal默认值不加粗--400；bold加粗--700；100-900 数值不跟单位。
6.4 font-style字体样式：normal默认值；italic斜体。
6.5 字体连写/字体复合(简写)属性:不能更换顺序；取默认值属性可以省略，但必须保留 font-size 和 font-family 属性
body {
font: font-style font-weight font-size/line-height font-family;
}
七、文本属性
7.1 color文本颜色：常用十六进制#FF0000;预定义颜色red;RGB代码rgb(255,0,0或100%,0%,0%)
7.2 text-align文本对齐:设置文字水平对齐
7.3 text-indent文本缩进：段落首行缩进2字符，text-indent:2em;
7.4 text-decoration文本修饰 none默认取消；underline下划线；overline上划线；line-trough删除线
7.5 line-height行高：行与行之间的距离
**单行文字垂直居中的代码**
解决方案: 文字的行高=盒子的高度 /* 文字在当前盒子内垂直居中*/
简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下
八、背景属性
8.1 background-color 背景颜色：默认值transparent（透明）
8.2 background-image 背景图像：url路径；none无背景图
8.3 background-repeat背景平铺：repeat默认纵向横向平铺；no-repeat不平铺；repeat-x/y 横/纵
8.4 background-position背景图片位置
（1）参数方位名词position：top|center|bottom|left|center|right
两个值无顺序 left top;top left一样
一个值，则第二个值默认居中对齐
（2）参数精确单位length:百分数%|浮动数和单位组成长度值
第一个x坐标，第二个y坐标
一个值就是x坐标，y默认垂直居中
（3）参数混合单位
第一个x坐标，第二个y坐标
8.5 background-attachment背景附着：scroll背景滚动；fixed背景固定
8.6 background: rgba(0, 0, 0, 0.3);背景色半透明（CSS3新增属性：最后一个参数是alpha透明度，取值范围0-1之间，0.x的0可以省略
8.7 背景复合写法：没有特定的书写顺序,一般习惯约定顺序
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background:transparent url(image.jpg) repeat-y fixed top;
九、注释：/* 注释 */
十、HTML元素分类与元素转换/CSS元素显示模式
10.1 元素分类
（1）block块级元素：独占一行（一行只能放一个块级元素），可以设置宽度、高度以及边距等样式属性,宽度默认是容器（父级宽度）的100%。
常见的块级元素有：<div>、<h1>-<h6>、<p>、<ul>、<ol>、<li>、<dd>、<dt>、<dl>等。
（2）inline行内元素/内联元素：不会独占一行（一行可以放多个行内元素），宽度默认由其本身决定，直接设置宽度高度无效，默认宽度就是它本身内容的宽度。
常见的行内元素有：<span>、<img />、<input />、<select>、<textarea>、<br />、<strong>、<a>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等。
（3）inline-block行内块元素/内联块元素：不会独占一行（一行可以放多个行内元素）默认宽度就是它本身内容的宽度，可以设置宽度、高度以及边距等样式属性。（行内部分特点+块级部分特点）
常见的行内块元素有：<img />、<input />、<td>
10.2 元素转换
10.2.1 display方法
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display: inline-block;
10.2.2 float浮动
行内元素设置浮动后，该元素的display属性会被赋予block,转换为块级元素。
10.2.3 position定位
行内元素添加定位后，绝对定位position:absolute;与固定定位position:fixed;，转换为块级元素。
十一、网页布局！！！超级重要！！！
10.1 盒子模型：把网页布局元素看作盒子，包括：外边距margin、边框border、内边距padding、实际内容content。
外边距应用：**盒子水平居中**---块级元素
.box {
width:960px; /* 给盒子指定宽度width */
margin:0 auto; /* 盒子左右外边距设置auto */
}
行内元素或者行内块元素水平居中给父元素添加text-align:center;
CSS3新特性：box-sizing 来指定盒模型解决撑大盒子问题
值有两个context-box默认会撑大,border-box不会撑大
box-sizing:content-box； 盒子大小计算方式width+padding+border
box-sizing:border-box； 盒子大小计算方式width，因此padding和border不超过windth宽则不会撑大盒子
10.2 标准流（普通流/文档流）：标签按照规定好默认方式排列。
10.3 float浮动：让多个块级元素一行内排列显示。
选择器{
float: 属性值; /* none默认不浮动；left左浮动；right右浮动; */
}
10.3.1 ！！！浮动特性！！！
1. 浮动元素会脱离标准流，脱离标准普通流的控制（浮） 移动到指定位置（动），俗称脱标
浮动的盒子不再保留原先的位置
2. 多个盒子都设置了浮动，浮动的元素会一行内显示并且元素顶部对齐
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子 会另起一行对齐。
3. 浮动的元素会具有行内块元素的特性.
10.3.2 清除浮动：由于父级盒子有时不给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子，影响排版布局，所以清除浮动。
***清除浮动的方法在目录五、5.4的5.4.1中***
注意：
(1)清除浮动的本质是清除浮动元素造成的影响
(2)如果父盒子本身有高度，则不需要清除浮动
(3)清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
10.4 position定位：定位模式 + 边偏移
定位的使用场景：
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
10.4.1 定位模式
position：static；静态定位，默认无边偏移
position：relative；相对定位，相对于它原来的位置移动，标准流
position：absolute；绝对定位，是相对于它祖先元素来移动，脱离标准流不再占有原先的位置
position：fixed；固定定位，元素固定于浏览器可视区的位置，以浏览器的可视窗口为参照点移动元素，脱离标准流不再占有原先的位置
position：sticky;粘性定位，是相对定位和固定定位的混合。以浏览器的可视窗口为参照点移动元素，标准流
**子绝父相**：子级是绝 对定位的话，父级要加上相对定位。
**绝对定位的盒子居中**：加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px; 让盒子向左移动自身宽度的一半。
**固定在版心右侧位置**
1.让固定定位的盒子 left: 50%.。走到浏览器可视区（也可以看做版心） 的一半位置。
2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
3.就可以让固定定位的盒子贴着版心右侧对齐了。
10.4.2 边偏移
top顶端偏移量；bottom底部偏移量;left左侧偏移量;right右侧偏移量;
10.4.3 定位叠放次序 z-index：控制盒子的前后次序，只有定位才有该属性。
选择器 {
z-index: 1; /* 数值可以是正整数、负整数或 0, 默认是 auto */
}
数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位
10.4.4 定位导致的元素转换
（1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
10.4.5 拓展
（1）脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
（2）绝对定位（固定定位）会完全压住下面标准流所有的内容，浮动只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片 ）。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
10.5 网页布局使用原则
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
1. 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2. 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3. 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就 用定位布局。
十一、CSS3 的新特性
11.1 filter图片变模糊：filter:函数();---filter:blur(5px);blur模糊处理，数值越大越模糊
11.2 calc 函数自动计算：width:calc(100%-80px);
11.3 transition过渡
经常和 :hover 一起 搭配使用;
transition: 要过渡的属性(css属性，全部all) 花费时间0.5s(必须写单位) 运动曲线(ease默认可省略) 何时开始0s延迟时间必须写单位可省略;
*记住过渡的使用口诀： 谁做过渡给谁加*
十二、 元素的显示与隐藏
12.1 display 显示隐藏：设置一个元素应如何显示
display: none ；隐藏元素，不再占有原来的位置
display：block ；除了转换为块级元素之外，同时还有显示元素的意思
12.2 visibility 显示隐藏：指定一个元素应可见还是隐藏
visibility：hidden; 元素隐藏，继续占有原来的位置
visibility：visible ; 元素可视
12.3 overflow 溢出显示隐藏:如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么
overflow：visible;不剪切内容也不加滚动条
overflow:hidden;不显示超过对象尺寸的内容，超出部分隐藏
overflow:scroll;不管超出与否，总显示滚动条
overflow:auto;超出自动显示滚动条，不超出不显示
注意：有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
扫一扫
1473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
