第五十六 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取负值

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

上一篇:MPEG1的码流层次与各层次的作用


下一篇:Linu 修改maven的setting保护文件