这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战
一、BFC、IFC
1.1.BFC
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
（1）规则如下：
1）BFC有隔离作用，内部元素不会受外部元素的影响（反之亦然）
2）一个元素只能存在于一个BFC中
3）BFC内的元素按正常流排列，元素之间的间隙由元素的外边距控制
4）BFC中的内容不会与外面的浮动元素重叠
5）计算BFC的高度，需要包括BFC内的浮动子元素的高度
（2）创建BFC
1）根元素，也就是html元素
2）float属性不为none的浮动元素
3）position属性是absolute或fixed的定位元素
4）display为inline-block，table-cell，table-caption，flex；
5）overflow不为visible
（3）用途
清除浮动
解决外边距塌陷
宽度自适应的两栏布局
1.2.IFC
行级格式化上下文
局规则如下：
1）内部的盒子会在水平方向，一个个地放置；
2）IFC的高度，由里面最高盒子的高度决定；
3）当一行不够放置的时候会自动切换到下一行；
二、外边距塌陷问题
外边距塌陷也称外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。
1.通常会有4种情况会发生塌陷
（1）父元素（没有上边框和上内边距）和第一个子元素，在第一个元素之前没有元素，同时为其定义了上外边距。
（2）父元素（没有下边框和下内边距）和最后一个子元素，在最后一个子元素之后没有内容，同时定义了下内边距。
（3）两个相邻的兄弟元素，分别定义了下外边距和上外边距。
（4）一个空的元素（没有高、边框、内边距和内容），只定义了上下外边距。
2.当出现外边距塌陷时，外边距之间的计算方式是怎样的？
元素的外边距可以用正数或负数来指定，使用不同的组合会改变外边距的计算方式，总共有3种组合方式，如下所列：
（1）两个都是正数，取较大值
（2）两个都是负数，取绝对值较大的值
（3）一正一负，取两个值相加的和
三、创建前端平移动画为何translate（）优于top/right/bottom/left
当使用top/right/bottom/left做平移运动时，浏览器在动画的执行过程中不停的进行重绘，占用了很多CPU时间；对于transform会生成一个新的层，而对这个图层进行变换，对于浏览器来说，是不需要重绘的。
四、opacity和rgba设置透明度的区别
子元素会继承父元素opacity属性，但不会继承rgba，所以opacity会影响子元素的透明度，但rgba不会影响。
五、CSS3.0新特性
（1）CSS3完善了选择器（包括属性、关系、伪类和伪元素）
（2）CSS3新增的阴影、圆角、Web字体、渐变能替代以往得用图像才能实现的效果，这样既能减少HTTP请求数，还能提升页面加载速度。
（3）CSS3现在可以一次性使用多张背景图、控制背景尺寸、裁剪背景图像等
（4）CSS3引入了过渡和动画两个属性
（5）CSS3有两种全新的布局：多列布局和伸缩盒
（6）CSS3可让元素进行2D和3D变形，包括旋转、移动、缩放和扭曲。在动画中使用3D的变形会新增一个渲染层，将重绘减少到一次，提升动画性能。
六、适配各种屏幕的尺寸
在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。
（1）在网页代码的头部，加入一行viewport元标签
在网页中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度
//user-scalable=no 表示用户是否可以调整缩放比例，值为“no”或“yes”
（2）宽度不用用绝对的
width:auto;//width:XX%;
（3）字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”
（4）流动布局，"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
（5）选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件
这段代码的意思是：如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件
七、盒模型
页面布局分为两种布局模型，可通过box-sizing进行设置，根据宽高区域可分为：
content-box:对应W3C盒模型 width = content
border-box:对应IE盒模型 width=content+padding-left+padding-right+border-left+border-right
八、层叠上下文
（1）层叠上下文是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
（2）层叠等级（层叠水平）指的是：
- 在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
- 在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。
类比回“层叠上下文”和“层叠等级”，就得出一个结论：
1）普通元素的层叠等级优先由其所在的层叠上下文决定。
2）层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
（3）产生层叠上下文
1）HTML中的根元素本身就具有层叠上下文，称为“根层叠上下文”。
2）普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。没有设置position，z-index无效
3）CSS3中的新属性也可以产生层叠上下文。
1.父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
2.opacity：元素的opacity属性值不是1；
3.元素的transform属性值不是none；
4.元素mix-blend-mode属性值不是normal`； // 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
5.元素的filter属性值不是none；// 滤镜
6.元素的isolation属性值是isolate；// 隔离
7.will-change指定的属性值为上面任意一个；
8.元素的-webkit-overflow-scrolling属性值设置为touch。
（4）层叠顺序
“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。由此可见，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。
不考虑CSS3的情况下，当元素发生层叠时，层叠顺序遵循上面图中的规则。
注：
1）左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。
2）inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。
3）单纯考虑层叠顺序，z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的。（auto 不会创建层叠上下文，z-index:0 会创建层叠上下文。）
（像border/background属于装饰元素的属性，浮动和块级元素一般用来页面布局，而网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。）
（5）结论：
1）首先先看要比较的两个元素是否处于同一个层叠上下文中：
1.1如果是，谁的层叠等级大，谁在上面。
1.2如果两个元素不在同一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。
2）当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。
九、居中
（1）水平居中
- 行内元素: text-align: center
- 块级元素: margin: 0 auto
- position + transform
- flex + justify-content: center
（2）垂直居中
1）把一个容器的height和line-height设置成相同值时，能够实现单行的上下居中。
2）实现多行文本的上下居中，方法是在文字外面套一个span标签，让这个span的盒模型变成inline-block，并且恢复行高为normal，而外面的容器height和line-height还是设置成一样，这样就实现多行文本的上下居中。
3）借助table-cell的垂直居中
display:table-cell;
vertical-align:middle;
对于vertical-align何时起作用，有两个要求：
（1）作用环境：父元素设置line-height
父元素（inline-block/block）必须含有line-height，子元素中的（inline-block/inline元素）vertical-align才起作用。
vertical-align不可继承，必须对子元素单独设置。
（2）作用环境
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
4）margin负值法居中
使用relative定位，设置top为50%，在设置margin-top为元素高度的负的一半。上下居中和左右居中都可以用这个实现
.outer{
position:relative;
top:50%;
left:50%;
margin-top: -100px;
margin-left:-100px;
}
这种方法的缺点是需要知道高度，无法根据长短自适应。
5）使用transform自适应居中
.outer{
position:relative;
top:50%;
left:50%;
width:200px;
transform:translate(-50%,-50%);//translate里面的百分比是根据元素本身的高度计算的
}
6）使用flex布局
.nav{
position:absolute;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
width:100%;
}
（3）水平垂直居中
1)使用transform:translate
2)使用flex布局
3）使用margin负值法居中
十、选择器优先级
- !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
- 选择器 从右往左 解析
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。避免对所有元素进行遍历。
十一、去除浮动影响，防止父级高度塌陷
- 通过增加伪元素清除浮动
-
- :after /
: clear: both
- :after /
- 创建父级 BFC
- 父级设置高度
十二、link与@import的区别
（1）link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
（2）当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
（3）@import需要 IE5 以上才能使用
（4）link可以使用 js 动态引入，@import不行
十三、伪类和伪元素区别
（1）伪类
伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
伪类的功能有两种：
1）格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
2）不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
（2）伪元素
伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或 ::after。
（3）伪类和伪元素的区别
1）伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。例如first-child、last-child、first-of-type（匹配属于其父元素的第一个特定类型的子元素）、last-of-type
2）伪元素本质上是创建了一个虚拟容器（元素），可以在其中添加内容或样式。例如：::before、::after、::first-letter、::first-line(匹配元素中第一行的文本(只能在块元素中使用))、::selection(匹配被用户选中的部分)
3）在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。
十四、a标签的4个伪类
link：默认，正常状态
hover：鼠标放上去的时候
active：点击的时候
visited：点击之后
十五、display:none、visibility:hidden、opacity:0三者区别
1.占据空间：display不占据空间，display:none隐藏产生reflow和repaint(回流与重绘)，而visibility:hidden和opacity:0，虽然隐藏了，但仍然占据着空间，只会引起重绘。
2.子元素继承
display:none不会被子元素继承，子类元素不会显示；
visibility：hidden，会被子元素集成，但子类元素可以通过设置visibility: visible来反隐藏；
opacity：0会被子元素继承,且子元素并不能通过opacity：1进行反隐藏
3.事件绑定
display：none元素都不存在了，所以无法触发其上面绑定的元素；
visibility: hidden;不会触发该元素已经绑定的事件；
opacity：0的元素依然能触发已经绑定的事件
4.过渡动画
transition对于display和visibility是无效的，但对于opacity是有效的。
十六、float和position一起用是什么效果？
float浮动与position同时使用并不会冲突，前者是使元素脱离标准流，浮动在文档流上；而后者是使元素相对自身的移动定位，虽浮动但占据原有位置。当两者同时使用时，不会发生冲突，反而使元素同时具有两者特性，即既可以相对自身移动定位，又可以浮动不占位置
十七、CSS优先级
1.优先级
优先级仅由选择器的匹配规则来决定
内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式
2.优先级计算
a、用a表示选择器中ID选择器出现的次数
b、用b表示类选择器，属性选择器和伪类选择器出现的总次数。
c、用c表示标签选择器、伪元素选择器出现的总次数
d、忽略通用选择器
e、然后计算a100+b10+c的大小，这就是优先级了。
权重：内联样式1000》id选择器100》class选择器10》标签选择器1
优先级不升位（例如：有a的一定比没有a的大）
3.注意以下几点
（1）优先级计算无视DOM树中的距离
（2）伪类选择器、属性选择器和class选择器的优先级一样
（3）基于类型的优先级：优先级是根据选择器的类型进行计算的
（4）：not伪类不参与优先级计算：【：not】否定伪类在优先级计算中不会被看做是伪类，但是，会把:not里面的选择器当普通选择器计数。其实就是忽略掉:not，其他伪类(如:hover)参与CSS优先级的计算，但是「:not」不参与计算。
（5）优先级计算不升位：不要把权重简单的作为10进制数字比较其大小
十八、rem和em
本质区别：rem是参照html的font-size，em是参照父元素的font-size
优点：以rem/em为单位比px更方便，屏幕尺寸发生变化时只需要更改html/body基数即可，不需要再重新给每个标签写不同的font-size。
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.欢迎关注公众号前端点线面，《前端百题斩》pdf版在等你
