CSS进阶-浮动

结构伪类选择器

根据元素在HTML中的结构关系查找元素

优势：减少对HTML中类的依赖
场景：常用于查找某父级选择器中的子元素

• 选择器

选择器	说明
nth-child(n){}	匹配父元素的第n个元素
nth-last-child(n){}	匹配父元素的倒数第n个元素

n的注意点

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

伪元素

一般页面中的非主体内容可以使用伪元素

区别：

元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果

种类

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

注意点：
必须设置content属性才能生效
伪元素默认时行内元素

标准流

默认采用的一套排版规则 规定了应该以何种方式排列元素

浮动

作用：网页布局

代码：float

• 特点

1. 浮动元素会脱离标准流 不占位置
2. 比标准流高半个级别 可以覆盖元素
3. 浮动找浮动 下一个浮动会在上一浮动后面
4. 浮动有特殊的显示效果
   一行可以显示多个
   可以设置宽高

CSS的书写顺序

1.浮动 / display
2.盒子模型：margin border padding
3.文字样式