面试中可能会遇到的css的问题（1）

接下来的几篇文章我们会来谈谈css里面一些面试经常会问到的问题，话不多说直接开始。

1.谈谈你对css盒模型的理解

当面试官问到这种问题我们应该怎么回答呢？很多人其实脑子里都是有这些东西的，就只是不知道怎么开口而已，基本这种问题都是回答的思路都是一样的，就先回答是什么。那css盒模型这个概念是一个什么东西呢？盒模型就是浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分：content, padding, border, margin。 解释完是什么第二点我们就该解释盒模型分两种了，一种是标准盒模型，一种是怪异盒模型（IE）。

先讲讲标准盒模型：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;
      height: 300px;
      border: 5px solid #000;
      padding: 10px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">盒子模型</div>
</body>
</html>

这就是标准盒模型，总宽度 = width + padding + border + margin。

然后就是怪异盒模型：它在计算元素宽度时不包括内边距（padding）和边框（border），只计算内容区的宽度。

在怪异盒模型下，元素的总宽度仅包括内容区的宽度（width），不包括内边距（padding）和边框（border）。外边距（margin）仍然会影响元素的定位。盒子总宽度: width + margin，这就是我们为什么在width和padding放一起盒子大小不符合我们的想法我们要加box-sizing: border-box；的原因，

box-sizing: border-box; 要求浏览器以怪异盒模型来加载容器。

box-sizing: content-box; 要求浏览器以标准盒模型来加载容器。

2.css中的选择器有哪些？说说优先级。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }
        .box1, .box2, .box3{
      width: 100%;
      height: 100px;
      background-color: burlywood;
      margin-bottom: 10px;
    }
    h2{
      color: blueviolet;
    }
        #app div{
      border: 2px solid #f50707;
    }
        #app > div{
      border: 2px solid #f50707;
    }
    .box1 + .box2{
      border: 2px solid #ea490e;
    }
        #app .box2{
      border: 2px solid #ea490e;
    }
    </style>
</head>
<body>
    <div id="app">

    <div class="box1">
      <div class="title">
        <h2>这是标题</h2>
      </div>
    </div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

在代码里从上到下就依次是这些选择器：

id选择器 #app{ width: 400px; height: 400px; border: 1px solid #000; }
类名选择器.box1, .box2, .box3{ width: 100%; height: 100px; background-color: burlywood; margin-bottom: 10px; }
标签选择器 h2{ color: blueviolet; }
后代选择器#app div{ border: 2px solid #f50707; }
子级选择器#app > div{ border: 2px solid #f50707; }
相邻兄弟选择器 .box1 + .box2{ border: 2px solid #ea490e; }
群组选择器 #app .box2{ border: 2px solid #ea490e; }

这七种是我们用的比较多的选择器，但还有一些不是很常用的选择器我把他们放在下面：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    input[abc='abc']{
      border: 2px solid #f80303;
    }

    #input::before{
      content: '000';
      display: block;
    }

    #input:focus{
      background-color: #e38787;
    }
    </style>
</head>

<body>
    <input type="text" abc="abc">
  <input type="text" id="input">
</body>

</html>

属性选择器input[abc='abc']{ border: 2px solid #f80303; }
伪元素选择器#input::before{ content: '000'; display: block; }
伪类选择器 #input:focus{ background-color: #e38787; }

这些就是我们平常认识的一些选择器了，作用是什么和有什么不同就不在这里过多赘述了，接下来我们来讲讲优先级的问题。

在CSS中，权重顺序如下所示：

!important：!important规则具有最高的优先级，会覆盖其他所有规则。当一个样式规则使用了!important标记时，该规则将具有最高的权重，无论其他规则的权重如何。
内联样式：内联样式通过style属性直接应用到元素上，具有比ID选择器更高的权重。内联样式的权重值为1000。
ID选择器：ID选择器通过元素的id属性选择元素，具有比类名选择器和标签选择器更高的权重。ID选择器的权重值为100。
类名选择器：类名选择器通过元素的class属性选择元素，具有比标签选择器更高的权重。类名选择器的权重值为10。
标签选择器：标签选择器是最常见的选择器，通过元素的标签名选择元素，具有最低的权重。标签选择器的权重值为1。

总结：

!important > 内联样式 > ID选择器 > 类名选择器 > 标签选择器

在编写CSS样式时，应该尽量避免过度使用!important，因为它可能导致样式难以管理和维护。合理使用选择器和了解它们的权重规则可以帮助确保样式表的结构清晰，避免样式冲突，同时也更容易调试和维护代码。

本文就先只讲讲这两个css的问题了，这将会做成一个系列，其他问题我将会在后面文章来解答。