网站的付款链接怎么做／江苏seo排名

作用与优势：

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

选择器：

n的注意点：

•  n为：0、1、2、3、4、5、6、……
• 通过n可以组成常见公式
  功能公式偶数2n、even奇数2n+1、2n-1、odd找到前五个-n+5找到从第五个往后n+5

（了解）nth-of-type结构伪类选择器

 选择器：

区别：

• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

:not()的格式是:not(x)

• x是一个简单选择器
• 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

:not(x)表示除x以外的元素 

• 伪元素：一般页面中的非主体内容可以使用伪元素
• 区别：
  • 元素：HTML 设置的标签
  • 伪元素：由 CSS 模拟出的标签效果
• 种类
  伪元素作用::before在父元素内容的最前添加一个伪元素::after在父元素内容的最后添加一个伪元素

注意点：

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

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

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

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布

• 从左到右、从上到下按顺序摆放好
• 默认情况下，互相之间不存在层叠现象

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 

早期的作用：图文环绕

现在的作用：网页布局 

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

• 属性名：float
• 属性值：
  属性名效果left左浮动right右浮动

• 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

  相当于从地面飘到了空中

• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
• 浮动元素有特殊的显示效果

  • 一行可以显示多个
  • 可以设置宽高

注意点：浮动的元素不能设置text-align:center或者margin:0 auto

浮动规则一：

• 元素一旦浮动后, 脱离标准流，朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
• 定位元素会层叠在浮动元素上面

浮动规则二： 

• 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

浮动规则三：浮动元素之间不能层叠

• 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
• 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止 

浮动规则四：

• 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
• 比如行内级元素、inline-block元素、块级元素的文字内容

浮动规则五： 

• 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐 

浮动常用的场景：解决行内级元素、inline-block元素的水平间隙问题

• 清除默认的margin和padding
• 找到ul，去除小圆点   list-style: none;
• 找到li标签，设置浮动让li一行中显示
• 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？

  • 方法一：给a标签设置 display : inline-block
  • 方法二：给a标签设置 display : block
  • 方法三：给a设置 float : left

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

• 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

清浮动的目的是让父元素计算总高度的时候，把浮动子元素的高度算进去

如何清除浮动呢? 使用clear属性

clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;

clear的常用取值：

• 含义：清除浮动带来的影响

  影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

• 原因：

  子元素浮动后脱标 → 不占位置

• 目的：

  需要父元素有高度，从而不影响其他网页元素的布局

（1）方法 — ：直接设置父元素高度

• 特点：
  • 优点：简单粗暴，方便
  • 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

（2）方法二：额外标签法

• 操作：
  • 在父元素内容的最后添加一个块级元素
  • 给添加的块级元素设置 clear:both
• 特点：
  • 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

（3）方法三：单伪元素清除法

操作：用伪元素替代了额外标签

特点：优点：项目中使用，直接给标签加类即可清除浮动 

（4）方法四：双伪元素清除法

操作：

特点：

优点：项目中使用，直接给标签加类即可清除浮动 

（5）给父元素设置overflow : hidden

• 操作：

  直接给父元素设置 overflow : hidden

• 特点：

  优点：方便

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

块级元素的布局属于Block Formatting Context（BFC）

• 也就是block level box都是在BFC中布局的；

行内级元素的布局属于Inline Formatting Context（IFC）

• 而inline level box都是在IFC中布局的；

简单概况如下：

• 在BFC中，box会在垂直方向上一个挨着一个的排布；
• 垂直方向的间距由margin属性决定；
• 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
• 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢？

• 解决margin的折叠问题；
• 解决浮动高度塌陷问题；

BFC的作用一：解决折叠问题 

• 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
• 那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

BFC的作用二：解决浮动高度塌陷 

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。

• 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
• 没有解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

事实上，BFC解决高度塌陷需要满足两个条件：

• 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
• 浮动元素的父元素的高度是auto的；

BFC的高度是auto的情况下，是如下方法计算高度的

• 如果只有inline-level，是行高的顶部和底部的距离；
• 如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
• 如果有绝对定位元素，将被忽略；
• 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

创建BFC方法：

1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性取值不为visible。如：auto、hidden…
5. ……