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取负值
作为兄弟，上盒子的垂直布局会影响下盒子的垂直方位，上盒子的结数为为下盒子的开始位置。