必刷前端面试题：css盒模型和选择器

在这个系列里我会为大家讲解一些前端面试里有关css的常考题。在面试官问到我们有关css的问题时，很有可能会问到这些问题。

---

什么是盒模型？说说你对css盒模型的理解

CSS 盒模型是指在网页中每个元素所占据的空间被看作一个矩形盒子。浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分：content, padding, border, margin，它们影响着元素在页面中的布局和样式。

• 内容区域（content）：内容区域是盒子中用来显示实际内容的部分，如文本、图片等。
• 内边距（padding）：内边距是内容区域与边框之间的空白区域，通过设置 padding 属性可以调整元素内部内容与边框之间的间距。
• 边框（border）：边框是围绕内容和内边距的线条，通过设置 border 属性可以设置边框的样式、宽度和颜色等属性。
• 外边距（margin）：外边距是盒子与相邻元素之间的空白区域，通过设置 margin 属性可以控制元素之间的间距。

css的盒子模型有两种分别是标准盒模型和怪异盒模型

在早期的网页设计时期，当时的浏览器巨头IE浏览器和谷歌浏览器对于盒子模型的规定存在差异，由于这个原因以及考虑到浏览器的兼容性，所以存在这两种盒子模型。

标准盒模型和怪异盒模型的主要区别在于它们对于盒子宽度的定义。

• 标准盒模型 盒子总宽度：width + padding + border + margin

• 怪异盒模型(IE) 盒子总宽度: width + margin

标准盒模型和怪异盒模型的使用

可以通过在css代码中设置box-sizing来让浏览器使用你需要的盒模型。

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

---

css中的选择器有哪些？说一说它们的优先级

有哪些选择器

• id选择器(#+id)

//html部分
<div id="app">  

//css部分
#app{

} 

• 类名选择器

//html部分
<div class="box1"></div>

//css部分
.box1{

} 

• 标签选择器

//html部分
<h2>标题</h2>

//css部分
h2{

} 

• 后代选择器

//html部分
<div class="container">
  <h2>标题</h2>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

//css部分
.container li {

}

• 子级选择器

//html部分
<div class="container">
  <h2>标题</h2>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
  </ul>
</div>

//css部分
.container > li {
}

• 相邻兄弟选择器

//html部分
<div class="box1"></div>
<div class="box2"></div>

//css部分
.box1 + .box2{
      border: 2px solid #ea490e;
    } 

• 群组选择器

//html部分
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

//css部分
box1,box2,box3 {
}

• 属性选择器

//html部分
<input type="text" info="abc">

//css部分
input[info='abc']{
}

• 伪元素选择器

//html部分
<input type="text" id="input">

//css部分
#input::before{
}

• 伪类选择器

常见的伪类选择器：

1. :hover：选择鼠标悬停在元素上时的状态。
2. :active：选择被用户激活（点击）时的状态。
3. :focus：选择获得焦点的表单元素的状态。

以focus为例：

//html部分
<input type="text" id="input">

//css部分
#input::focus{
}

选择器的优先级为：

!important > 内联选择器 > id选择器 > 类名选择器 > 标签选择器

值得注意的是，!important会提高样式的优先级，会覆盖其他低优先级的样式。