结构伪类选择器

选择器	说明
E:first-child{}	匹配父元素第一个子元素，并且是E元素
E:last-child{}	匹配父元素最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中的第n个元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个元素，并且是E元素

功能	公式
偶数	2n、even
奇数	2n-1、2n+1、odd
找到前5个	-n+5
找到从第五个往后	n+5

伪元素

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后面添加一个伪元素

• 必须设置content属性才能生效
• 伪元素默认是行内样式

标准流

名词解释

又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了以何种方式排列元素

常见标准流排版规则

块级元素：从上往下、垂直布局、独占一行 行内元素或行内块元素：从左至右、水平布局、空间不够自动换行

浮动

浮动的代码

div {
  float: left
  float: right// [!code --]//不能共存
}

浮动的效果

浮动的特点

• 浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右排列

CSS书写顺序

1. float/position/display

2. 盒子模型(margin、padding、borde)

3. 文字样式

清除浮动

直接设置父元素高度

相关信息

父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置

额外标签法

单伪元素清除法

双伪元素清除法

父元素设置overflow属性

小结

方法	操作	优点	缺点
直接设置父元素高度	父元素设置高度	简单粗暴、方便	有些布局不能固定父元素高度
额外标签法	1.在父元素内容的最后添加一个块级元素 2.给添加的块级元素设置clear:both		会添加额外标签，使得HTML结构复杂
单伪元素清除法	用一个伪元素替代额外标签	项目中使用，直接给标签添加类即可清除浮动
双伪元素清除法	使用两个伪元素清除浮动	项目中使用，直接给标签加类即可清除浮动
父元素设置overflow		方便