BFC+属性选择器+结构伪类选择器小记

Bfc

概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

1  BFC内部的Box会在垂直方向，一个接一个的放置。

2     同一个bfc里 两个相邻的元素同时设置marght会出现高度重叠

方法：让两个元素不放在同一个div里  把其中一个放在一个盒子里然后就可以解决这个问题，在父元素里输入一个overflow：hedden

3     BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

方法：前提一个设置左浮动，另一个不设置宽度，并加上overflow：hedden

4     计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

方法：大盒子不设置高度，两个小盒子设置浮动，在高的盒子设置overflow：hedden

5     每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6     BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

原因：设置了overflow：hedden不会与外界有交集

Bfc不会与overflow：hedden 重合

触发条件float属性不为none

 overflow属性不为visible

position：absolute/ fixed

display为inline-block/table-cell/table-caption/flex/inline-flex

Float，固定定位，绝对定位触发bfc之后会把元素作为块级元素处理

属性 选择器

特点：选择属性进行操作

1. 属性选择器无法识别" : / . 空格 "，如果有特殊符号的话需要用引号“ ”

2. 开始位置存在value值， 结束为止存在value值

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

【type=“value”】 选择的type属性值为value

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

【type$="valye"】选择type属性结束未知带有value

【】：disabled 禁用表单的样式

【】：enabled 正常使用的表单样式

【】:checked 选中之后的样子

【】：focus 获取焦点之后的样子

【type*=“x”】 所有的属性

结构伪类选择器

从所有标签数

1.p:first-child{第一个}

2.p：last-child{最后一个}

1. p:nth-child(even){nth全部标签 even偶数}

2. p:nth-child(odd){nth全部 even基数}

3. p:nth-child(6){第六个 从所有标签开始数}

4. p:only-child 父元素的唯一 一个子元素【并且这个子元素为E才会操作他的样式；

从想通标签数

1. p:first-of-type{第一个}

2. p:last-of-type倒数第一个

3. p:nth-last-of-type{倒着开始}

4. p:nth-of-type(even)

5. p:nth-of-type(odd)

6. p:nth-of-type（6）从想通元素开始数

7. ：only-of-tyoe{他的上级元素唯一一个相同类型的子元素}

:empty{选择元素里面没有任何内容 连空格都不允许}

：root 操作的body的样式 可以继承

目标伪类选择器：

对于锚点定位操作

#xxx：target{ }