结构伪类选择器
- 匹配父元素中的第一个子元素E
E:first-child{}
- 匹配父元素中的最后一个子元素E
E:last-child{}
- 匹配父元素中的第n个子元素E
E:nth-child(n) {}
- 拓展
- 括号里面可以写一个带n的式子
- 偶数
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的规范，如果要兼容老版本的浏览器，一般使用的是:
代码
content：‘’；
伪元素必加的属性
display：block
伪元素默认是行内元素，需要转换成块级元素
clear:both
清除浮动的核心代码
补充的代码（作用：就是在页面中看不到伪元素）
height：0；
visibility：hidden
元素隐藏
- 4、双伪元素清除法
作用
1、清除浮动
2、解决外边距折叠的塌陷现象
代码
- 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的塌陷
......
