CSS的一些知识点

78 阅读1分钟

1、BFC是什么

1、是什么:块级格式化上下文
2、怎么做:
 • 浮动元素(元素的 float 不是 none)
 • 绝对定位元素(元素的 position 为 absolute 或 fixed)
 • 行内块 inline block 元素
 • overflow 值不为 visible 的块元素
 • 弹性元素(displayflex 或 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 更好用。