css选择器
选择器使用的原因
要使用css实现对页面元素实现 一对一 一对多 多对一 的控制
基础选择器
- 通配符选择器 *
- 标签选择器 :
- 类选择器
- id选择器
- 群组选择器
层次选择器
- S1 > S2 :父子选择器
- S1 S2: 后代选择器
- S1+S2 兄弟选择器
伪类选择器
link visited hover active
样式表的优先级
同一个属性:
important > 行内样式 > 内部style中的样式 > 引入的样式
采用的“就近原则”(添加important样式除外 )如果同时添加important还是采用“就近原则”
浮动属性
浮动的作用:
- 定义页面中其他文本如何该元素显示
- 让竖着的元素横着来(可以并排显示)— 浮动脱离文档流
浮动属性
div {
float: right // 右侧浮动
}
p{
float: left// 左侧浮动
}
h1{
float: none// 不浮动
}
清除浮动
清除浮动只是改变元素的排列方式,该元素还是漂浮这个,不占据文档流
为什么要清除浮动
是因为使用float的元素,都会存在高度塌陷,这个时候,下面的元素就会顶上来
clear:none 允许有浮动元素
clear:right 不允许右边有浮动元素
clear:left 不允许左边有浮动元素
clear:both 不允许有浮动对象
使用场景
举例: 希望有两个div元素并排展示,但是下面的元素没有顶上来,还是原位置上 这个时候就可以使用清除浮动
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="nextDiv"></div>
div {
width: 200px;
height: 200px;
}
.one {
float: left;
background-color: red
}
.two {
float: left;
background-color: yellow
}
.nextDiv{
width: 500px;
height: 300px;
backround-color: black
}
解决高度塌陷
- 添加高度
- 清浮动方案 clear clear 是添加给后面的兄弟
- 当前浮动元素后面添加一个div
- 给父元素添加一个 overflow: hidden
添加高度
.container {
height: 200px
}
清除浮动
.nextDiv {
clear: left
}
添加一个div
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div style="clear: left"></div>
</div>
<div class="nextDiv"></div>
添加overflow
.container {
overflow:hidden
// overflow:hidden 引发了bfc(块级作用域)他能够实现自动计算高度
}