1.结构伪类:
1.1 结构伪类选择器:
作用:根据元素在HTML中的结构关系查找元素;
优势:减少对于HTML中类的依赖,有利于保持代码整洁;
场景:常用于查找某父级选择器中的子元素
1.2 选择器:
主意:选择器中E:nth-child(n){}中的n可以为公式,例如:选中偶数则n为2n(even),选中奇数则n为2n+1/2n-1(odd);选中前五个则n为-n+5;
1.2 伪元素:
伪元素:一般页面中的非主体内容可以使用伪元素;
区别元素:元素是由HTML设置的标签;伪元素是由CSS=模拟出的标签效果;
种类:
注意:必须设置content属性才能生效;伪元素默认是行内元素
2.浮动:
2.1 浮动的作用:
早期:图文环绕;
现在:网页布局(块标签在一行排列);
2.2 浮动的代码:
float:left;(左浮动)
float:right;(右浮动)
2.3 浮动的特点:
2.3.1 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置(相当于从地面飘到了空中)
2.3.2 浮动元素比标准流高半个级别,可以覆盖标准流中的元素;
2.3.3 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动;
2.3.4 浮动元素有特殊的效果显示效果(一行可以显示多个,可以设置宽高,即类似行内块元素);
注意:浮动的元素不能通过text-align:center或者margin:0 auto
2.4 浮动失效:当父级的宽度不够,那么子级会自动换行;
补充:CSS书写顺序:浏览器的执行效率会更高
1. 浮动/display;
2. 盒子模型:margin,border,padding,宽度高度背景色;
3. 文字样式
3.清除浮动:
3.1 含义:清除浮动带来的影响;
影响:如果子级元素浮动了,父级元素没有设置高度,那么后面的标准流盒子会受
影响,会显示到上面的位置;
3.2 原因:子元素浮动后脱标,不占位置;
3.3 目的:需要父元素有高度,从而不影响其他网页元素的布局
3.4 解决方法:
3.4.1. 给父元素设置高度(优点:简单粗暴;缺点:有些布局中不能固定父元素的高度。例如:新闻列表、京东推荐模块);
3.4.2. 额外标签法:
1. 在父元素内容的最后添加一个块级元素(一般给其class设置为clearfix)
2. 给添加的块级元素设置clear:both(清楚左右两侧浮动的影响);
缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂
3.4.3 单伪元素清除法:
操作:用伪元素代替了额外标签;
基本写法:
补充写法:(为了兼容性,高版本浏览器没有这个问题)
补充:伪元素要加content,不然显示不出来
3.4.4 双伪元素清除法:
写法:
补充:下面的.clearfix::after才是真正的清除浮动的代码,上面的。clearfix::before,clearfix::after是解决外边距塌陷问题的;所以当产生外边距塌陷问题是调用clearfix也能解决;
3.4.5 给父元素设置overflow:hidden;
操作:直接给父元素设置overflow:hidden;即可
优点:方便;