浮动
float:left(right)
特性:脱离正常文档流
正常文档流:自上而下,从左往右
解决浮动塌陷问题
1、在父容器内设置css
overflow:hidden;
2、在父容器最底部加上一个空div
<div style="clear=both"></div>
3、在父容器内设置css
.parent:after{
content: '';
height: 0px;
display: block;
clear: both;
}
:after 和 :beforev i
:after 在元素后面添加内容 content设置其内容
:before 在元素的前面添加内容 content设置其内容
选择器
基本选择器
1、类选择器
2、ID选择器
3、标签选择器
优先级 :
ID选择器>类选择器>标签选择器
行内样式>内部样式>外部样式
高级选择器
1、层次选择器
a、后代选择器
E F{
}作用范围:选择器E里面的所有选择器F(包含子类以及间接子类)
b、子代选择器
E>F{
}作用范围:选择器E里面的所有子选择器(只能作用于子类 不能使间接子类)
c、相邻兄弟选择器
E+F{
}作用范围:紧紧位于选择器E的后面的选择器F(同一父元素下,一定是相邻且在选择器E的后面)
d、通用兄弟选择器
E~F{
}作用范围:跟在选择器E后面所有的选择器F(同一父元素下,所有跟在E后面的F)
2、结构伪类选择器
a、非指定类型的子元素
选择器 E F:first-child{
//第一个子类
}
选择器 E F:last-child{
//最后一个子类
}
选择器 E F:nth(n){
//指定第几个 n是具体数值 也可以是表达式
}
** 注意:如果子类中有非F的 也计算其内
b、指定类型的子元素
选择器 E F:first-of-type{
//第一个子类
}
选择器 E F:last-of-type{
//最后一个子类
}
选择器 E F:nth-of-type(n){
//指定第几个 n是具体数值 也可以是表达式
}
** 注意:如果子类中有非F的 不计算计算其内
3、属性选择器
选择器E[name]{
作用于E元素内含有name属性
}
选择器E[name=?]{
作用于E元素内含有name属性 且值为?
}
选择器E[name^=a]{
作用有E元素内含有name属性,且值为a开头
}
选择器E[name$=a]{
作用于E元素内含有name属性,且值为a结尾
}
选择器E[name*=a]{
作用于E元素内含有name属性,且值内含有a
}
总结
学习了浮动和选择器的分类,使自己在css样式的应用上有更多的选择,也能控制与实现更多的页面结构。