2023 11.19笔记

1. 权重问题：
   标签选择器：0001
   class选择器：  0010
   id选择器：0100
   伪类选择器：0010
   包含选择器：权重之和
   属性选择器：0010
   伪元素选择器：0001
   内联样式：1000

2. 字体相关样式：
   font-style: italic;  是否斜体
   font-weight: 900;  粗细
   font-size: 10px;  大小
   ont-family: "微软雅黑"; 

3. 文本相关的样式：
   text-indent: 2em;  首行缩进
   width: 800px;
   height: 200px;
   background-color: aqua;
   text-align: right/center;  文字  
   line-height: 200px;  行高
   
 4. 文本装饰：
    text-decoration: line-through; 链接删除线
    text-decoration: none;  去除链接下划线
    color：red;  文字颜色
    opacity: 0.2;  透明度

 5. 列表相关样式：
    list-style-type: none;  删除列表装饰
    list-style-type: circle;  圆圈
    list-style-image: url(  );  图片作为列表样式
    list-style-position: inside;

 6. 背景：
    body {
         height: 3000px;
         background-color: aqua;  背景颜色
         background-image: url(../  );  背景图片
         background-repeat: repeat-y/no-repeat;
         background-position: left top 
         background-attachment: fixed;  滑动但位置不变       
         background-size: cover;  强行铺满
         }
         margin: 0 auto;  水平居中

 7. 文本方向：
    div {
            direction: rtl;
        }

 8. 隐藏元素：
    display: none;  完全消失
    visibility: hidden;  空间保留
    opacity: 0; 

 9. 元素：块元素、行内元素、行内快元素
    块元素：默认独占一行，设置宽高、设置内外边距   div、h1~h6、p、li
    行内元素：无法直接设置宽高、内外间距   a、span
    行内块元素：可以直接设置宽高、不会独占一行   img、input
    display: block;  将其他元素转换为块元素
    display: inline-block;  变为行内块元素

 10. 边框：
     border-width: 20px;  边框厚度
     border-style: double/solid/dotted;  边框样式
     border-color: black;  
     border: 1px solid red;  连写
     border-radius: 50% 50px;  边框弧度

 11. 表格：
     cellspacing="0"  间距（用于body）
     border-collapse: collapse;  消除表格间隙
     td {
         width: 100px;
         height: 50px;
         border: 1px solid black;
         text-align: center;
         color: pink;
         text-decoration: underline;
         }

 12. 文本域：
     textarea {                 
              width: 300px;
              height: 70px;
              resize: none;  不可放大缩小  
              }
     <form action="">
        <textarea name="" id="" cols="30" rows="10"></textarea>
     </form>
     div {
         width: 300px;
         height: 300px;
         background-color: pink;
         cursor: cell;  鼠标样式
         }
 13. <style>
        .father {
            position: relative;
            width: 900px;
            height: 400px;
            background-color: aqua;

        }

        .son1 {
            position: absolute;
            top: 200px;
            right: 0px;
            z-index: 1;  谁在上谁在下
            background-color: blue;
        }

        .son2 {
            position: absolute;
            top: 150px;
            right: 0px;
            background-color: blueviolet;
        }
     </style>
     <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
     </div>

 14. 固定定位：
     div {
            position: fixed;  永远停在页面某个位置
            bottom: 15px;
            right: 10px;
            width: 300px;
            height: 300px;
            background-color: black;
         }

 15. 粘性定位：
    .class名 {
             position: sticky;
             top: 20px;
             background-color: aqua;
             }