前端第三天

1. chrome调试工具
   1. 右键检查打开调试工具
   2. Ctrl+滚轮可以放大开发者工具代码大小
   3. 左边是HTML元素结构，右边是CSS样式
   4. 右边CSS样式可以改动数值和查看颜色
   5. Ctrl+0复原浏览器大小
   6. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
   7. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
2. Emmet语法
   前身是Zen coding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法
   1. 快速生成HTML结构语法
      1. 生成标签：直接输入标签名，按tab键即可
      2. 生成多个相同标签：加上*就可以了，比如div*3
      3. 父子级关系的标签：可以用>，比如ul>li就可以了
      4. 兄弟关系的标签：用+就可以了，比如div+p
      5. 生成带有类名或者id名字的：直接写.demo或者#two tab就可以了
      6. 生成的div类名是有顺序：可以用自增符号$
      7. 在生成的标签内部写内容可以用{}表示
   2. 快速生成CSS样式语法
      CSS基本采取简写形式即可
      1. 比如w200 按tab 可以生成width：200px；
      2. lh26 按tab 可以生成line-height：26px；
   3. 快速格式化代码
      1. 右键格式化文档
3. CSS复合选择器
   在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
   1. 复合选择器可以更准确、更高效的选择目标元素（标签）
   2. 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
   3. 常用的复合选择器包括：
      1. 后代选择器
         后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代

         <style>
                 ol li {
                     color: pink;
                 }
         </style>

         语法规范：

         元素1 元素2 {样式声明}

         上述语法表示选择元素1里面的所有元素2（后代元素）
         元素1和元素2中间用空格隔开
         元素1是父级，元素2是子级，最终选择的是元素2
         元素2可以是儿子，也可以是孙子等，只要是元素1的后代就行
         元素1和元素2可以是任意基础选择器（即可以是类的意思）

      2. 子选择器
         只能选择作为某元素的最近一级子元素
         语法：

         元素1>元素2{样式声明}

         上述语法表示选择元素1里面的所有直接后代（子元素）元素2
         元素1和元素2中间用>隔开
         元素1是父级，元素2是子级，最终选择的是元素2
         元素2必须是亲儿子，其孙子、重孙之类都不归他管

      3. 并集选择器
         可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
         并集选择器是通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分
         语法：

         元素1，元素2{样式声明}

         元素1和元素2之间用逗号隔开
         逗号可以理解为和的意思
         并集选择器通常用于集体声明

      4. 伪类选择器
         用于向某些选择器添加特殊的效果，比如给连接添加特殊效果，或选择第1个，第n个元素
         伪类选择器书写最大的特点是用冒号(:)表示，比如：hover
         因为伪类选择器很多，比如有链接伪类、结构伪类等
         1. 链接伪类选择器
            语法：

            a:link --选择所有未被访问的链接
            a:visited  --选择所有已被访问的链接
            a:hover --选择鼠标指针位于其上的链接
            a:active --选择活动链接（鼠标按下未弹起的链接）

            注意事项：

            1. 为了确保生效，请按照lvha的顺序来写

            2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

         2. ：focus伪类选择器
            ：focus伪类选择器用于选取获得焦点的表单元素
            焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

            input:focus {
                background-color:yellow;
            }

   4. 复合选择器总结

      选择器	作用	特征	使用情况	隔开符号及用法
      后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格
      子代选择器	选择最近一级元素	只选择亲儿子	较少	符号是>
      并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是，
      链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover
      ：focus选择器	选择获得光标的表单	跟input类相关	较少	input：focus

4. CSS的元素显示模式

   1. 作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
      定义：元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占一行，比如一行可以放多个span
      HTML元素一般分为块元素和行内元素两种

   2. 块元素
      常见的块元素有<h1>~<h6>等

      1. 特点：

         1. 独占一行

         2. 高度，宽度，外边距以及内边距都可以控制

         3. 宽度默认是容器（父级宽度）的100%

         4. 是一个容器及盒子，里面可以放行内或者块级元素

      2. 注意：

         1. 文字类的元素内不能使用块级元素
            <p>标签主要用于存放文字，因此这里面不能放块级元素，同理<h1>这种标题标签也是文字类标签

   3. 行内元素

      1. 特点：

         1. 相邻行内元素在一行上，一行可以显示多个

         2. 高、宽直接设置是无效的

         3. 默认宽度就是它本身内容的宽度

         4. 行内元素只能容纳文本或其他行内元素

      2. 注意：

         1. 链接里面不能再放链接

            特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
   4. 行内块元素
      在行内元素中有几个特殊的标签——<img/> <input/> <td>，它们同时具有块元素和行内元素的特点
      1. 特点：
         1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
         2. 默认宽度就是它本身内容的宽度（行内元素特点）
         3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）
   5. 元素显示模式总结

      元素模式	元素排列	设置样式	默认宽度	包含
      块级元素	一行只能放一个会计元素	可以设置高度宽度	容器的100%	容器级可以包含任何标签
      行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
      行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

   6. 元素显示模式转换
      特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
      比如想要增加链接<a>的触发范围
      转换为块元素：display:block;
      转换为行内元素：display:inline;
      转换为行内块：display:inline-block;

   7. 单行文字垂直居中的代码
      CSS没有给我们提供文字垂直居中的代码，我们可以用一个小技巧来实现
      解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
      文字的行高使用line-height：来调整

5. CSS的背景
   通过CSS背景属性，可以给页面元素添加背景样式
   背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

   1. 背景颜色
      background-color属性定义了元素的背景颜色

      background-color:颜色值；

      一般情况下元素背景颜色默认值是transparent，我们也可以手动指定背景颜色为透明色

   2. 背景图片
      background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

      background-image:none | url(url);

      参数值	作用
      none	无背景图（默认的）
      url	使用绝对或相对地址指定背景图像

   3. 背景平铺
      如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

      background-repeat:repeat | no-repeat | repeat-x | repeat-y;

      参数值	作用
      repeat	背景图像在纵向和横向上平铺（默认的）
      no-repeat	背景图像不平铺
      repeat-x	背景图像在横向上平铺
      repeat-y	背景图像在在纵向平铺

   4. 背景图片位置
      利用background-position属性可以改变图片在背景中的位置

      background-position:x y;

      参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

      参数值	说明
      length	百分数|由浮点数字和单位表示服组成的长度值
      position	top | center | bottom | left | right 方位名词

      1. 参数是方位名词
         如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样
         如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

      2. 参数是精确单位
         如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
         如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

      3. 参数是混合单位
         如果指定的两个值是精确单位和方位名词混合使用，则第一个是x坐标，第二个是y坐标

   5. 背景图像固定（背景附着）
      background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
      后期可以做视察滚动的效果

      background-attachment:scroll | fixed
      

      参数	作用
      scroll	背景图像是随对象内容滚动
      fixed	背景图像固定

   6. 背景复合写法
      为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量
      一般习惯约定顺序为：background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

   7. 背景色半透明

      background: rgba(0,0,0,0.3);

      最后一个参数是alpha透明度，取值范围在0～1之间
      只是让盒子的背景色变透明，不会让盒子里面的文字和内容变透明

   8. 背景总结

      属性	作用	值
      background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
      background-image	背景图片	url（图片路径）
      backgroud-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
      background-position	背景位置	length/position 分别是x和y坐标
      background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
      背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
      背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);