结构伪类选择器:
    作用与优势：

    1. 作用：根据元素在HTML中的结构关系查找元素
    2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
    3. 场景：常用于查找某父级选择器中的子元素

    首先输入”ul.box>li{$}*10” 构建结构:
    Snipaste_2021-07-28_19-48-21.png

    • 选择父元素里边的第一个子元素 

      1.   .box li:first-child

    • 选择父元素里边的最后一个子元素 

      1.  .box li:last-child

    • 选择父元素里边的第n个子元素 

      1.    .box li:nth-child(2)

    • 选择父元素里边倒数第n个子元素 

      1.  .box li:nth-last-child(3)

    • .box li:nth-child(even/2n) 

      1.      偶数选择器输入方式

    • .box li:nth-child(odd/2n+1/2n-1)

      1.     奇数选择器输入方式

    • .box li:nth-child(n)

      1.      父元素中第n个子元素''

    • .box li:nth-child(2n)

      1.      父元素中第2n个子元素

    • .box li:nth-child(3n)

      1.     3的倍数项的子元素

    • .box li:nth-child(-n + i)

      1.    n + i 就是选择父元素里边前i项子元素

    • .box li:nth-child(n + i)

      1.    n + i 就是选择父元素里边第i项到最后一个子元素

    注意 nth-child() 这种写法,是将父元素里边所有的子元素进行排序,不管标签类型,是第几个就写第几个
    .box h2:nth-child(2)
    .box a:nth-child(4)
    Snipaste_2021-07-28_20-09-28.png
    找到父元素的第1个子元素li标签,再找到li里边的a标签
    .box li:nth-child(1) a
    image.png

    nth-of-type结构伪类选择器

    • nth-of-type 选择的是父元素里边同类型的第n个子元素

      区别：
      • :nth-child → 直接在所有孩子中数个数
      • :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
      image.png
      伪元素
      伪元素相当于行内元素(span), content为必写属性,不写伪元素不生效

    • ::before 在父元素的内容最前添加一个伪元素

    • ::after 在父元素的内容最后添加一个伪元素

    必须设置content属性才能生效
    2. 伪元素默认是行内元素

    标准流

    • 又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
      常见标准流排版规则：
    1. 块级元素：从上往下，垂直布局，独占一行
    2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

    浮动

    • 让垂直布局的盒子变成水平布局，如：一个在左，一个在右
    • float: left; 左浮动
    • float: right; 右浮动

    浮动的特点
    1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
    2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
    3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    4. 浮动元素会受到上面标准流元素的影响
    5. 浮动元素有特殊的显示效果,浮动的元素顶对齐,代码换行没有缝隙
    6. 一行可以显示多个, 可以设置宽高
    7.浮动可以使多个(块元素)元素在一行上显示, 紧贴着上一个同方向浮动元素的边缘显示
    8.浮动只能影响下边的元素,不会影响上边标准流的块元素
    9.浮动的子元素宽度相加超过了父元素的宽度,后边的子元素会掉下来(折行)
    10.浮动元素只能浮动到父元素的左边和右边,受到父元素内边距的约束
    11.块元素脱标后不会默认父元素的宽度了,默认宽高为0,内容会撑开宽高 , 行内元素脱标之后,可以设置宽高了

    浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中 当文字、行内元素、行内块元素、遇到了浮动元素,不会跑到浮动元素的底下,只会环绕它

    块元素浮动之后,不能使用margin: 0 auto来居中啦

    行内元素,行内块元素,浮动之后,给他的父元素设置text-align:center 居中无效

    清除浮动

    • 清除浮动是解决外边父元素不能设置高度, 里边子元素浮动之后撑不开父元素高度的问题

      1. 额外标签法, 在最后一个浮动元素的后边,添加块元素,使用clear:both清除浮动
        2.单位元素清除浮动:给浮动元素父元素(亲爹)调用clearfix来请浮动
        3. 双伪元素清除浮动 给浮动元素的父元素调用clearfix清除浮动
        4. 给浮动元素的父元素(亲爹)使用overflow:hidden清除浮动