css
1. 选择器的类型与优先级？（上海xx科技）
1. 基础选择器：
ID选择器、类选择器、标签选择器、通配符选择器
2. 复合选择器：
由两个或多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等
3. 优先级
先看一张图
!important > 内联 > id > 类 =属性 = 伪类 > 标签 = 伪元素 > 子选择器 = 兄弟选择器 = 后代选择器 = 通配符
2. 垂直居中如何实现？
2.1 居中元素宽高已知
2.1.1 absolute + margin auto
.parent{
position: relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 50vw; height: 50vh;
/* 核心代码 */
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
**2.1.2 absolute + 负 margin **
.parent{
position:relative;
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
}
.child{
background: tomato;
width: 100px; height: 100px;
/* 核心代码 */
position:absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
}
**2.1.3 flex(justfy-content:center;align-items:center) **
2.2 居中元素宽高未知
**2.2.1 **absolute + transform
.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
position:relative;
}
.child{
background: tomato;
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.2.2 Flex
.parent {
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代码 */
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: tomato;
}
3. 什么是BFC(Block formatting context)？（重庆xx有限责任公司）
3.1 定义
直译为 块级格式化上下文 ，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.
3.2 实现BFC属性的方法
- 浮动元素：float除none以外的值
- 定位元素： position的值不为static或者relative
- display为inline-block、flex、grid
- overflow除了visible以外的值(hidden、auto、scroll)
- 根元素
3.3 BFC的作用
3.2.1 避免外边距重叠（防止margin塌陷） 3.2.2 用于清除浮动 (当给一个父元素设置边框，内部元素会将父元素撑起来，但是如果内部元素设置了 float属性，则该父元素会失去支撑，从而没有高度)
3.2.3 阻止元素被浮动元素覆盖
3.4 外边距重叠的补充
外边距重叠分2种情况
1.兄弟元素外边距重叠
<style>
.inner-box1,
.inner-box2 {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 20px;
border: 1px solid;
}
.inner-box1 {
margin-bottom: 10px;
}
.inner-box2 {
margin-top: 20px;
}
</style>
<body>
<div class="inner-box1">
</div>
<div class="inner-box2"></div>
</body>
此时两个盒子之间的距离由两个外边距之中较大的决定，也就是20px，如果两个盒子的距离都是负值则由绝对值较大的决定。
而如果两者的间距一正一负盒子之间的间距就是两者相加的值，这点有点不同，需要特殊记忆
2.父子元素外边距重叠问题
上面的兄弟元素外边距重叠一般来说问题不是很大，可是父子元素外边距重叠问题会影响页面布局，需要及时解决。
所谓父子元素外边重叠问题，便是子元素的外边距会传递个父元素，导致父子元素同时移动，从而达不到应有的效果
解决方式：
- 给父元素添加一个外边框(bordr)
- 对父元素添加overflow：hidden 开启元素的BFC
- 伪类
.clearfix:before,
.clearfix:after{
content:'';
display:table;
clear:both;
}
3.5 高度塌陷的补充
高度塌陷简单说就是，父级元素包涵的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素“撑开”，而变成一条线。
解决方式：
-
给父级元素设置高度（不推荐）
这样就写死了，不过当整体布局确定了可以使用 -
结尾添加空标签，给其设置 clear：both（不推荐）
直接在高度塌陷的父元素的最后添加一个空的div，由于这个div没有浮动，所以它可以撑开父元素的高度，然后对其进行[清除浮动，通过这个空白div来撑起父元素的高度，clear：both 本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来。缺点是添加无意义标签，语义化差。
3.用伪元素::after清除浮动（推荐）
可以通过给父级元素添加after伪类，再向元素添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
.clearfix::after{
content: "";
display: block;
clear: both;
}
.one {
border: 10px solid red;
}
.two {
width: 100px;
height: 100px;
background: yellowgreen;
float: left;
}
