1、BFC是什么
1、是什么:块级格式化上下文
2、怎么做:
• 浮动元素(元素的 float 不是 none)
• 绝对定位元素(元素的 position 为 absolute 或 fixed)
• 行内块 inline block 元素
• overflow 值不为 visible 的块元素
• 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
3、解决了什么问题:
• 清除浮动(为什么不用 .clearfix 呢?)
• 防止 margin 合并
4、优点:无。
5、缺点:有副作用。
6、怎么解决缺点:使用最新的 display: flow-root 来触发 BFC 就没有副作用了
2、CSS 选择器优先级如何确定
1. 选择器越具体,其优先级越高
2. 相同优先级,出现在后面的,覆盖前面的
3. 属性后面加 !important 的优先级最高,但是要少用
其他的:别人的博客
3、如何清除浮动?
方法一 给父元素加上 .clearfix
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
方法二 给父元素加上 overflow:hidden。
4、两种盒模型(box-sizing)的区别
第一种盒模型是 content-box,即 width 指定的是 content 区域宽度,而不是实际宽 度,公式为 实际宽度 = width + padding + border
第二种盒模型是 border-box,即 width 指定的是左右边框外侧的距离,公式为 实际宽度 = width 相同点是都是用来指定宽度的,不同点是 border-box 更好用。