第五十六 css选择器和盒模型

1.组合选择器

群组选择器

#每个选择为可以位三种基础选择器任意一个，用逗号隔开，控制多个。

div,#div,.div{

color:red

}

后代（子代）选择器

.sup .sub{

后代

}

.sup .sub{

后代

}

.sup > .sub{

子代

}

兄弟（相邻）选择器

.up~.down{

兄弟

}

.up + .down{

相邻

}

交集选择器

section.ss#s{

标签类名id名综合修饰

}

2.复杂选择器的优先级

　　 1.与修饰符位置无关

　　2.属性选择器与类选择器权重相同

　　3.id 无限大于 类[属性]  无限大于 标签

　　 4.权重只与个数相关，个数（类型）均相同时，最后由位置决定

3.伪类选择器

　　链接标签四大伪类

　　：hover(悬浮）| ：active(点击）

　　：link       |  visited

　　位置相关

　　：nth-child()  |  :last-child 先确定位置再匹配类型

　　：nth-of-type() 先匹配类型再确定位置

　　取反

　　选择器：not(修饰词)  |  div:not(:nth-child(2))

4.盒类型

　　margin + border + padding +content(width x height)

　都具有自身区域

　　marigin参与布局，不参与盒子显示，其他都参与盒子显示

　　border颜色自身定义，padding和content颜色都由背景色填充

　　#整体设置

　　padding:上 右  下 左（无边取值对边）

#分开设置

　　padding-top: 10px;

　　padding-right: 10px;

　　padding-bottom： 10px;

　　padding-left:  10px;

　　#整体设置

　  border:  10px solid black;

# 分开设置

　　border-top: 10px solid black;

　　border-reght: 10px solid black;

　　border-bottom: 10px solid black;

　　border-left: 10px solid black;

　　如何要保证显示区域大小不变，增加padding和border，可以相应减小content的区别域

5.盒模型布局

　　完成自身布局：margin-left  |  margin-top

　　下移|右移： top取正值|left取正值

　　上移|左移： top取负值|left取负值

　　作为兄弟，上盒子的垂直布局会影响下盒子的垂直方位，上盒子的结数为为下盒子的开始位置。