常用的css知识(面试题)

两种盒模型（box-sizing）的区别？

首先介绍一下CSS 基础框盒模型（CSS basic box model）：每个盒子包含四个部分，分别是：Margin外边距、Border边框、Padding内边距、Content内容；如下图：

MDN介绍CSS 基础框盒模型介绍

回到题目：两种盒模型是指content-box与border-box。

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

MDN 关于box-sizing的解释box-sizing

BFC是什么？

BFC全称Block Formatting Context翻译成中文为块格式化上下文。

MDN地址：块格式化上下文

怎么实现垂直居中？

CSS实现垂直居中的几种方式

CSS的优先级

直接看MDN吧~

MDN优先级

类型选择器 < 类选择器 < ID选择器 < 内联样式 < !important(一般不要用)

伪类

CSS的伪类可以实现一些非常有意思的东西，在工作中也会经常用到。

MDN伪类

• 语法

  selector:pseudo-class {
    property: value;
  }

• 常用伪类

  • :active：被用户激活的元素。
  • :hover：用户使用指示设备虚指一个元素(没有激活)的情况.
  • ::before：创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。
  • ::after：创建一个伪元素，其将作为匹配选中的元素的最后一个子元素。常通过content属性来为该元素添加修饰性内容。
  • :focus
  • :first
  • :first-child
  • :last-child
  • :nth-child()

MDN伪类