结构伪类选择器找到偶数、奇数个li标签
-
偶数个li标签
- li:nth-child( 2n ) { css }
- li:nth-child( even ) { css }
-
奇数个li标签
- li:nth-child( 2n+1 ) { css }
- li:nth-child( odd ) { css }
浮动的作用
-
早期的作用
- 图文环绕
-
现在的作用
-
网页布局
- 让垂直布局的盒子变成水平布局
-
浮动元素的特点
-
1、浮动之后会脱标，在标准流中不占位置
-
2、浮动的元素层级比标准流层级高出半个级别，可以覆盖标准流的元素
-
3、浮动找浮动，下一个浮动的元素会在上一个浮动元素的后面进行左右浮动
-
4、浮动元素会受上方元素边界的影响
-
5、浮动元素会有特殊的（行内块元素的）显示效果
- 1、一行可以显示多个
- 2、可以设置宽高
常见的清除浮动方法
-
1、给父元素设置高度
-
2、额外标签法
- 浮动元素的后面添加div(clear:both)
-
3、单伪元素清除法
-
4、双伪元素清除法
-
5、给父元素设置overflow:hidden
结构伪类选择器
-
匹配父元素中的第一个子元素E
- E:first-child{}
-
匹配父元素中的最后一个子元素E
- E:last-child{}
-
匹配父元素中的第n个子元素E
-
E:nth-child(n) {}
-
拓展
-
括号里面可以写一个带n的式子
- n：0,1,2,3,4,5.....
-
偶数
- E:nth-child(2n) {}
- E:nth-child(even) {}
-
奇数
- E:nth-child(2n+1) {}
- E:nth-child(2n-1) {}
- E:nth-child(odd) {}
-
找到前5个
- E:nth-child(-n+5) {}
-
找到从第5个开始往后
- E:nth-child(n+5) {}
-
-
注意点
- li*12>a 中，如果需要找到第一个a，结构伪类选择器注意不要写错！！！
- li:first-child a { css }
-
-
匹配父元素中倒数的第n个子元素E
- E:nth-last-child(n){}
-
匹配父元素中同类型子元素中的第n个
- E:nth-of-type（n）{}
伪元素
-
假的元素
- 一般页面中的非主体内容中可以使用伪元素
-
区别
-
元素
- html设置的标签
-
伪元素
- 由css模拟出来的标签效果
-
-
种类
-
::before
- 在父元素内容的最前面添加一个伪元素
-
::after
- 在父元素内容的最后添加一个伪元素
-
-
注意点
-
1、有一个必加的属性
- content：‘伪元素中的内容’；
-
2、默认是行内元素
-
标准流
-
又称：文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
-
常见排版规则
-
1、块级元素
-
从上往下
- 垂直布局
- 独占一行
-
-
2、行内元素和行内块元素
-
从左往右
- 水平布局
- 空间不够自动折行
-
-
浮动
-
作用
-
早期的作用
- 图文环绕
-
现在的作用
- 用于布局
- 让垂直布局的盒子变成水平布局，如：一个在左，一个在右
-
-
代码
-
float：left
- 左浮动
-
float：right
- 右浮动
-
-
浮动的特点
-
1、浮动的元素会脱离标准流
- 相当于飘到了空中
- 在标准流中就不占位置
-
2、浮动的元素比标准流高出半个级别
- 可以覆盖标准流中的元素
-
3、浮动找浮动
- 下一个浮动元素会在上一个浮动元素后面左右浮动
-
4、浮动会受到上面元素边界的影响
-
5、浮动的元素有特殊的显示效果
- 1、一行可以显示多个
- 2、可以设置宽高
-
注意点：浮动的元素不能通过text-align：center或者margin：0 auto，让浮动的元素水平居中
-
-
（案例）网页布局案例
-
（案例）小米模块案例
-
（案例）网页导航案例
清除浮动
-
含义
-
清除浮动带来的影响
-
影响
- 如果子元素浮动，此时子元素不能撑开标准流的块级父元素。
-
-
清除浮动的方法
-
1、直接设置父元素的高度
-
2、额外标签法
- 1、在父元素的最后添加一个块级元素
- 2、需要给添加的块级元素设置清除浮动的核心代码：clear：both
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
-
3、单伪元素清除法
-
用伪元素替代了额外标签
- ::before ...之前
- ::after ...之后
- 两个::是css3的规范，如果要兼容老版本的浏览器，一般使用的是:
-
代码
.clearfix::after {
content: ''; display: block; clear: both;}
-
content：‘’；
- 伪元素必加的属性
-
display：block
- 伪元素默认是行内元素，需要转换成块级元素
-
clear:both
- 清除浮动的核心代码
-
补充的代码（作用：就是在页面中看不到伪元素）
-
height：0；
-
visibility：hidden
- 元素隐藏
-
-
-
-
4、双伪元素清除法
-
作用
- 1、清除浮动
- 2、解决外边距折叠的塌陷现象
-
代码
.clearfix::before,
.clearfix::after {
content: ""; display: table;}
.clearfix::after {
clear: both;}
-
-
5、给父元素设置一个overflow：hidden
-
（拓展补充）BFC
-
概念
- 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
-
创建BFC方式
-
1、html标签
-
2、浮动元素
-
3、overflow取值不为visible
- 如：overflow:hidden
-
......
-
-
特点
-
BFC是一种块级元素的布局空间，在BFC这个布局空间中存在以下两个特点：
-
1、BFC盒子会默认包裹住内部子元素（标准流、浮动）
- 应用：清除浮动
-
2、BFC盒子与子元素之间不存在margin的塌陷现象
- 应用：解决margin的塌陷
-
......
-
