任务一绘制背景

1. Base64(用这个办法，图片加载的会快一点。而且每个照片都有自己唯一的base64编码)

   background-image: url(data:image/jpg;base64,编码) 引用背景时
   <img src="data:image/jpg;base64,编码)直接在body中引用照片时

2. 控制背景图像绘制区域

   • 绘制到元素边框 ( border-box )

   • 绘制到元素内边距( padding-box )

   • 仅绘制到元素内容区 ( content-box )

3. 控制元素背景（复合格式,此顺序可以调动）

   background：color image repeat attachment position

任务二列表

1. 控制列表项目标记的位置（就无序列表前面的那个常见的点）

   list-style: outside | inside | none;
               内容的外面  内容的里面  没有
               （默认外面）

2. 在浮动中注意的点

   先后顺序要想不变，先把父<ul>浮动设置好。

3. 无序列表前面的样式控制 list-style-type,用图片也能充当

   list-style-type: decimal;
   list-style-image: url(img/1.png);
   复合属性设置 type 、position 、image  （顺序不能变）

任务三 表格

1. 表格边框的合并 boder-collapse

   border-collapse: collapse | separate;
                    合并        不合并

2. 控制表格标题位置caption

   caption{
       caption-side: bottom | top;
   }
   ..
   <caption>我是标题</caption>

3. 空单元格的处理

   empty-cells:hide;
   （空单元格不显示）

4. ·控制表格布局算法 table-layout

   table-layout: fixed;|auto
   fixed:单元格大小在没有内容时就规定好了。就算内容多到溢出也不改变。
   auto；默认值，会随内容的多少而变化。

5. 注释

   • 整个表table是有margin的。td没有margin.

   • 表格渲染执行时要计算，div时根据所写的样式一行一行的渲染执行。

任务四 转换和过渡（动态效果）Transform

1. 移动translate

2. 放大scale

3. 旋转 rotate

4. 倾斜 skew(单位deg)

   .img:hover{
               transform: translateX(5px);向x轴偏移5像素
               transform: translateY(-10px);向y轴负方向偏移10像素
               transform: translate(15px,-15px);复合（x，y）
               transform: scale(1.5,1);放大的复合写法（x,y）
               transform: rotate(360deg);x,y没写，就是旋转了360度。
               transform: skew(60deg);  x,y各倾斜了60度。
               transform: scale(1.5,1) rotate(360deg); 复合写法。
             }

任务五 派生选择器

1. 组合选择器 使用逗号分隔选择器，同时都能增加效果

   .mydiv,#sapn1{
                   color: pink;
               }

2. 后代选择器

   .mydiv,#sapn1{
                   color: pink;
                }

3. 亲子选择器

   .mydiv>h1{
                   color: palevioletred;
           }
   连接父元素选择器和子元素选择器
   亲儿子才行，亲孙子都不行

4. 兄弟选择器

   • 紧邻兄弟选择器（紧挨着并且同父）（使用+连接）

     p+ul{
                     color: pink;
         }

   • 一般兄弟选择器（紧挨，不紧挨都行）（使用~连接）

     p~ul{
                     color: pink;
         }

5. 选择器并列（并且关系，两个或多个条件都要满足，不用任何符号分割，同时满足）

   div.first{
                    color；pink
          }

   任务六 UI状态伪类

   1. ：enable 可用状态

   2. ：disable 不可用状态

   3. : checked选中状态

      input:enabled{                         input标签在（enable）可用状态下
                    background-color: blue;
              }
      input[type="button"]:disabled{         input标签中type中button在disable(不可用)状态下
                   background-color: pink;
              }

任务七 选择器优先级以及权重的计算

1. 千位：如果声明在<style>中的属性，该位得一分

2. 百位：选择器中包含id选择器，在该位加一分

3. 十位：类选择器，属性选择器，伪类选择器 在该位加一分

4. 个位：包含元素、伪元素该位加一分

任务八 注释

1. 外轮廓是不占位置的,不算容器的宽度.

2. 取掉外轮廓的设置

   input:focus{
   outline:none
   }

3. utf-8中,英文字母通常1字节,汉字3字节.很生僻的汉字就是4字节.

标签：pink,知识点,补漏,color,image,transform,查缺,input,选择器
来源： https://blog.csdn.net/m0_46331585/article/details/119342126