2021-07-27 BFC及css选择器的总结

BFC：

定义：块级格式化上下文

作用：相邻元素垂直外边距合并

 1.margin-top ：值传递【子元素设置margin-top之后，父元素会随着下移

2.高度塌陷：父元素没有设置高度，子元素设置浮动之后高度会发生塌陷

3.布局：【两栏布局，双飞翼布局】

解决：float浮动，position：fixed固定定位，position：absluate绝对定位。触发BFC之后

会把元素作为块级元素来处理

BFC的六个特性：

1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
2. BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
3. 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
4. BFC内部的Box会在垂直方向，一个接一个的放置。
5. 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
6. BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

自适应两栏：

第一种方法：

第二种方法：

 

双飞翼布局

第一种方法：

1.设置三种元素：left，right，center

2.left设置左浮动，right设置右浮动，center不设置浮动

3.center不设置宽度，让他宽度自适应，设置overflow: hidden;溢出隐藏

第二种方法：

1.在第一种方法的基础上，把center的overflow: hidden;溢出隐藏除去，

2.然后再为center加一个子元素son为其设置高度和背景颜色，宽度自适应

3.margin设置为left和right的宽度

 

 

 

 

css选择器：

一.基本选择器

1.*通配符

2.Class选择器：必须在元素中定义class属性  。class

3.Id选择器 ：必须在元素中定义class属性#id

4.元素选择器（标签选择器）

5.群组选择器：选择器之间用逗号隔开，有相同属性的元素可以放在一起，减少代码量

二.层次选择器

1.包含选择器【后代选择器】：选择所有【空格前面元素包含的】的带有空格之后的元素的标签

子选择器：E>F ，选择的仅仅是自己的孩子

兄弟选择器：E+F, +号相邻的后一个元素(匹配的元素F位于E元素的后面）

通用选择器:E~F,  ~波浪号后面的所有（匹配元素为E元素后的所有匹配的F元素）

三.伪类选择器

1.动态伪类选择器：

连接伪类选择器全部使用的话需要注意书写的顺序

1.：link

2.：visited

3.：hover

4.：active

：focus  获取焦点之后的样式， 前面只能为被操作的选择器

2.目标伪类选择器：

：target 

可用于选取当前活动的目标元素

 使用该选择器来对页面中的某个target元素：该元素的id当作页面中的超链接来使用）

指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

作用：锚点定位的锚点的操作：

< a href="#id1"></a>

<p id="id1"></p>

操作要跳转地方的样式

3.状态伪类选择器：

1.：checked 匹配选中的复选框或者是单选框的表单元素

2.：enabled  正常使用的，可用状态下的样式

3.：disabled 禁用表单的样式

四：结构伪类选择器

1. E:first-child【选择第一个元素

2.  E:last-child选择最后一个元素

3.  E:nth-child第n个元素，奇数odd偶数even

4.  E:nth-last-child 从后往前

5.  E:first-of-type 选择第一类元素

6.  E ：last-of-type 选择最后一类元素

7.  E：nth-of-type 第n个元素奇数odd偶数even，跟nth-child不同，只会计算相同类型的标签

8 . E：nth-last-of-type  倒着来，第n个元素奇数odd偶数even

9.  E：only-child  只有一个子元素【并且这个子元素为E才会操作他的样式】

10.E：only-of-type  这一类子元素只有一个

11.E：empty元素为空【连空格也没有】

12.E：root操作的为body，存在继承

 五：否定伪类选择器

E：not（F） 匹配所有除了F元素之外的 E元素，常在表单元素中使用，

 例：给表单中所有input定义样式，除了submit按钮之外，就可以使用否定伪类选择器

 例：

 

 

 伪元素：

1.::first-letter 第一个文本

2.::first-line 第一行

3.::before 元素之前

4.::after  元素之后

5.::selection  选中之后的样式提示，仅接受两个属性，一个是background，另一个是color

 

 六.属性选择器

属性选择器无法识别： 空格，//  */  点，可以识别引号

Type选择带有type属性的进行操作

type="value"选择的type属性值为value

Type^="value"  选择的type属性值开始位置带有value

type$="value"  选择的type属性值结束位置带有value