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数值
注:相对定位不释放原位置,不脱离流,后面元素不会占据相对定位原位置;而浮动定位、绝对定位、固定定位会释放原位置,脱离流,后面元素会占据定位原位置。