2020-11-02

菜鸟学习CSS的第二天

今天的单词量也是非常的多，有的没有记住。伪链接容易搞混，背景图片的哪几种属性难度比较大，pink老师今天重点记住的几个单词差不多就是经常用的，内容如下

1. 鼠标经过链接的伪类选择器怎么写？
   a:hover
2. 如何转换为块级元素？
   display： block：
3. 如何转换为行内块级元素？
   display： inline-block：
4. 如何设置背景图片不平铺？
   background-repeat: no-repeat;
5. 如何设置背景位置？
   background-position
6. 如何设置背景颜色半透明？
   background-color: rgba(0,0,0, .3);
7. 拿过一个盒子来，我们首先考虑宽高背景色，然后细修里面的环节。

话不多说，直接上笔记好友今天整理好的xmide

笔记如下

1. emmet 语法 —— 开发效率
   1 emmet 语法生成 html 标签
    1：emmet 的特点和作用是什么？
   通过简写提高编码效率。
   emmet 生成 HTML 结构语法
   序号 符号 含义 示例
   1 N 连续生成 N 个 div5
   2 父>子 生成父子关系结构 ul>li5
   3 兄+弟 生成兄弟关系结构 h1+div2+h4+p*2
   4 .class / #id 生成带 class 或 id 的 div .red / #app
   5 tag.class / tag#id 生成带 class 或 id 的 tag p.red / span#nav
   6 $*N   位 置 会 被 连 续 的 数 字 替 换 . d e m o  位置会被连续的数字替换 .demo  位置会被连续的数字替换.demo*5
   7 {内容KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲ 标签内容 p{段落}*5
   备注（序号 1 2 4 ）是最常用
   1.2 emmet 语法快速生成 css 样式
   1：emmet 生成 css 有什么规律？
   o常用属性大多用英文单词的首字母连写即可，示例如下：
   otac → text-align: center;
   oti2em → text-indent: 2em;
   olh26px → line-height: 26px;
   otdn → text-decoration: none;
   
   2：如何设置宽高？
   ow100 → width: 100px;
   oh200 → height: 200px;
   3：emmet 记不住怎么办？
   o不要硬记，以完成代码为主
   o会用在开发时能够快一点，不会用也不至于怎么样，做出结果最重要！
   1.3快速格式化代码
   Vscode中安装插件即可

2. CSS 复合选择器
   #2.1 复合选择器简介
   复合选择器具有什么特点？
   o对基础选择器进行组合
   o由两个或多个基础选择器，通过不同方式组合而成的
   2：复合选择器能解决什么问题？
   o更准确、更高效的选择目标元素
   3：常用的复合选择器有几类？
   o4 类，本别是：后代、子代、并集、伪类
   2.2 后代选择器
   后代选择器的应用场景是什么？
   o可以选择父元素中的子元素
   2：后代选择器的语法格式是什么？元素之间使用什么符号分开？
   语法格式：
   选择器1 选择器2 {样式声明;}
   后代选择器的选择器之间使用空格分开

后代选择器最终选中的元素是父代元素还是子代元素？
o后代选择器最终选中的元素是子代元素 → 后代元素
4：后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？
o可以
o后代选择器中的元素可以是任一一种基础选择器
2.3 子元素选择器
子代选择器的应用场景是什么？
o选择某个元素最近一级的子元素（亲儿子）
2：子代选择器的语法格式是什么？元素之间使用什么符号分开？
语法格式

选择器1 > 选择器2 {样式声明;}
子代选择器的选择器之间使用 > 分开。
代选择器最终选中的元素是父代元素还是子代元素？
子代选择器最终选中的元素是子代元素 → 亲儿子
2.4 并集选择器
1：并集选择器的应用场景是什么？
o集体声明 —— 选择多组标签，同时设置相同的样式
问题 2：并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？
语法格式

选择器1,
选择器2 {
样式声明;
}

并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号
并集选择器通常会竖式排列选择器，提高代码的可读性
3：并集选择器可以使用后代选择器或子代选择器吗？
o可以
链接伪类选择器
链接伪类选择器的应用场景是什么？
o针对链接的不同状态设置不同的样式
2：链接伪类选择器一共有几个，分别表示什么含义？
链接伪类选择器 说明
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择**链接（鼠标按下未抬起的链接

链接伪类选择器的书写顺序有要求吗？如何记忆？
o有
oLoVe HAte（爱与恨）
2：在实际开发中，需要给 a 标签单独设置样式吗？为什么？
o需要
o因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同
3：在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？
:hover 因为只有鼠标经过链接时，与用户的交互是最直接的
交集选择器

1：交集选择器的应用场景是什么？
交集选择器在项目中使用一般是为了提权(权重问题会在后续的css三大特性中讲解)使用
交集选择器的语法格式是什么？元素之间需要使用分割符么?
交集选择器不需要使用分割符分割

    p中的span标签

3. 元素的显示模式 —— 布局认知
   3.1 什么是元素显示模式
   1：什么是元素显示模式？
   o元素以什么方式进行显示
   oHTML 一般有两种显示模式
   2：猜一猜块元素和行内元素有什么特点？
   o块元素独占一行显示
   o行内元素可以一行显示多个
   3.2块元素 —— block

1：块级元素有什么特点？
1.独占一行
2.可以设置宽度、高度、外边距、边框和内边距
3.宽度默认是父级容器的宽度
4.可以存放其他行内元素和块级元素
2：块级元素有什么注意事项？
1.开发时不要在文本类元素中添加其他元素，专注于文本存放（h1~h6、p）
3：常见的块级元素有哪些？如何验证？
1.div、ul、ol、li、h1~h6、p
2.在 HTML 中添加一个盒子，在 Chrome 调试器中验证是否具有块级元素特征

3.3 行内元素 —— inline
1：行内元素有什么特点？
1.相邻行内元素在一行显示，一行多个
2.给行内元素设置宽高是无效的
3.默认宽度是内容的宽度（被内容撑开）
4.只能容纳文本或其他行内元素
2：行内元素有什么注意事项？
1.链接不能再放链接
2.特殊情况的链接可以存放块级元素
3：a 标签中能够放块级元素吗？应用场景是什么？
1.特殊情况下可以存放块级元素
2.应用场景：在电商网站点击商品列表项跳转到商品明细项

3.4 行内块元素 —— inline-block
1：行内块元素有什么特点？
1.相邻行内元素在一行显示，一行多个（行内元素特点）
2.默认宽度就是本身内容的宽度（行内元素特点）
3.可以设置宽度、高度、外边距、边框和内边距（块级元素特点）
2：我们现在学习过的标签中，有那三个是行内块元素？
1.img、input、td
3.5 元素显示模式总结

元素模式 英文 排列方式 指定宽高
块级元素 block 一行一个 可以
行内元素 inline 一行多个，内容撑开 不可以
行内块元素 inline-block 一行多个 可以

3.6 显示模式的转换
 1：显示模式转换的应用场景是什么？
o让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
o让块元素一行显示：把块元素转换成行内块元素
2：三种显示模式转换的代码是什么？哪两个比较重要？
odisplay: block 转换为块元素
odisplay: inline-block 转换为行内块元素
odisplay: inline 转化为行内元素（使用较少）

3.8 单行文字垂直居中

1：如何实现单行文字的垂直居中？
将 line-height 设置为盒子的高度。
4. 背景图片
4.1 背景颜色
 1：CSS 中背景相关的属性多吗？
o多
2：一般情况下元素的背景颜色是什么？
otransparent 透明的
4.2 背景图片
1：背景图片的应用场景是什么？
1.logo
2.装饰图片
3.超大图片
4.精灵图（雪碧图）
2：背景图片有什么优点？
1.非常容易控制位置
3：背景图片的语法是什么？

background-image: none | url(url);

4：指定背景图片的 url 时需要引号吗？
不需要、不需要、不需要
4.3 背景平铺
1：在使用背景图片时，默认背景是平铺的吗？
o默认是平铺的
2：背景平铺 background-repeat 有哪些属性？
参数 说明
repeat 默认，水平垂直平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
3：使用了背景图片还能再指定背景颜色吗？
可以
4.4 背景位置-方位名词
1：哪一个属性可以改变图片在背景中的位置？
obackground-position (背景位置)
2：使用方位名词指定背景图片位置有顺序要求吗？
o没有
o因为从方位名词能够分清方向
3：方位名词都分别对应哪些方位？
o水平方向：left / right / center
o垂直方向：top / bottom / center
4：如果指指定了一个方位名词，第二个值默认如何对齐？
o居中对齐
5：如何让背景图片水平垂直居中？
obackground-position: center;

4.7 背景位置-精确单位
1：使用精确坐标指定背景图片有顺序要求吗？
有
第一个值一定是 x / 第二个值一定是 y
2：如果只指定了一个值，是哪个方向的值？另一个方向呢？
ox 方向的
o垂直方向居中显示
4.8 30-背景位置-混合单位
指定背景图片可以混合使用单位吗？顺序有没有要求？
可以
第一个值一定是 x / 第二个值一定是 y
4.9 背景固定
 1：背景固定的应用场景是什么？
o可以制作视差滚动效果
2：background-attachment 有哪两个参数？分别代表什么含义？
oscroll 默认，背景图像跟随滚动
ofixed 背景图像固定
4.10 背景属性复合写法
1：我们已经学过了哪个属性的复合写法？
ofont: font-style font-weight font-size/line-height font-family
2：背景属性的复合写法有顺序要求吗？
o没有
o但是推荐顺序是：background: color image repeat attachment position
3：背景属性的复合写法在开发中用的多吗？每次都要写全吗？
o多
o不需要每次都要写全，需要啥就写啥
4.11 背景颜色半透明
 1：使用 background-color 能够设置背景颜色半透明吗？为什么？
o可以 background: rgba(0, 0, 0, 0.3); 本质上就是在设置背景颜色。
2：rgba 中的 alpha 取值范围是多少？
o取值范围：0 ~ 1
o0 完全透明 / 1 完全不透明
4.12 背景总结
属性 作用 值
background-color 颜色 颜色 / #f00 / rgba(red, green, blue, alpha)
background-image 图像 url(图片路径)
background-repeat 平铺 repeat / no-repeat / repeat-x / repeat-y
background-position 位置 x, y / left right center top bottom center
background-attachment 附着方式 scroll / fixed
复合写法推荐顺序：background: color image repeat attachment position