2021-11-01

CSS

1、基本选择器

（1）元素选择器【div{}】

（2）ID选择器【#id{}】

（3）类选择器【class.class{}】

注：可根据元素任意属性选择元素，自行学习

2、组合

（1）组合选择器【div.class{}】

（2）选择器组【基本选择器，基本选择器{}】

（3）后代选择器【组元素 后代元素{}】

（4）伪类选择器

注：伪类选择器可以获取第几个元素

1、流定位（默认定位方式）
            div{
               width:200px;
               height:200px;
            }
            #div1{
                background:red;
            }
            #div2{
                background:blue;
            }
            #div3{
                background:green;
            }
2、浮动定位（元素横向移动，靠左或靠右）
            div{
               float:left;
            }
3、相对定位（元素与原位置发生微量变化）
            img:hover{
               /*实现元素与原来位置细微移动*/
               position:relative;
               left:10px;
               bottom:10px;
            }
4、绝对定位（元素与原位置发生巨大变化）
            div{
               width:600px;
               height:400px;
               position:relative;
            }
            img{
               position:absolute;
               left:300px;
               top:200px;
            }
注：相对定位以自身为参照，绝对定位以父辈或祖辈为参照，绝对定位参照物需添加position：relative属性，若父辈或祖辈都无此属性，则绝对定位以body为参照。
5、固定定位（元素固定在页面中，位置不变，不跟随页面滚动。）
            div{height:100px}
            #tops{
                position:fixed;
             }
6、堆叠（元素发生遮挡，选择元素显示优先级，数值越大优先级越高）
            z-index数值


注：相对定位不释放原位置，不脱离流，后面元素不会占据相对定位原位置；而浮动定位、绝对定位、固定定位会释放原位置，脱离流，后面元素会占据定位原位置。