CSS（CSS3）知识点学习
文章目录
- 一、CSS的发展历程
- 二、CSS网页的美容师
- 三、CSS初识
-
- 1.书写位置
-
- （1）内部样式表（内嵌式）
- （2）内联样式（行内式）
- （3）外部样式表（外链式）
- （4）三种样式表总结
- 2.CSS样式规则
- 四、开发者工具（Chrome）
- 五、CSS注释
- 六、选择器
-
- 1.标签选择器（元素选择器）
- 2.类选择器
- 3.多类名选择器
- 4.id选择器
- 5.类选择器和id选择器的区别
- 6.通配符选择器
- 7.伪类选择器
-
- （1）链接伪类选择器
- （2）结构（位置）伪类选择器（CSS3）
- （3）目标伪类选择器（CSS3）
- 七、CSS字体样式属性
-
- 1.font-size:字号
- 2.font-family:字体
- 3.font-weight:字体粗细
- 4.font-style:字体风格
- 5.font:综合设置字体样式
- 八、CSS外观属性
-
- 1.color:文本颜色
- 2.line-height:行间距
- 3.text-align:水平对齐方式
- 4.text-indent:首行缩进
- 5.letter-spacing:字间距
- 6.word-spacing:单词间距
- 7.颜色半透明（CSS3）
- 8.文字阴影（CSS3）
- 案例
- 九、标签显示模式（display）
-
- 1.块级元素（block）
- 2. 行内元素（inline）
- 3.块级元素和行内元素区别
- 4.行内块元素（inline-block）
- 5.标签显示模式转换display
- 十、CSS复合选择器
-
- 1.交集选择器
- 2.并集选择器
- 3.后代选择器
- 4.子元素选择器
-
- 测试题
- 5.属性选择器
- 6.伪元素选择器（CSS3）
- 7.复合选择器总结
- 十一、CSS书写规范
-
- 1.空格规范
- 2.选择器规范
- 3.属性规范
- 十二、CSS 背景（background）
-
- 1.背景图片地址（background-image）
- 2.背景图片平铺（background-repeat）
- 3.背景图片位置（background-position）
- 4.背景图片附着（background-attachment）
- 5.以上的简写形式（盒子、图片）
- 6.盒子的半透明（CSS3）
- 7.背景图片缩放（CSS3）
- 8.多背景图片（CSS3）
- 9.凹凸文字案例
- 10.导航栏案例
- 十三、透明的设置（CSS3）
-
-
-
- 1.rgba()设置单颜色的透明
- 2.opacity设置标签整体的透明（继承性更高）
- 3.transparent透明值
-
-
- 十四、CSS三大特性
-
- 1.CSS层叠性
- 2.CSS继承性
- 3.CSS优先级（权重）
-
- CSS特殊性（specificity）
- 十五、盒子模型
-
- 1.看透网页布局的本质
- 2.盒子模型（Box Model）
- 3.盒子边框（border）
-
- （1）盒子边框写法总结表
- （2）表格的细线边框
- （3）圆角边框(CSS3)
- 4.内边距（padding）
-
- 课堂案例：新浪导航
- 5.外边距（margin）
-
- （1）外边距实现盒子居中
- （2）文字、盒子、图片、背景图片居中
- （3）清除元素的默认内、外边距
- （4）外边距合并问题
-
- ①相邻块元素垂直外边距的合并（外边距吞并）
- ②嵌套块元素垂直外边距的合并（外边距塌陷）
- 6.content宽度和高度
- 十六、盒子模型布局稳定性
- 十七、CSS3盒模型
- 十八、盒子阴影（css3）
- 十九、CSS的定位机制
-
- 1.普通流（normal flow）
- 2.浮动（float）
-
- （1）什么是浮动？
- （2）浮动详细内幕特性
- （3）版心和布局流程
- ①版心
- ②布局流程
-
- A.一列固定宽度且居中
- B.两列左窄右宽型
- C.通栏平均分布型
- （4）清除浮动
-
- ①清除浮动本质
- ②清除浮动的方法
-
- A.额外标签法
- B.父级添加overflow属性方法
- C.:after方式为空元素的升级版
- D.使用before和after双伪元素清除浮动
- 3.定位（position）
-
- （1）为什么要用定位？
- （2）元素的定位属性
-
- ①边偏移
- ②定位模式（定位的分类）
-
- A.静态定位（static）
- B.相对定位（relative）
- C.绝对定位（absolute）
- D.固定定位（fixed）
- ③叠放次序（z-index）
- （3）定位总结
- 二十、定位模式转换
- 二十一、元素的显示与隐藏
-
- 1.display:显示
- 2.visibility:可见性
- 3.overflow:溢出
- 二十二、CSS高级技巧
-
- 1.CSS用户界面样式
- 2.光标样式cursor
- 3.轮廓outline
- 4.防止拖拽文本域resize
- 5.vertical-align垂直对齐
- 6.去除图片底侧空白缝隙
- 7.溢出的文字隐藏
-
- （1）word-break:自动换行
- （2）white-space:文本显示方式
- （3）text-overflow:文字溢出
- 二十三、CSS精灵技术（sprite） 小妖精 雪碧
-
- 1.精灵技术产生的背景
- 2.精灵技术本质
- 3.精灵技术的使用
- 4.字体图标
-
- （1）字体图标优点
- （2）字体图标使用流程
-
- ①下载兼容字体图标包
- ②字体引入到HTML
-
-
- 第一步：在样式里面声明字体，告诉别人我们自己定义的字体
- 第二步：给盒子使用字体
- 第三步：盒子里面添加结构
-
- 二十四、滑动门
-
- 滑动门出现的背景
- 二十五、过渡（CSS3）
- 二十六、2D变形（CSS3）transform
-
- 1.移动translate(x, y)
- 2.缩放scale(x, y)
- 3.旋转rotate(deg)
- 4.倾斜skew(deg, deg)
- 二十七、3D变形（CSS3）transform
-
- 1.rotateX()
- 2.rotateY()
- 3.rotateZ()
- 二十八、透视（视距：perspective）
-
- 1.translateX(x)
- 2.translateY(y)
- 3.translateZ(z)
- 4.translate3d(x,y,z)
- 二十九、backface-visibility
- 三十、动画（CSS3）animation
- 三十一、弹性布局（CSS3）
-
- 1.min-width最小宽度、max-width最大宽度
- 2.flex-direction调整主轴方向
- 3.justify-content调整主轴对齐（水平对齐）
- 4.align-items调整侧轴对齐（垂直对齐）
- 5.flex-wrap控制是否换行
- 6.flex-flow是flex-direction和flex-wrap的简写形式
- 7.align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式
- 8.order用来控制盒子的前后排列顺序
- 9.flex属性
- 10.align-self属性
- 6.flex-flow是flex-direction和flex-wrap的简写形式
- 7.align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式
- 8.order用来控制盒子的前后排列顺序
- 9.flex属性
- 10.align-self属性
一、CSS的发展历程
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
二、CSS网页的美容师
CSS的出现，实现了 HTML 专注去做结构呈现。 而样式交给 CSS 。
网页添加 CSS和不添加CSS 的对比：
1.带有CSS的页面
2.没有CSS的页面
三、CSS初识
CSS（Cascading Style Sheets）
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
1.书写位置
CSS可以写到那个位置？是不是一定写到html文件里面呢？
（1）内部样式表（内嵌式）
内嵌式一般是将CSS代码集中写在HTML文档的head头部标签上，并且用style标签定义，其基本语法格式如下：
<head>
<titile> 标题 titile>
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
style>
head>
- 语法中，style标签一般位于head标签中title标签之后，但也可以把他放在HTML文档的任何地方（但不可以写在标签里）。
- type="text/css"表示我们书写的代码类型是CSS，在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。
（2）内联样式（行内式）
内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
（3）外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
head>
注意： link 是个单标签！！！
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：
- href：定义所链接外部样式表文件的路径，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
（4）三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 内部样式表（内嵌式） | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 行内样式表（行内式） | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 外部样式表（外链式） | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐（常用） | 控制整个站点（多） |
2.CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
在上面的样式规则中:
- 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式（声明）。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值以“键值对”的形式出现。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
四、开发者工具（Chrome）
“按F12”/ “shift+ctrl+i”/ “右击网页空白区域–检查”：打开开发者工具
小技巧：
- 使用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pH4sg7zB-1646280569857)(images\image-20200321175735665.png)]点击网页特定区域，在旁边即可看见相应的代码。
- Ctrl+滚轮可以放大开发者工具代码大小。
- 左边是HTML元素结构；右边是CSS样式。
- 在右边CSS样式中单击可修改代码数值（比如颜色）等信息，退出编辑后即可查看更改后的效果，但不会改变源文件中的代码。
五、CSS注释
/*需要注释的内容*/
例如：
p {
font-size: 14px; /*所有的字体是14像素大小*/
}
注意：
- 在CSS中注释不能嵌套。
- 在CSS中单位“px”不可以省略。
六、选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
1.标签选择器（元素选择器）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
或者
元素名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
2.类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
小技巧：
- 长名称或词组可以使用中横线“-”来为选择器命名。
- 不建议使用下划线“_”来命名CSS选择器。
- 不建议使用纯数字、数字开头、中文（中文可能会乱码）等命名，尽量使用英文字母来命名。
- 命名要有意义（语义化）。
- 驼峰式命名：包括大驼峰式、小驼峰式
猜谜底游戏：
你猜？
命名是我们通俗约定的，但是没有规定必须用这些常用的命名。
课堂案例：
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
style>
head>
<body>
<span class="blue">Gspan>
<span class="red">ospan>
<span class="orange">ospan>
<span class="blue">gspan>
<span class="green">lspan>
<span class="red">espan>
body>
3.多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
注意：
- 样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
- 各个类名中间用空格隔开。例如：class=“类名1 类名2 …”
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟div>
<div class="font20">刘备div>
<div class="font14 pink">安琪拉div>
<div class="font14">貂蝉div>
4.id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
例如：
"cl-orange"
>我是橙色的文字
id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
id的命名：为了后期配合JavaScript使用，建议标签属性值定义为唯一的标识
用法基本和类选择器相同。
5.类选择器和id选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class），好比人的名字，是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜。类选择器常用在CSS中。
id选择器，好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。id选择器常与JavaScript配合使用。
类选择器和id选择器最大的不同在于使用次数上。
6.通配符选择器
通配符选择器用“ * ”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
*{
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
注意：这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。
7.伪类选择器
- 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
- 为了和我们刚才学的类选择器相区别，类选择器是一个点，比如 .demo {} ；而我们的伪类用英文下的冒号 ，比如 :link{}，且在“:”前方添加选择器的名称，比如 a:link{}
（1）链接伪类选择器
- :link /* 未访问的链接（链接最初的样式，此属性将覆盖原属性） */
- :hover /* 鼠标移动到链接上（鼠标放到此链接上的时候） */
- :active /* 选定的链接（激活状态，鼠标按下没松手的时候） */
- :visited /* 已访问的链接（链接被访问后的样式） */
注意写的时候，他们的顺序按照“lhav”的顺序，尽量不要颠倒。
a {
/* a是标签选择器，代表所有的链接 */
font-weight: 700;
font-size: 16px; /*font-size用来调整字号大小，pc端默认大小16px*/
color: gray;
}
a:hover {
/* :hover是链接伪类选择器，鼠标经过 */
color:red; /* 鼠标放到此链接上的时候，由原来的灰色gray变成了红色red */
}
（2）结构（位置）伪类选择器（CSS3）
- :first-child :选取属于其父元素的首个子元素的指定选择器（选择器对应的元素是：他的父元素的第一个且是该类型的孩子，所说的该类型即是":"前的属性）
- :last-child :选取属于其父元素的最后一个子元素的指定选择器（选择器对应的元素是：他的父元素的最后一个且是该类型的孩子，所说的该类型即是":"前的属性）
- :nth-child(n)：匹配属于其父元素的第n个子元素，不论元素的类型（选择器对应的元素是：他的父元素的第n个且是该类型的孩子，所说的该类型即是":"前的属性）
- :nth-last-child(n)：选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（选择器对应的元素是：他的父元素的倒数第n个且是该类型的孩子，所说的该类型即是":"前的属性）
上述括号内的n可以是数字、公式或关键词： - 公式：例如:nth-last-child(2n) ，即代表此类型下的所有偶数；:nth-last-child(2n-1) ，即代表此类型下的所有奇数
- 关键词：例如:nth-child(odd)，即代表此类型下的所有奇数
li:first-child {
/* 选择li标签的第一个孩子 */
color: pink;
}
li:last-child {
/* 选择li标签的最后一个孩子 */
color: purple;
}
li:nth-child(4) {
/* 选择li标签的第4个孩子 */
color: skyblue;
}
li:nth-last-child(5) {
/* 选择li标签的倒数第5个孩子 */
color: red;
}
（3）目标伪类选择器（CSS3）
:target：目标伪类选择器，此选择器可用于选取当前活动的目标元素
p:target {
color:red;
font-size:30px;
}
"#two">点我去第2章节
"height=800px">第1章节开始
"height=1000px" id="two">第2章节开始
"height=1000px">第3章节开始
（还可使用其他选择器使p:target更换为.zhangjie:target、#two:target）
七、CSS字体样式属性
1.font-size:字号
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用相对长度单位中的像素单位px（pc端默认大小为16px，即font-size: 16px;），绝对长度单位使用较少。具体如下：
2.font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有p段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
- 现在网页中普遍使用14px+。
- 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：p{font-family:“宋体”;}、p{font-family:SimSun;}
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family: ‘Times New Roman’;}/p{font-family: “Times New Roman”;}。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体：
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文。
-
方案一： 可以使用英文来替代。 例如：使用p{font-family:“Microsoft Yahei”;}，表示设置字体为微软雅黑。
-
方案二： 在 CSS 中直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 编码代替写中文字体名称，浏览器是可以正确的解析的。例如：使用p{font-family: “\5FAE\8F6F\96C5\9ED1”;}，表示设置字体为微软雅黑。
可以通过escape()来测试属于什么字体。
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
3.font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（范围最大值：100的整数倍）。例如：font-weight:bold;
小技巧： 数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。
4.font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。例如：font-style:normal;
italic：浏览器会显示斜体的字体样式。例如：font-style:italic;
oblique：浏览器会显示倾斜的字体样式。例如：font-style:oblique;
小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（i 和em）改为普通模式。
5.font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{
font:font-style对应的属性值 font-weight对应的属性值 font-size对应的属性值（字号大小的数值）/line-height对应的属性值 font-family对应的属性值;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序（其实也可以换，但只针对某几个），各个属性值之间要用空格隔开。
注意：其中不需要设置的属性可以省略（即：取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
八、CSS外观属性
1.color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
- 预定义的颜色值：如red，green，blue等。例如：color:red;
- 十六进制（共6位，数值上由数字09、字母af组成，前两位代表红色数值，纯红色#ff0000、中间两位代表绿色数值，纯绿色#00ff00、后两位代表蓝色数值，纯蓝色#0000ff）：如#000000（纯黑色），#FF6600，#29D794，#ffffff（纯白色）等。实际工作中，十六进制是最常用的定义颜色的方式。（6位中的两两位（r、g、b）在数值上相同的情况下，可进行省略，例如：color:#000000;可省略写为color:#000;）
- RGB（共3位，数值上在0~255上取值）代码：如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。例如：color:rgb(23,43,65);
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
2.line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高（字号大小font-size+文字上、下行间距的数值）。line-height常用的属性值单位有三种，分别为像素px、em、百分比%，实际工作中使用最多的是像素px，一般情况下，行间距比字号大7/8像素左右就可以了。
行间距数值上一般与高度（盒子的高度）设为一致，用来解决垂直居中的问题，案例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dV262d2w-1646280569858)(C:\Users\23921\AppData\Roaming\Typora\typora-user-images\image-20200324090644809.png)]
3.text-align:水平对齐方式
text-align属性用于设置文本等内容的水平对齐，类似于html中的align对齐属性，但其可以作用在所有文本、图等身上，而不像html中的align局限作用于在表格等身上。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
注意：text-align属性作用的是在文本框中的left/right/center，例如在width内设置水平居中：{width:200px;text-align:center;}
4.text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度；pc端16px也是一个字的宽度，但是必须满足是汉字的段落且font-size为默认数值（16px）的情况下，16px才是一个汉字的宽度。
5.letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
6.word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
7.颜色半透明（CSS3）
文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：
color:rgba(r,g,b,a) /*a是alpha不透明度的意思，取值范围在0~1之间*/
color:rgba(0,0,0,0.3)
color:rgba(23,43,12,.5)
8.文字阴影（CSS3）
给文字添加阴影效果（shadow：影子）。text-shadow的属性值是以标签内的原文本为基准的
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色,水平位置 垂直位置 模糊距离 阴影颜色;
- 前两项是必须写的，后两项可以选写。
- blur代表模糊的程度，不支持负值。
- 各个属性值之间要用空格隔开。
- 文字阴影并不会占盒子的位置，不会影响自身和其他元素等。
- 例如：p{text-shadow: 59px 23px 3px blue;}、div{text-shadow: 3px 4px 5px rgba(0,0,0,.5);}
案例
九、标签显示模式（display）
标签的类型（显示模式）
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
1.块级元素（block）
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
- 常见的块元素：
~
、
、
、、
- 、
- 、
- 、
-
、 /
-
等，其中
标签是最典型的块元素。
-
等，其中
- 块级元素的特点：
（1）总是从新行开始。
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%。
（4）可以容纳 行内元素 和 其他块元素 。
2. 行内元素（inline）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于调整页面中文本的样式。
- 常见的行内元素：
- 行内元素的特点：
（1）可与相邻 行内元素 在同一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素可以容纳 文本 或 其他行内元素 。（a标签特殊）
注意：
- 只有文字才能组成段落，因此p标签里面不能放块级元素，同理还有h1、h2、h3、h4、h5、h6、dt标签，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接a里面不能再放链接a。
3.块级元素和行内元素区别
-
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳行内元素和其他块元素。 -
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a标签特殊）
4.行内块元素（inline-block）
在行内元素中有几个特殊的标签——（图片）、（表单元素）、（表格元素），可以对它们设置宽度、高度和对齐属性，有些资料可能会称它们为行内块元素。
- 行内块元素的特点：
（1）和相邻行内元素（行内块元素）在一行上（即不占有独立的区域）,但是之间可能会有空白缝隙（见下方bug案例）。
（2）默认宽度（width）、高度（height）就是它本身内容（文本）撑起来的宽度、高度。
（3）行高、边框、内边距及外边距等都可以进行调整。
案例：
inline-block有一个bug：代码中若有换行或空格，在最后的结果中在之间也会有空格，而不是连在一起输出的（下例中的div已被修改为行内元素，不单独占一行）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRgXZXqo-1646280569859)(images\image-20200326093157203.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLuSZ7FH-1646280569859)(images\image-20200326093211732.png)]；[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nu9YgG3l-1646280569860)(images\image-20200326093239963.png)]/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbmSMQbI-1646280569861)(images\image-20200326093436610.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T53po1WN-1646280569861)(images\image-20200326093257509.png)]
5.标签显示模式转换display
行内转块：display:block;
块转行内：display:inline;
块、行内转行内块： display: inline-block;
十、CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
1.交集选择器
交集选择器由两个选择器构成，两个选择器之间不能有空格，例如：h3.special。
记忆技巧：
-
交集选择器是 并且 的意思。即是…又是…的意思。
比如：p.one选择的是： 即是p标签，类名又是为 one（class=“one”）的标签。
p#one选择的是： 即是p标签，id名又是为 one（id=“one”）的标签。
-
用的相对来说比较少，不太建议使用。
2.并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧：
并集选择器 和 的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。
比如：.one, p , #test {color: #F00;} 表示.one（class=“one”） 、p标签、#test（id=“test”） 这三个选择器都会执行颜色为#F00。 通常用于集体声明。
3.后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。标签嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。
例如：div span {color:purple;}，说明span一定在div中，但位置不一定。
4.子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，且>左右两侧各保留一个空格。注意：不可以越级（儿子指的是 亲儿子 ，不包含孙子、重孙子之类）
例如：.demo > h3 {color: red;}，说明h3一定是demo亲儿子。demo 元素包含着h3且h3仅为demo的下一级。
测试题
<div class="nav">
<ul>
<li><a href="#">公司首页a>li>
<li><a href="#">公司简介a>li>
<li><a href="#">公司产品a>li>
<li><a href="#">联系我们a>
<ul>
<li><a href="#">公司邮箱a>li>
<li><a href="#">公司电话a>li>
ul>
li>
ul>
div>
<div class="sitenav">
<div class="site-l">左侧侧导航栏div>
<div class="site-r"><a href="#">登录a>div>
div>
要求：在不修改以上代码的前提下，完成以下任务
-
链接 登录 的颜色为红色，同时主导航栏里面的所有的链接改为蓝色。 (简单)
-
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。 （中等)
-
主导航栏里面的一级菜单链接文字颜色为绿色。 （难)
5.属性选择器
选取标签带有某些特殊属性的选择器，我们称之为属性选择器
（下方所有的class属性可替换为其他）
div[class^=font] {/* [class^=font]：在所有div标签中，为所有class属性中以属性值font开头的文本替换样式 */
color: pink;
}
div[class$=footer] {/* [class$=footer]：在所有div标签中，为所有class属性中以属性值footer结束的文本替换样式 */
color: skyblue;
}
div[class*=tao] { /*[class*=tao]：在所有div标签中，为所有class属性中属性值带有tao的文本替换样式 */
color: purple;
}
*[shuxingxuanzeqi][class="news-tao-nav"] { /*在所有标签中，为所有shuxingxuanzeqi属性且class="news-tao-nav"的文本替换样式*/
color: blue;
}
<div class="font12">属性选择器div>
<div class="font12">属性选择器div>
<div class="font24">属性选择器div>
<div class="font24">属性选择器div>
<div class="font24">属性选择器div>
<div class="24font">属性选择器123div>
<div class="sub-footer">属性选择器footerdiv>
<div class="jd-footer" shuxingxuanzeqi="sxxzq1">属性选择器footerdiv>
<div class="news-tao-nav" shuxingxuanzeqi="sxxzq2">属性选择器div>
<div class="news-tao-header">属性选择器div>
<div class="tao-header">属性选择器div>
注意：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Q1WUDvf-1646280569862)(C:\Users\23921\AppData\Roaming\Typora\typora-user-images\image-20200326105621513.png)]，仅代表数字6，所在属性选择器不会
起作业；[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fc6jzQby-1646280569863)(C:\Users\23921\AppData\Roaming\Typora\typora-user-images\image-20200326105704521.png)]，用单/双引号圈起来代表意义上的‘6’，故属性选择器可以起作用
6.伪元素选择器（CSS3）
-
::first-letter改变文本的第一个字母或文字（如中文、日文、韩文等）的样式。
-
::first-line改变文本第一行的样式。
-
::selection改变鼠标选中文本时的样式。
（以下“p”为标签名）
/* 为第一个字母或文字（如中文、日文、韩文等）使用样式 */
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 为第一行使用特殊样式 */
p::first-line {
color: skyblue;
}
/* 为鼠标选中的文本使用样式 */
p::selection {
/* font-size: 50px; */
color: orange;
}
- ::before和::after
在元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用，例如：content:“start”;（带双引号）
/*单独使用*/
div::before {
content: "start";
}
div::after {
content: "end";
}
/*合在一起使用*/
div::before,
div::after {
content: "合在一起的start和end";
}
- :before和:after在旧版本里是伪元素，在CSS3的规范里，“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下:before、:after会被自动识别为::before、::after，这样做的目的是用来做兼容处理。
- ::before和::after默认的数值是其父元素的属性值。
- “:” 与 “::” 区别在于区分伪类和伪元素。
- ::before和::after后面的练习中会反复用到，目前只需要有个大致了解。
7.复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素或元素组的后代 | 是选择所有的子孙后代 | 较多 | div p { color: red;} |
| 子元素选择器 | 选择作为某元素子元素的元素 | 只选亲儿子 | 最少 | .nav > p { color: red; } |
| 交集选择器 | 选择两个标签交集的部分 | 较少 | a.link {color: red;} | |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | .nav, .header {color: red;} |
十一、CSS书写规范
开始就形成良好的书写规范，是你专业化的开始.
以下，“【强烈建议】”并不是不按照建议就会报错，但最好按照此要求书写，更加专业化。
1.空格规范
【强烈建议】 选择器与"{"之间包含空格
例如：.selector {}
【强烈建议】 属性（名）与之后的“:”之间不允许包含空格；“:”与 属性值之间包含空格
例如：font-size: 12px;
2.选择器规范
【强烈建议】 当一个rule包含多个selector（选择器）时，每个选择器声明时独占一行。
例如：
/* 强烈建议 */
.post,
.page,
.comment {
line-height: 1.5;
}
/* 与强烈建议相反 */
.post, .page, .comment {
line-height: 1.5;
}
【强烈建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
例如：
/* 强烈建议 */
#username input {}
.comment .avatar {}
/* 与强烈建议相反 */
.page .header .login #username input {}
.comment div * {}
3.属性规范
【强烈建议】 属性定义另起一行。
例如：
/* 强烈建议 */
.selector {
margin: 0;
padding: 0;
}
/* 与强烈建议相反 */
.selector {margin: 0;padding: 0;}
【强烈建议】 属性定义后以分号结尾。
例如：
/* 强烈建议 */
.selector {
margin: 0;
}
/* 与强烈建议相反 */
.selector {
margin: 0
}
十二、CSS 背景（background）
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| background-color | 背景颜色（盒子的颜色） |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
1.背景图片地址（background-image）
语法：
background-image: none/url()
参数：
none：无背景图（默认值）
url：使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色（background-color）填充； 如果有背景图片（background-image）平铺，则会覆盖背景颜色。
小技巧：我们提倡背景图片后面的地址，url不要加引号。
2.背景图片平铺（background-repeat）
语法：
background-repeat: repeat/no-repeat/repeat-x/repeat-y
参数：
repeat：背景图像在纵向和横向上平铺（默认值）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺
3.背景图片位置（background-position）
语法：
background-position: length length
background-position: position position
参数：
- 精确单位（length）：精确数值（px）、百分数（%）等，也可为浮点数字和单位标识符组成的长度值。请参阅长度单位 。例如：background-position: 30px 50px;（30px代表x坐标，50px代表y坐标）、background-position: 30% 20%;（30%代表x坐标，20%代表y坐标）
- 方位名词（position）：left、center（单写一个center代表水平、垂直方向均居中）、right ；top、center（单写一个center代表水平、垂直方向均居中）、bottom。例如：background-position: left top;
说明：
- 设置或检索对象的背景图像位置前必须先指定background-image属性。
- background-position默认值为：0 0，即（盒子的）左上角。
- 如果只指定了一个值，则该值一定为x坐标，y坐标将默认为50%（垂直居中）。
注意：
- background-position后面是x坐标和y坐标，可以使用方位名词（position）或精确单位（length）。
- 如果方位名词（position：px、%）和精确单位（length）混合使用，则必须是x坐标在前，y坐标后面。比如：background-position: 15px top; 则15px一定是x坐标top一定是y坐标；background-position: right 30%;则right一定是x坐标30%一定是y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
4.背景图片附着（background-attachment）
语法：
background-attachment: scroll/fixed
参数：
scroll：背景图像随对象内容滚动（默认值）
fixed：背景图像固定
说明：用来设置或检索背景图片是随对象内容滚动还是固定的。
5.以上的简写形式（盒子、图片）
background属性值简写形式的顺序官方并没有强制标准的，为了可读性，建议大家按如下书写：
background: 背景颜色（盒子的颜色） 背景图片地址 背景图片平铺 背景图片附着 背景图片位置
background: skyblue url(image.jpg) repeat fixed left top;
background: transparent url(image.jpg) repeat-x scroll 50% 0; /*transparent代表背景颜色（盒子的颜色）为全透明*/
6.盒子的半透明（CSS3）
CSS3支持背景半透明的写法语法格式是:
background-color: rgba(0,0,0,a);
a是alpha不透明度的意思，取值范围在0~1之间
注意：背景半透明是指盒子的背景（background-color）半透明，盒子里面的内容（比如背景图片、文本）不会受影响。
7.背景图片缩放（CSS3）
通过使用background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数（属性值）设置如下：
- 可以设置长度单位（px）或百分比（%，设置百分比时，参照盒子（背景）的宽、高）。
- 属性值只写一个，则另一个数值将会自动按照图片原始比例进行缩放。
- 设置为cover会自动调整缩放比例，保证图片始终填满整个背景（盒子）区域，如有溢出部分（背景图片部分）则会被隐藏。我们平时用的cover 最多。（即：保证背景（盒子）被填满，图片自动调整缩放比例）
- 设置为contain会自动调整缩放比例，保证整张图片始终完整地显示在背景（盒子）区域内。（即：保证背景图片完整）
/*背景图片地址*/
background-image: url('images/gyt.jpg');
/*背景图片缩放*/
background-size: 300px 100px;
background-size: 80% 60%;
background-size: cover;
background-size: contain;
8.多背景图片（CSS3）
以逗号分隔可以设置多背景图片，可用于自适应布局 ，做法就是：用逗号隔开各组背景图片及相关属性
- 一个/多个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），上面的背景图片会覆盖下面的背景图片。
- 为了避免盒子的颜色（background-color）将背景图片盖住，盒子的颜色（background-color）通常都定义在最后一组上。
/*案例1：*/
background: url(test1.jpg) no-repeat scroll 0px 0px, /*其余属性没写即代表取默认*/
url(test1.jpg) no-repeat scroll right top, /*其余属性没写即代表取默认*/
url(test1.jpg) no-repeat scroll left bottom, /*其余属性没写即代表取默认*/
url(test1.jpg) no-repeat scroll right bottom; /*其余属性没写即代表取默认*/
background-size: 300px 100px; /*上方四组的background-size取了默认值，此处的300px 100px将会覆盖默认值*/
background-color: red; /*盒子的颜色定义在最后一组上，避免盒子的颜色将背景图片盖住*/
/*案例2：*/
background: url(test1.jpg) no-repeat scroll 10px 20px/90px 100px, /*其余属性没写即代表取默认,"/"之前的代表background-position、后面的代表background-size*/
url(test1.jpg) no-repeat scroll 10px 20px/100px 100px, /*其余属性没写即代表取默认,"/"之前的代表background-position、后面的代表background-size*/
url(test1.jpg) no-repeat scroll 10px 20px/140px 100px, /*其余属性没写即代表取默认,"/"之前的代表background-position、后面的代表background-size*/
url(test1.jpg) no-repeat scroll 10px 20px/150px 100px; /*其余属性没写即代表取默认,"/"之前的代表background-position、后面的代表background-size*/、
background-color: red; /*盒子的颜色定义在最后一组上，避免盒子的颜色将背景图片盖住*/
9.凹凸文字案例
我是凸起的文字
我是凹下的文字
效果：
10.导航栏案例
文本的装饰：通常使用text-decoration给链接修改装饰效果
| 值 | 描述 |
|---|---|
| underline | 定义文本下面的一条线（此下划线也是链接自带的，默认值） |
| none | 取消文本下原链接自带的下划线 |
| overline | 定义文本上面的一条线 |
| line-through | 定义穿过文本的一条线 |
例如：text-decoration: none;
使用技巧：在一行内的盒子内，我们调整行高等于盒子的高度（即：盒子高度height的属性值=line-height的属性值），便可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
display: inline-block; /* 把a行内元素转换为行内块元素，使之不单独占一行并可以设置width和height */
width: 200px;
height: 50px;
/* background-color: orange; */
text-align: center; /* 文字在盒子里（width）水平居中 */
line-height: 50px; /* 调整行间距数值上等于盒子的高度（height），使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消文本下原链接自带的下划线 */
}
a:hover { /* 鼠标经过，给链接添加背景图片 */
background: url(images/h.png) no-repeat;
}
style>
head>
<body>
<a href="#">专区说明a>
<a href="#">申请资格a>
<a href="#">兑换奖励a>
<a href="#">下载游戏a>
body>
效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SqX9dsEz-1646280569864)(C:\Users\23921\AppData\Roaming\Typora\typora-user-images\image-20200326135832709.png)]
十三、透明的设置（CSS3）
1.rgba()设置单颜色的透明
设置的是单个的不透明度，a代表alpha，取值范围是0-1，数值上前面的0可以省略掉，例如：color: rgba(23,43,54,.3);
2.opacity设置标签整体的透明（继承性更高）
设置的是整体的不透明度，取值范围是0-1，数值上前面的0可以省略掉，例如：color：red;background-color: yellow;opacity: .3;
3.transparent透明值
例如：color: transparent;
十四、CSS三大特性
层叠性、继承性、优先级，是我们学习CSS 必须掌握的三个特性。
1.CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
比如先给某个标签指定了内部文字颜色为红色，接着又指定了该颜色为蓝色，此时就出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般在**不考虑（不使用）权重（优先级）**时，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准（就近原则）。
- 样式冲突，在不考虑（不使用）权重（优先级）时，遵循的原则是就近原则，即哪个样式离着结构近，就执行那个样式；在考虑（使用）权重（优先级）时，则应进行权重的比较，进而执行相应的样式。
- 样式不冲突，不会层叠。
2.CSS继承性
所谓具有继承性（即可以继承的）是指书写CSS样式表时，子标签会继承父标签的样式（即子标签的样式会随其父标签样式的变化而产生变化），若想单独修改某一个子标签的样式，只需对要修改的标签添加新的所想要的样式。（故想要修改一些子标签的属性，只需调整父元素的属性即可）
简单的理解就是：子承父业（但子标签也可以手动进行修改）
注意：
-
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素继承父元素的样式（text-、font-、line-，以这些属性开头的都可以继承其对应样式，以及color属性也可以）。
-
h1~h6标签在继承font-size时，所继承的font-size属性值会按照对应的比例自动缩放。
-
a标签默认文本为蓝色，子承父业下来的颜色也只是蓝色，不会继其父标签的样式，但可以手动进行修改。
例如：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcZhNvfI-1646280569865)(images\image-20200328124702292.png)]
-
继承性更高的含义：即子标签完全继承父标签的样式，就算修改子标签的样式其最后结果也不会因子标签的修改而发生改变（无效），依旧是其父标签的样式。例如opacity属性：color：red;background-color: yellow;opacity: .3;
3.CSS优先级（权重）
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
-
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重（优先级）有多大，被子元素继承（color:skyblue;）时，他的权重（优先级）都变为0，也就是说子元素定义的样式会覆盖其父元素继承来的样式，例如：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-str7upBg-1646280569865)(images\image-20200328130441416.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTA6B9ot-1646280569866)(images\image-20200328130540665.png)]
-
行内样式优先。应用style属性的标签，其行内样式的权重非常高，可以理解为10000。总之，他拥有比上面提到的所有选择器都大的优先级。
-
权重相同时，CSS遵循就近原则。也就是说靠近元素样式的具有最大的优先级，或者说排在最后的样式优先级最大。
-
CSS定义了一个!important命令，该命令被赋予最最最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
CSS特殊性（specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准，具体规范如下：
specificity在CSS3中用一个四位的数字串（CSS2是三位）来表示，更像四个级别，从右至左权重依次增大，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
下表中的权重大小只是用来衡量（比较）权重的“大小”，并不真实存在：
| 选择器等的贡献值 | 优先级（权重）数值 |
|---|---|
| 每个默认样式的贡献值 | 例如：权重大小为0 |
| 每个通配符的贡献值（*） | 例如：权重大小为1 |
| 每个标签（元素）的贡献值（标签） | 0,0,0,1（例如：权重大小为10） |
| 每个类/伪类的贡献值（.） | 0,0,1,0（例如：权重大小为100） |
| 每个id的贡献值（#） | 0,1,0,0（例如：权重大小为1000） |
| 每个行内样式的贡献值 | 1,0,0,0（例如：权重大小为10000） |
| 每个!important的贡献值 | 无穷大（例如：权重大小为99999+） |
权重是可以叠加的，例如：
div,ul,li ------> 0,0,0,3（30）
.nav,ul,li ------> 0,0,1,2（120）
a:hover ------> 0,0,1,1（110）
.nav,a ------> 0,0,1,1（110）
#nav,p ------> 0,1,0,1（1010）
注意：
-
数位之间没有进制，比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10，而不是等于 0,0,1, 0，所以不会存在10个div等于一个类/伪类选择器的情况。
-
继承样式的权重为0。
总结优先级：
- 使用了!important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了id选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
- 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现。
十五、盒子模型
其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
盒子模型：所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、边框（border）、内边距（padding）和外边距（margin）组成。
1.看透网页布局的本质
网页布局中，我们是如何把里面的文字、图片，按照美工给我们的效果图排列的整齐有序的呢？
看透网页布局的本质：把网页元素（比如文字、图片等等）放入盒子里面，然后利用CSS摆放盒子的过程，就是网页的布局。
2.盒子模型（Box Model）
这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。
首先，我们来看一张图，来体会下什么是盒子模型。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。
3.盒子边框（border）
border: border-width border-style border-color;
边框属性之设置边框样式（例如：border-style:soild;）
位置：位于内、外边框之间的区域。
边框样式用于定义页面中边框的风格，常用属性值如下：
- none：没有边框，会忽略此border所有的属性值（默认值）
- solid：边框为单实线（常用）
- dashed：边框为虚线
- dotted：边框为点线
- double：边框为双实线
（1）盒子边框写法总结表
| 设置内容 | 样式属性 | 常用属性值及案例 |
| 上边框 | border-top-style:样式; border-top-width:宽度;border-top-color:颜色; | 例如：border-top-style: solid; |
| 综合上边框 | border-top:宽度 样式 颜色; | 例如：border-top: 10px dashed blue; |
| 下边框 | border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色; | 例如：border-bottom-width: 10px; |
| 综合下边框 | border-bottom:宽度 样式 颜色; | 例如：border-bottom: 15px none yellow; |
| 左边框 | border-left-style:样式; border-left-width:宽度;border-left-color:颜色; | 例如：border-left-color: red; |
| 综合左边框 | border-left:宽度 样式 颜色; | 例如：border-left: 20px dotted orange; |
| 右边框 | border-right-style:样式;border-right-width:宽度;border-right-color:颜色; | 例如：border-right-style: double; |
| 综合右边框 | border-right:宽度 样式 颜色; | 例如：border-right: 25px solod pink; |
| 样式综合设置 | border-style:上边 右边 下边 左边; | 常用属性值：none无（默认值）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 宽度综合设置 | border-width:上边 右边 下边 左边; | 单位：像素值px |
| 颜色综合设置 | border-color:上边 右边 下边 左边; | 常用属性值：颜色值、#十六进制、rgb(r,g,b)/rgb(r%,g%,b%) |
| 边框综合设置（四边框） | border:四边宽度 四边样式 四边颜色; | 例如：border: 10px solid #ffc65d; |
（2）表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。即：table {border-collapse: collapse;}
"1" cellspacing="0" cellpadding="20px">
1
2
3
1
2
3
1
2
3
collapse单词是合并的意思。
border-collapse: collapse;表示边框合并在一起。
（3）圆角边框(CSS3)
从此以后，我们的世界不只有矩形。
radius单词是半径（距离）的意思。
语法格式：
border-radius: 左上角 右上角 右下角 左下角;
例如：border-radius: 10px 40px 80px 100px;
border-radius: 50%;
案例：
<html>
<head>
<meta charset="utf-8">
<title>ks6-yuanjiaobiankuangtitle>
head>
<style>
/*原形状为长方形*/
div {
width: 400px;
height: 200px;
border: 1px solid red;
}
div:first-child { /* 结构（位置）伪类选择器，选亲兄弟 */
border-radius: 10px; /* 一个数值表示矩形的四个角都是相同的数值，10px的弧度 */
}
div:nth-child(2) {
border-radius: 50%; /*50%，取宽度（400px）和高度（200px）的一半，则会变成一个椭圆形（原形状为正方形则会变为圆形） */
}
div:nth-child(3) {
border-radius: 10px 40px; /* 左上角和右下角是10px，右上角和左下角是40px（对角线） */
}
div:nth-child(4) {
border-radius: 10px 40px 80px; /* 左上角是10px，右上角和左下角是40px，右下角是80px */
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; /* 左上角是10px，右上角是40px，右下角时80px，左下角是100px */
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
style>
<body>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
<div>div>
body>
html>
4.内边距（padding）
padding属性用于设置内边距
位置：边框（border）与内容之间的区域。
padding-top: 上内边距;
padding-right: 右内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
综合写法：padding: 上内边距 右内边距 下内边距 左内边距;（取值顺序：顺时针）
例如：padding: 14px 34px 23px 26px;
注意： 后面跟几个数值表示的意思是不一样的。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右边距，比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 | padding: 上下边距+左右边距，比如 padding: 3px 5px; 表示上下3像素，左右5像素 |
| 3个值 | padding：上边距+左右边距+下边距，比如 padding: 3px 5px 10px; 表示上3像素，左右5像素，下10像素 |
| 4个值 | padding：上内边距+右内边距+下内边距+左内边距，比如: padding: 3px 5px 10px 15px; 表示上3px，右是5px，下是10px，左是15px |
课堂案例：新浪导航
5.外边距（margin）
margin属性用于设置外边距，是整个盒子以外的区域。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
位置：整个盒子以外的区域
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
综合写法：margin:上外边距 右外边距 下外边距 左外边距;（取值顺序与内边距相同：顺时针）
例如：margin: 15px 28px 25px 35px;
（1）外边距实现盒子居中
让一个盒子实现在整个页面（网页）中水平居中，需要满足以下两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）。
然后再给左右的外边距都设置为auto（自动），就可使块级元素水平居中。实际工作中常用这种方式进行网页布局，示例代码如下：
.header {width: 960px;margin: 0 auto;}
（2）文字、盒子、图片、背景图片居中
- 文字水平居中：text-align: center;
- 盒子水平居中：左右margin改为auto，即：margin: 0 auto;
text-align: center; /* 文字水平居中 */
margin: 10px auto; /* 盒子水平居中，左右方向margin数值上改为auto就可以了 */
- 插入图片居中：插入的图片是行内块元素，可以把图片当做文本一样去控制，我们用的最多，比如可用于产品展示类。例如：text-align: center;
- 背景图片居中：背景图片我们一般用于小图标背景或超大背景图片。
ks6-beijingtupianjuzhong
"background.jpg" alt="wrong" title="我是背景">
（3）清除元素的默认内、外边距
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素之前默认的内、外边距：
* {
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
注意：行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下内、外边距就好了。
（4）外边距合并问题
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
①相邻块元素垂直外边距的合并（外边距吞并）
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并。（外边距吞并）
解决方案：尽量避免
②嵌套块元素垂直外边距的合并（外边距塌陷）
对于两个嵌套关系的块元素，如果父元素没有（上）内边距且只有右、下、左边框（即没有（上）边框），则父元素的（上）外边距与子元素的（上）外边距发生合并时，合并后的（上）外边距为两者中的较大者。即使父元素的上外边距为0，也会发生合并。（在子元素的（上）外边距的属性值大于其父元素（上外边距为0）的情况下，合并的结果将是使用子元素的（上）外边距的属性值）
解决方案：
-
可以为父元素添加1像素的（上）内边距或（上）边框，不过此方法会改变盒子的大小。
例如：padding: 1px; /border: 1px solid;
-
可以为父元素添加overflow:hidden（直译：overflow溢出、hidden隐藏（BFC理论支持）），此方法不会改变盒子的大小。
例如：overflow: hidden;
6.content宽度和高度
width和height的属性值可以是不同单位的数值或相对于其父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
/* 外盒尺寸计算（元素空间尺寸） */
Element 空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/* 内盒尺寸计算（元素实际大小） */
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
注意：
- 使用宽度属性width和高度属性height可以对盒子的大小进行控制，但两个属性仅适用于块级元素，对行内元素无效（img标签和input标签除外）。
- 计算盒子模型的总高度时，还应考虑上下相邻块元素垂直外边距合并的情况（即上下相邻两个盒子外边距吞并情况）。
- 如果一个盒子没有给定宽度/高度或者继承其父元素的宽度/高度，则padding不会影响本盒子大小。
十六、盒子模型布局稳定性
按照优先使用宽度（width）其次使用内边距（padding）再次使用外边距（margin）的顺序。
width > padding > margin
原因：
-
margin：会有外边距合并问题，还有ie6下面margin加倍的bug（讨厌）所以最后使用。
-
padding：会影响盒子大小，需要进行加减计算（麻烦）其次使用。
-
width：没有问题（嗨皮）我们经常使用宽度剩余法、高度剩余法来做。
十七、CSS3盒模型
CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变.
可以分成两种情况：
1、box-sizing: content-box;盒子最终的宽高数值为width+padding+border、height+padding+border，content-box此值为默认值，其让元素维持W3C的标准Box Mode。
2、box-sizing: border-box;盒子最终的宽高数值为width、height，就是说padding和border是包含到width、height里面的。
注：上面的标注的width、height指的是CSS属性里设置的width: length;、height:length;，content的值是会自动调整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的标准盒模型 W3C */
padding: 10px;
border: 15px solid red;
margin: 50px; /*margin会调整盒子的位置*/ /*外边距塌陷*/
/* 盒子最终的宽高为width+padding+border、height+padding+border，content-box此值为默认值，其让元素维持W3C的标准Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding、border不会撑开盒子 */
border: 15px solid red;
margin: 20px; /*margin会调整盒子的位置*/ /*外边距塌陷*/
/* 盒子最终的宽高为width、height，就是说padding和border是包含到width、height里面的 */
}
十八、盒子阴影（css3）
语法格式：
box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
- 前两个属性是必须写的，其余的可以省略。
- 外阴影outset默认值， 但是不能去书写；想要内阴影则用inset。
- 例如：box-show: 5px 5px 5px 5px red inset;
div {
width: 200px;
height: 200px;
background-color: yellow;
/*border: 10px solid red;*/
/*box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影*/
/*box-shadow: 5px 5px 3px 4px rgba(0,0,0,.8) inset*/
/* box-shadow:水平位置 垂直位置 模糊距离 阴影颜色 内/外阴影; */
/*box-shadow: 0 15px 30px rgba(0,0,0,.4);*/
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影,水平位置 垂直位置 模糊距离阴影尺寸（影子大小） 阴影颜色 内/外阴影 */
box-shadow: 5px 5px 3px 4px rgba(0,0,0,.8) inset,10px 10px 40px 5px red;
}
十九、CSS的定位机制
1.普通流（normal flow）
CSS的定位机制有3种：普通流（标准流/文档流）、浮动和定位。
普通流：普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列。按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
2.浮动（float）
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来布局了。
（1）什么是浮动？
- 浮动的定义：使元素脱离标准流，按照指定方向（左left/右right）发生移动，遇到父级边界或者相邻的浮动元素停了下来。
- 脱离标准流：即脱标，在页面中不占位置。
- 只有两种浮动：左/右。
即指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。（“上天”）
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器 {
float: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
例如：div {float: left};
（2）浮动详细内幕特性
浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它自己（html中自身标签）最近的父级元素对齐，但是不会超出内边距的范围。
浮动的元素排列位置，跟浮动元素（首先本身要是浮动元素）的上一个块级元素有关系（即浮动元素的上一个元素是块级元素的情况下）：如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素会接着原来的位置去布局（即A元素顶部会和上一个元素的底部对齐）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtiRaniz-1646280569867)(images/two.jpg)]
一个父盒子里面的子盒子，如果其中一个子盒子有浮动，则其他子盒子都需要添加浮动，这样才能在一行中对齐显示，例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZvSqHrjP-1646280569868)(images\image-20200331122655536.png)]
**元素添加浮动后，元素会具有行内块元素的特性。**元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
总结：浮动的目的就是为了让多个块级元素在同一行上显示。
（3）版心和布局流程
①版心
版心（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
②布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
A.一列固定宽度且居中
最普通的，最为常用的结构
B.两列左窄右宽型
比如： 小米商城
C.通栏平均分布型
比如： 锤子商城
（4）清除浮动
由于浮动元素不再占用标准流的位置（浮动元素“上天”），所以它会对后面的元素（例如：此浮动元素的父元素）布局产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动之后而造成的影响。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovpuJsRR-1646280569868)(images\QQ图片20200401104707.jpg)]
例如：刚开始子元素没有设置float之前，父元素的大小完全是被子元素撑起来的[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRtmz00M-1646280569869)(images\image-20200401105737562.png)]–>子元素设置了float后，导致父元素的高度发生塌陷（蓝色盒子内部高度变为了0）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o7Te1n5g-1646280569870)(images\image-20200401105905836.png)]
①清除浮动本质
清除浮动主要为了解决父级元素因子级浮动而引起的内部高度为0（塌陷）的问题。
②清除浮动的方法
其实本质叫做闭合浮动更好一些，记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器 {
clear: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
A.额外标签法
通过在浮动标签末尾添加一个空的标签，在html中实现，使用方法：
"clear: both;">
标签的使用（例如：上述div标签）要根据情况书写。
优点：通俗易懂，书写方便。
缺点：无缘无故的多使用了无关的html标签，添加了许多无意义的标签，结构化较差。
B.父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果，在css中实现，使用方法：
给父级添加：overflow: hidden/auto/scroll; /* 三个属性值都可以实现 */
优点：代码简洁。
缺点：若给子元素指定高度height，则在文本增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，例如：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ErAq8XI-1646280569870)(images\image-20200401121832343.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGdHt7nG-1646280569871)(images\image-20200401121906296.png)]
（不给子元素指定高度height时，文本便可以完全显示（文本会将高度撑起来）：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxW1NAd6-1646280569871)(images\image-20200401122213745.png)]）
C.:after方式为空元素的升级版
好处是不用单独加标签了。
在css中实现，使用方法：
"content clearfix">
"c-aside">我是左侧菜单栏
"c-main">我是内容
优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持:after，所以要使用zoom: 1触发hasLayout。
代表网站：百度、淘宝网、网易等。
注意：content: “.”;双引号里面尽量跟一个小点，或者其他，尽量不要为空，否则在firefox 7.0前的版本会有生成空格；不要忘记在html中对应的父元素上添加class=“clearfix”。
D.使用before和after双伪元素清除浮动
在css中实现，使用方法：
"content clearfix">
"c-aside">我是左侧菜单栏
"c-main">我是内容
优点：代码更简洁。
缺点：由于IE6-7不支持:after，所以要使用zoom: 1触发hasLayout。
3.定位（position）
（1）为什么要用定位？
那么定位，最长运用的场景再哪里呢？来看几幅图片，你一定会有感悟！
第一幅图， 小黄色块可以再图片上移动：
第二幅图， 左右箭头压住图片：
第三幅图，HOT、New在盒子外面多出一块，更加突出：
（2）元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
①边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素（相对于其父元素）上边线的距离 |
| bottom | 底部偏移量，定义元素（相对于其父元素）下边线的距离 |
| left | 左侧偏移量，定义元素（相对于其父元素）左边线的距离 |
| right | 右侧偏移量，定义元素（相对于其父元素）右边线的距离 |
也就说，以后定位要和边偏移搭配使用了，比如：top: 100px;left: 30px;、top: 30%;right: 50%;
②定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器 {position: 属性值;}
position属性的常用值：
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式），不脱标 |
| relative | 相对定位，相对于其原标准流的位置进行定位，不脱标 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位，完全脱标 |
| fixed | 固定定位（绝对定位的一种特殊形式），相对于浏览器页面进行定位，完全脱标 |
A.静态定位（static）
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在html文档流中默认的位置。例如：position: static;
上面的话翻译成白话：就是网页中所有元素都默认的是静态定位！其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
PS：静态定位其实没什么可说的。
B.相对定位（relative）
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
例如：
position: relative;
right: 20px; /* 以本身自己右侧（right）为基准，向左移动20px */
bottom: 30px; /* 以本身自己下侧（bottom）为基准，向上移动30px */
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在标准流中的位置仍然保留。如下图所示，相对定位的效果展示：
（[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNcZCtMf-1646280569872)(images\image-20200401162449491.png)]：原盒子在标准流中的位置仍然保留，它后面的元素仍以标准流方式对待它，例如：在图片中中间的边距效果（p标签自身上下边距+原盒子的位置））
注意：
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是它原来所占的位置，继续占有（例如：上图）。也就是说，相对定位的原盒子仍在标准流中，它后面的元素（标签/盒子）仍以标准流方式对待它（因为相对定位不脱标）。
- 其次，每次移动的位置，是以自己的左上角为基点移动（即相对于自己移动位置）。
如果说浮动的主要目的是让多个块级元素在一行显示，那么定位的主要价值就是移动盒子位置，让盒子到我们想要的位置上去。
C.绝对定位（absolute）
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
例如：
position: absolute;
top: 50%;
left: 50%;
特点：
- 绝对定位是基于浏览器可视区域来定位的。
- 如果文档（浏览器页面）可滚动（例如将页面高度设为3000px：body {height: 3000px;}），绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
- 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
父级没有定位
若所有的父元素都没有定位，则元素以浏览器页面为基准设置边偏移。
下图：position: absolute;top: 100px;left: 150px;
父级有定位
若父元素有定位，绝对定位则是将元素依据最近的已经定位（相对、绝对或固定定位）的“父”元素进行定位。（即以自己为出发点 ，一层一层向外找其“父”元素，谁有定位，谁就能约束它，最终找到body（即祖先/浏览器页面）。
即：父级有定位包括了父级没有定位这一说
“子绝父相”
“子绝父相”的意思是子元素使用绝对定位的话，父元素最好要用相对定位。
首先，我们说下，在父级有定位的情况下，绝对定位则是将元素依据最近的已经定位（相对、绝对或固定定位）的“父”元素进行定位。
就是说，子元素是绝对定位，父元素只要是定位即可（不管父元素是相对定位还是绝对定位，甚至是固定定位都可以，但静态定位不行），也就是说，“子绝父相”、“子绝父绝”、“子绝父固”都是正确的。
但是，在我们网页布局的时候，最常说的“子绝父相”是怎么来的呢？ 请看如下图：
所以，由上我们得出如下结论：
- 因为子元素是绝对定位，脱标，故不会占有位置，子元素可以放到父元素（盒子）里面的任何一个地方。（即子元素是绝对定位，脱标”上天“了，不会占标准流的位置，则可以将自身子元素放置在其父盒子中的任何地方）
- 父元素（盒子）布局时，若要占有（标准流）位置，则父元素只能使用相对定位（因为相对定位不会脱标，也就不会覆盖住下面的元素），例如下方粉盒子使用相对定位（红、蓝盒子使用了绝对定位），则不会覆盖住下方的数字内容元素：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPYRVywM-1646280569873)(images\image-20200401171828359.png)]
总结：“子绝父相”、“子绝父绝”、“子绝父固”都可以使用，但是根据其是否脱标而表现出来的效果会不同。
绝对定位、固定定位（脱标）的盒子水平、垂直居中
类似相对定位这种不脱标在标准流中的盒子要设置水平居中只需将margin左右改为auto便可（即：margin: 0 auto;），但是对于脱标，不在标准流中的盒子（例如：绝对定位、固定定位这种脱标盒子）就无效了。
脱标的盒子也可以水平、垂直居中，有一个算法：
水平居中：
- 首先添加left（/right）: 50%;
- 然后再添加margin-left（/right）: -npx;（n为自身宽度width（+自身总padding）的一半值，即width（+总padding）/2）。
垂直居中：
- 首先添加top（/bottom）: 50%;
- 然后再添加margin-top（/bottom）: -npx;（n为自身高度height（+自身总padding）的一半值，即height（+总padding）/2）。
D.固定定位（fixed）
固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器页面作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
例如：
position: fixed;
bottom: 40%;
right: 0;
当对元素设置固定定位后，它将脱离标准文档流的控制（脱标），始终依据浏览器窗口来定义自己的显示位置（即不管浏览器滚动条如何滚动也不管浏览器页面的大小如何变化，该元素都会始终显示在该浏览器页面中所设置的固定位置）
特点：
- 固定定位也是基于浏览器可视区域来定位的。固定定位的元素跟父亲没有任何关系，只认浏览器。
- 不随着滚动条滚动。（例如：侧边广告位）
- 固定定位完全脱标，不占有位置。
注意：IE6等低版本浏览器不支持固定定位。
③叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
例如：z-index: 1;、z-index: -1;、z-index: 0;
注意：
-
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
-
如果z-index取值（属性值）相同，则根据html书写顺序，下面的（指html中下面的代码）居上。（即下面的会覆盖上面的）
-
后面数字一定不能加单位。
-
只有相对定位、绝对定位、固定定位有此属性，其余的标准流、浮动、静态定位都无此属性，即其不可指定此属性。
（3）定位总结
| 定位模式 | 是否脱标、占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） |
| 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位最近的父级移动位置（拼爹型） |
| 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |
二十、定位模式转换
跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式。
因此比如行内元素如果添加了绝对定位或者固定定位浮动后，可以不用转换模式，直接给高度和宽度就可以了。
二十一、元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display、visibility和overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！
1.display:显示
设置或检索对象是否及如何显示。
display: none;隐藏对象，与它相反的是display: block;除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留原有位置。
2.visibility:可见性
设置或检索是否显示对象。
visible：对象可视（显示元素），例如：visibility: visible;
hidden：对象隐藏（隐藏元素），例如：visibility: hidden;
特点：隐藏之后，继续保留原有位置。
3.overflow:溢出
检索或设置当对象（盒子）中的内容（文本）超过其（盒子）指定高度及宽度时如何管理内容。
visible：不剪切内容（文本）也不添加滚动条。（默认值）
hidden：不显示超过对象（盒子）尺寸的内容（文本），超出的部分内容（文本）将被隐藏掉。
auto：内容（文本）超出对象（盒子）自动显示滚动条，不超出对象（盒子）则不显示滚动条。
scroll：不管内容（文本）是否超出对象（盒子），总是显示滚动条。
例如：overflow: auto;
二十二、CSS高级技巧
1.CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式、表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽。
2.光标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor: default（箭头）/pointer（小手）/move（移动）/text（文本）
鼠标放我身上查看效果哦：
<ul>
<li style="cursor:default">我是箭头li>
<li style="cursor:pointer">我是小手li>
<li style="cursor:move">我是移动li>
<li style="cursor:text">我是文本li>
ul>
hand（也是cursor的其一属性值），火狐不支持，所以尽量不要用（pointer ie6以上都支持，尽量用）
3.轮廓outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
/* outline-color/outline-style/outline-width */
outline-color: green;
outline-style:
outline-width:
但是一般我们都不关心可以怎么设置或设置多少，我们平时都是将其去掉的，例如，最直接的写法是outline: 0;或outline: none;
<input type="text" name="password" style="outline: 0;"/>
4.防止拖拽文本域resize
resize: none;可以防止火狐、谷歌等浏览器随意的拖动文本域。
右下角可以拖拽：
右下角不可以拖拽：
<textarea style="resize: none;">textarea>
5.vertical-align垂直对齐
vertical-align垂直对齐，这个看上去很美好的一个属性， 实际有着不可捉摸的脾气。
vertical-align: baseline（默认值）/top/middle/bottom
设置或检索对象内容的垂直对其方式。
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或行内块元素，特别是行内块元素，通常用来控制图片（）/表单（）与文字的对齐。
6.去除图片底侧空白缝隙
有个很重要的特性要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：
- html的标签连在一起写，不能出现空格、换行。
- 给img添加vertical-align: top/middle/bottom;让图片不要和基线对齐。
- 给img添加display: block;转换为块级元素就不会存在问题了。
7.溢出的文字隐藏
（1）word-break:自动换行
word-break:normal/break-all/keep-all
normal：使用浏览器默认的换行规则。（默认值）
break-all：允许在单词内换行。
keep-all：只能在半角空格处或连字符处换行。
主要处理英文单词。
（2）white-space:文本显示方式
white-space:normal/nowrap
设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 。
normal：默认处理方式。（默认值）
nowrap：强制在同一行内显示所有文本，直到文本结束或遇到br标签才换行。
可以处理中文。
（3）text-overflow:文字溢出
text-overflow: clip/ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
clip：不显示省略标记（…），而是简单的裁切。（默认值）
ellipsis（单词意思：“省略号”）：当对象内文本溢出时（overflow: hidden;）显示省略标记（…）。
注意一定要先设置强制一行内显示所有文本（white-space: nowrap;），再和overflow属性搭配使用。
text-overflow: ellipsis;显示省略标记（…）案例：
white-space: nowrap; /*强制一行内显示所有文本*/
text-overflow: ellipsis;
overflow: hidden;/*不显示超过对象（盒子）尺寸的内容（文本），超出的部分内容（文本）将被隐藏掉*/
二十三、CSS精灵技术（sprite） 小妖精 雪碧
1.精灵技术产生的背景
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
2.精灵技术本质
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
3.精灵技术的使用
CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
4.字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。这就是字体图标（iconfont)。
（1）字体图标优点
可以做出跟图片一样可以做的事情，比如改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器移动端设备。
（2）字体图标使用流程
总体来说，字体图标按照如下流程：
当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
**icomoon字库 ** http://icomoon.io
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里icon font字库 http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！
fontello http://fontello.com/
在线定制你自己的iconfont字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome http://fortawesome.github.io/Font-Awesome/
这是我最喜欢的字库之一了，更新比较快。
Glyphicon Halflings http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。
Icons8 https://icons8.com/
提供PNG免费下载，像素能大到500px。
①下载兼容字体图标包
②字体引入到HTML
得到压缩包之后，字体文件需要引入到我们页面中。
首先把以下4个文件放入到 fonts文件夹里面。 通俗的做法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pesyBbCL-1646280569874)(images/1498032122244.png)]
以引用fontello网站图标为例：
第一步：在样式里面声明字体，告诉别人我们自己定义的字体
/* 方法一：复制css文件夹下的fontello.css最上面的部分代码（url目标位置可能要进行修改） */
/* 方法二：使用链入式引入 */
"stylesheet" type="text/css" href="./fontello-aa7904f9/css/fontello.css">
第二步：给盒子使用字体
第三步：盒子里面添加结构
/* 方法一 */
/* 方法二 */
;
二十四、滑动门
滑动门出现的背景
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，怎么办？
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。
核心技术：
核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度， 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<ul>
<li>
<a href="#">
<span>导航栏内容span>
a>
li>
ul>
总结：
- a标签设置背景（“按钮”背景）左侧，padding撑开合适宽度。
- span标签设置背景（“按钮”背景）右侧， padding撑开合适宽度，剩下宽度由文本自动继续撑开。
- 之所以a包含span就是因为整个导航都是可以点击的。
二十五、过渡（CSS3）
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示我们采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式：
transition: 要过渡的属性 过度所花费的时间 运动曲线 多长时间后开始;
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称 | 3 |
| transition-duration | 定义过渡效果花费的时间（默认值 0） | 3 |
| transition-timing-function | 规定过渡效果的时间曲线（默认值ease） | 3 |
| transition-delay | 规定过渡效果何时开始（默认值 0，立马开始） | 3 |
- 如果想要所有的属性（transition-property）都变化过渡，写一个all就可以，例如：transition-property:all;
- transition-duration、transition-delay花费时间单位是：秒s、ms毫秒，比如 0.5s（.5s），这个单位必须写
- transition-timing-function运动曲线示意图：