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之后会把元素作为块级元素处理
属性 选择器
特点:选择属性进行操作
-
属性选择器无法识别" : / . 空格 ",如果有特殊符号的话需要用引号“ ”
-
开始位置存在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{最后一个}
-
p:nth-child(even){nth全部标签 even偶数}
-
p:nth-child(odd){nth全部 even基数}
-
p:nth-child(6){第六个 从所有标签开始数}
-
p:only-child 父元素的唯一 一个子元素【并且这个子元素为E才会操作他的样式;
从想通标签数
-
p:first-of-type{第一个}
-
p:last-of-type倒数第一个
-
p:nth-last-of-type{倒着开始}
-
p:nth-of-type(even)
-
p:nth-of-type(odd)
-
p:nth-of-type(6)从想通元素开始数
-
:only-of-tyoe{他的上级元素唯一一个相同类型的子元素}
:empty{选择元素里面没有任何内容 连空格都不允许}
:root 操作的body的样式 可以继承
目标伪类选择器:
对于锚点定位操作
#xxx:target{ }