CSS基础
1. emmet 语法 —— 开发效率
1.1 emmet 语法生成 html 标签
emmet 的特点和作用是什么？
通过简写提高编码效率。
emmet 生成 HTML 结构语法
生成多个相同的标签用哪个符号？
*Ndiv*5父子关系用哪个符号？兄弟关系用哪个符号？
父>子ul>li*5兄+弟h1+div*2+h4+p*2带类名或者 id 的 div 如何编写？其他标签呢？
.class/#id自增符号是哪个符号？
$*N.demo$*5标签内容是哪个符号？
{内容$}p{段落$}*51.2 emmet 语法快速生成 css 样式
emmet 生成 css 有什么规律？
常用属性大多用英文单词的首字母连写即可，示例如下：tac →text-align: center;ti2em →text-indent: 2em;lh26px →line-height: 26px;tdn →text-decoration: none;如何设置宽高？
w100→width: 100px;h200→height: 200px;emmet 记不住怎么办？
不要硬记，以完成代码为主会用在开发时能够快一点，不会用也不至于怎么样，做出结果最重要！1.3 快速格式化代码
你认为程序员编写出符合规范的代码重要吗？为什么？
非常重要代码是最好的文档，代码的可读性非常重要，代码写得规范，是专业性的体现「快速格式化代码」扩展 —— 保存时自动格式化
ctrl +,→ 首选项 / 设置输入fromat，勾选Format On Save，如下图所示：注意：
VSCode 自带的格式化器能够在保存时自动格式化 HTML 代码（包含其中的 CSS）VSCode 自带的格式化器目前不支持单独的 CSS 文件做格式化
2. CSS 复合选择器 —— 选择器
2.1 复合选择器简介
复合选择器具有什么特点？
对基础选择器进行组合由两个或多个基础选择器，通过不同方式组合而成的复合选择器能解决什么问题？
更准确、更高效的选择目标元素常用的复合选择器有几类？
4类，分别是： 后代选择器、子代选择器、并集选择器、伪类选择器
2.2 后代选择器
后代选择器的应用场景是什么？
可以选择父元素中的子元素后代选择器的语法格式是什么？元素之间使用什么符号分开？
语法格式：
选择器1 选择器2 {样式声明;}
后代选择器的选择器之间使用空格分开。
后代选择器最终选中的元素是父代元素还是子代元素？
后代选择器最终选中的元素是子代元素→后代元素后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？
可以后代选择器中的元素可以是任一一种基础选择器<style>ol li {color: aqua;}.adv-selector ul li a {color: rgb(255, 0, 0);}</style>
2.3 子元素选择器
子代选择器的应用场景是什么？
选择某个元素最近一级的子元素（亲儿子）子代选择器的语法格式是什么？元素之间使用什么符号分开？
语法格式
选择器1 > 选择器2 {样式声明;}
子代选择器的选择器之间使用>分开。
子代选择器最终选中的元素是父代元素还是子代元素？
子代选择器最终选中的元素是子代元素2.5 并集选择器
并集选择器的应用场景是什么？
集体声明——选择多组标签，同时设置相同的样式并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？
语法格式选择器1,选择器2 {样式声明;}
并集选择器的选择器之间使用,分开，最后一个选择器不需要逗号并集选择器通常会竖式排列选择器，提高代码的可读性
并集选择器可以使用后代选择器或子代选择器吗？
可以<style>div,p,.pig li {color: cyan;}</style>
2.6 链接伪类选择器(上)
伪类选择器使用单冒号:，是某种状态下的样式，例如:hover表示鼠标指向元素的状态。
链接伪类选择器的应用场景是什么？
针对链接的不同状态设置不同的样式链接伪类选择器一共有几个，分别表示什么含义？
/* 选择所有未被访问的链接 */a:link {color: rgb(255, 0, 0);text-decoration: none;}/* 选择所有已经被访问的链接 */a:visited {color: rgb(255, 238, 0);}/* 选择鼠标指针位于其上的链接 */a:hover {color: skyblue;}/* 选择激活链接（鼠标按下未抬起的链接) */a:active {color: green;}
2.7 链接伪类选择器(下)
链接伪类选择器的书写顺序有要求吗？如何记忆？
有LoVe HAte（爱与恨）在实际开发中，需要给 a 标签单独设置样式吗？为什么？
需要因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？
:hover因为只有鼠标经过链接时，与用户的交互是最直接的示例代码如下：a {color: #333;text-decoration: none;}a:hover {color: skyblue;text-decoration: underline;}
2.8 focus 伪类选择器
focus 伪类选择器的应用场景是什么？
在表单中突出显示当前获得焦点的表单元素，提升用户体验input:focus {background-color: rgb(216, 118, 118);color: rgb(72, 255, 0);}
2.9 复合选择器总结
3. 元素的显示模式 —— 布局认知
3.1 什么是元素显示模式
什么是元素显示模式？HTML 元素一般有几种显示模式？
元素以什么方式进行显示HTML 一般有两种显示模式猜一猜块元素和行内元素有什么特点？
块元素独占一行显示行内元素可以一行显示多个3.2 块元素 —— block
块级元素有什么特点？
独占一行可以设置宽度、高度、外边距、边框和内边距宽度默认是父级容器的宽度可以存放其他行内元素和块级元素块级元素有什么注意事项？
开发时不要在文本类元素中添加其他元素，专注于文本存放（h1~h6、p）常见的块级元素有哪些？如何验证？
div、ul、ol、li、h1~h6、p在 HTML 中添加一个盒子，在 Chrome 调试器中验证是否具有块级元素特征3.3 行内元素 —— inline
行内元素有什么特点？
相邻行内元素在一行显示，一行多个给行内元素设置宽高是无效的默认宽度是内容的宽度（被内容撑开）只能容纳文本或其他行内元素行内元素有什么注意事项？
链接不能再放链接特殊情况的链接可以存放块级元素a 标签中能够放块级元素吗？应用场景是什么？
特殊情况下可以存放块级元素应用场景：在电商网站点击商品列表项跳转到商品明细项3.4 行内块元素 —— inline-block
行内块元素有什么特点？
相邻行内元素在一行显示，一行多个（行内元素特点）默认宽度就是本身内容的宽度（行内元素特点）可以设置宽度、高度、外边距、边框和内边距（块级元素特点）我们现在学习过的标签中，有那三个是行内块元素？
img、input、td3.5 元素显示模式总结
3.6 显示模式的转换
显示模式转换的应用场景是什么？
让行内元素具有宽高：把行内元素转换成块元素或者行内块元素让块元素一行显示：把块元素转换成行内块元素三种显示模式转换的代码是什么？哪两个比较重要？
display: block转换为块元素display: inline-block转换为行内块元素display: inline转化为行内元素（使用较少）在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。
3.7 简单小米侧边栏
<!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>12. 简单小米侧边栏</title><style>a {display: block;width: 200px;height: 30px;background-color: pink;margin-top: 2px;text-align: center;text-decoration: none;font: normal 100 20px/30px "微软雅黑";}a:hover {background-color: rgba(224, 127, 0, 0.945);}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a></body></html>
3.8 单行文字垂直居中
如何实现单行文字的垂直居中？
将line-height设置为盒子的高度。行高实现原理
4. 背景图片 —— 样式
4.1 背景颜色
一般情况下元素的背景颜色是什么？
transparent透明的4.2 背景图片
背景图片的应用场景是什么？
logo装饰图片超大图片精灵图（雪碧图）背景图片有什么优点？
非常容易控制位置背景图片的语法是什么？
background-image: none | url(url);
指定背景图片的 url 时需要引号吗？
不需要4.3 背景平铺
在使用背景图片时，默认背景是平铺的吗？
默认是平铺的背景平铺有哪些属性？
使用了背景图片还能再指定背景颜色吗？
可以<!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>背景平铺</title><style>div {width: 400px;height: 100px;background-image: url(./images/logo.png);background-repeat: repeat;}.no-repeat {width: 400px;height: 100px;background-color: greenyellow;background-image: url(./images/logo.png);background-repeat: no-repeat;}.repeat-x {width: 400px;height: 100px;background-color: rgb(168, 111, 111);background-image: url(./images/logo.png);background-repeat: repeat-x;}.repeat-y {width: 400px;height: 100px;background-color: rgb(0, 132, 255);background-image: url(./images/logo.png);background-repeat: repeat-y;}</style></head><body><div></div><div class="no-repeat"></div><div class="repeat-x"></div><div class="repeat-y"></div></body></html>
4.4 背景位置-方位名词
哪一个属性可以改变图片在背景中的位置？
background-position(背景位置)使用方位名词指定背景图片有顺序要求吗？
没有因为从方位名词能够分清方向方位名词都分别对应哪些方位？
水平方向：left/right/center垂直方向：top/bottom/center如果指指定了一个方位名词，第二个值默认如何对齐？
居中对齐如何让背景图片水平垂直居中？
background-position: center;4.5 背景位置案例
<!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>13. 背景位置案例</title><style>h3 {width: 200px;height: 50px;background-color: rgb(180, 155, 155);background-image: url(./images/icon.png);background-repeat: no-repeat;background-position: left;text-indent: 2em;line-height: 50px;}</style></head><body><h3>背景位置案例</h3></body></html>
4.6 王者荣耀背景图片
<!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>13. 王者荣耀背景图片</title><style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: top;}</style></head><body></body></html>
4.7 背景位置-精确单位
使用精确坐标指定背景图片有顺序要求吗？
有第一个值一定是x/ 第二个值一定是y<style>.box {width: 100%;height: 200px;background-image: url(./images/logo.png);background-repeat: no-repeat;background-position: 500px 300px;}</style>
如果只指定了一个值，是哪个方向的值？另一个方向呢？
x方向的垂直方向居中显示4.8 背景位置-混合单位
指定背景图片可以混合使用单位吗？顺序有没有要求？
可以第一个值一定是x/ 第二个值一定是y<style>.box {width: 100%;height: 200px;background-image: url(./images/logo.png);background-repeat: no-repeat;background-position: 500px center;}</style>
4.9 背景固定
背景固定的应用场景是什么？
可以制作视差滚动效果background-attachment有哪两个参数？分别代表什么含义？
scroll默认，背景图像跟随滚动fixed背景图像固定body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: top;background-attachment: fixed;color: greenyellow;font-size: 20px;}
4.10 背景属性复合写法
我们已经学过了哪个属性的复合写法？
font: font-style font-weight font-size/line-height font-family背景属性的复合写法有顺序要求吗？
没有但是推荐顺序是：background: color image repeat attachment position背景属性的复合写法在开发中用的多吗？每次都要写全吗？
多不需要每次都要写全，需要啥就写啥4.11 背景颜色半透明
使用background-color能够设置背景颜色半透明吗？为什么？
可以background: rgba(0, 0, 0, 0.3);本质上就是在设置背景颜色。rgba中的 alpha 取值范围是多少？
取值范围：0 ~ 10完全透明 /1完全不透明<style>body {background-color: rgba(165, 165, 165, 0.5);}</style>
4.12 背景总结
复合写法推荐顺序：background: color image repeat attachment position。
