一、emmet 语法
emmet 语法快速生成 css 样式
1.如何设置宽高？
w100 → width: 100px;
h200 → height: 200px;
常用属性大多用英文单词的首字母连写即可
tac → text-align: center; ti2em → text-indent: 2em;
lh26px → line-height: 26px; tdn → text-decoration: none;
Input:button（快速生成）
二. CSS 复合选择器
复合选择器简介
例：
Ol中有5个li
Ul中有个li
只修改UL中的li
在css样式中通过复合选择器
Ul { li}来修改ul中的li
常用的复合选择器有几类？
4 类，本别是：后代、子代、并集、伪类
子孙后代、儿子、并列、字体放上去变颜色（就是用伪类做的）
1.后代选择器
1：后代选择器的应用场景是什么？
可以选择父元素中的子元素
2：后代选择器的语法格式是什么？元素之间使用什么符号分开？
语法格式
选择器1 选择器2 {样式声明;}
父亲+空格+孩子+{内容}
为了优化代码，理论上，嵌套尽量不要超过三到四层
后代选择器的选择器之间使用空格分开。
3：后代选择器最终选中的元素是父代元素还是子代元素？
后代选择器最终选中的元素是子代元素 → 后代元素
4：后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？
可以
后代选择器中的元素可以是任一一种基础选择器
2.子元素选择器
1：子代选择器的应用场景是什么？
选择某个元素最近一级的子元素（亲儿子）
2：子代选择器的语法格式是什么？元素之间使用什么符号分开？
语法格式
选择器1 > 选择器2 {样式声明;}
子代选择器的选择器之间使用> 分开。
3：子代选择器最终选中的元素是父代元素还是子代元素？
子代选择器终选中的元素是子代元素 → 亲儿子
3.并集选择器
1：并集选择器的应用场景是什么？
集体声明 —— 选择多组标签，同时设置相同的样式
2：并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？
语法格式
选择器1,
选择器2 {
样式声明;}
并集选择器可以包含后代选择器和子类选择器，但是中间一定要用逗号隔开
扩展:①约定的与法规但，并集选择器竖着写
②最后一个不加逗号
4. 链接伪类选择器
1：链接伪类选择器的应用场景是什么？
针对链接的不同状态设置不同的样式
2：链接伪类选择器一共有几个，分别表示什么含义？
链接伪类选择器说明
a:link选择所有未被访问的链接
a:visited选择所有已经被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择激活链接（鼠标按下未抬起的链接
1：链接伪类选择器的书写顺序有要求吗？如何记忆？
有
LoVe HAte（爱与恨）
2：在实际开发中，需要给 a 标签单独设置样式吗？为什么？
需要
因为a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同
3：在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？
:hover
因为只有鼠标经过链接时，与用户的交互是最直接的
5.focus 伪类选择器（知识扩展）
使用focus 伪类选择器，当输入框内获取焦点时，修改文本颜色和输入框的背景颜色。
复合选择器总结
链接伪类选择器
6.交集选择器(补充)
<style>/* 选择类名是box的div,中的span设置为绿色 */
/* 选择器1选择器2 既...又.. 的关系 应用场景不多,一般是为了提权使用 紧紧相连*/
div.box span {
color:green;
}
</style>
<div class="box">
<span>div1中的span标签
</span>
</div>
<div>
<span>d
</span>
</div><p class="box">
<span>p中的span标
</span>
</p>
三、元素的显示模式—— 布局认知
1. 什么是元素显示模式
1：什么是元素显示模式？
元素以什么方式进行显示
HTML 一般有两种显示模式
2：猜一猜块元素和行内元素有什么特点？
块元素独占一行显示
行内元素可以一行显示多个
2.块元素—— block
块级元素有什么特点？
①独占一行
②可以设置宽度、高度、外边距、边框和内边距
③宽度默认是父级容器的宽度
④可以存放其他行内元素和块级元素
3.行内元素—— inline
行内元素有什么特点？
①相邻行内元素在一行显示，一行多个
②给行内元素设置宽高是无效的
③默认宽度是内容的宽度（被内容撑开）
④只能容纳文本或其他行内元素
2：行内元素有什么注意事项？
①链接不能再放链接
②特殊情况的链接可以存放块级元素
3：a 标签中能够放块级元素吗？应用场景是什么？
①特殊情况下可以存放块级元素
②应用场景：在电商网站点击商品列表项跳转到商品明细项
4.行内块元素—— inline-block
1：行内块元素有什么特点？
①相邻行内元素在一行显示，一行多个（行内元素特点）
②默认宽度就是本身内容的宽度（行内元素特点）
③可以设置宽度、高度、外边距、边框和内边距（块级元素特点）
2：我们现在学习过的标签中，有那三个是行内块元素？
img、input、td
元素显示模式总结
元素模式英文排列方式指定宽高
显示模式的转换
1：显示模式转换的应用场景是什么？
①让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
②让块元素一行显示：把块元素转换成行内块元素
2：三种显示模式转换的代码是什么？哪两个比较重要？
[if !supportLists]① [endif]display: block 转换为块元素
②display: inline 转化为行内元素（使用较少）
③display: inline-block 转换为行内块元素
a（超链接）没有大小，要是放标签先转化为块元素
四、背景图片
背景颜色（transparent 透明的）
背景图片
1：背景图片的应用场景是什么？
①logo
②装饰图片
③超大图片
④精灵图（雪碧图）
2：背景图片有什么优点？
非常容易控制位置
3.背景图片的语法是什么？
background-image: none | url(url);
4：指定背景图片的 url 时需要引号吗？
不需要、不需要、不需要
背景平铺
1：在使用背景图片时，默认背景是平铺的吗？
默认是平铺的
2：背景平铺 background-repeat 有哪些属性？
3：使用了背景图片还能再指定背景颜色吗？
可以
背景位置-方位名词
1.哪一个属性可以改变图片在背景中的位置？
background-position (背景位置)
2：使用方位名词指定背景图片位置有顺序要求吗？
[if !supportLists]· [endif]没有
[if !supportLists]· [endif]因为从方位名词能够分清方向
3：方位名词都分别对应哪些方位？
水平方向：left / right / center
垂直方向：top / bottom / center
4：如果指指定了一个方位名词，第二个值默认如何对齐？
居中对齐
5：如何让背景图片水平垂直居中？
background-position: center
设置超大图片
设置超大图背景图片套路
给body 设置样式
平铺方式no-repeat / 设置图片位置 top
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: top;}
背景位置-精确单位（x和y精确数值，不写y默认center）
1：使用精确坐标指定背景图片有顺序要求吗？
有
第一个值一定是x / 第二个值一定是 y
2：如果只指定了一个值，是哪个方向的值？另一个方向呢？
x 方向的
垂直方向居中显示
背景位置-混合单位
1：指定背景图片可以混合使用单位吗？顺序有没有要求？
可以
第一个值一定是x / 第二个值一定是 y
背景固定
1：背景固定的应用场景是什么？
可以制作视差滚动效果
2：background-attachment 有哪两个参数？分别代表什么含义？
scroll 默认，背景图像跟随滚动
fixed 背景图像固定
背景颜色半透明
1：使用 background-color 能够设置背景颜色半透明吗？为什么？
可以background: rgba(0, 0, 0, 0.3); 本质上就是在设置背景颜色。
2：rgba 中的 alpha 取值范围是多少？
取值范围：0 ~ 1
完全透明/完全不透明
Opactiy会让盒子半透明。但是同时也会让盒子中的内容变成半透明。
在写CSS 时，记住把 display 转换显示模式的设置写在第一行
文字等于行高，文字会居中
