深入探讨CSS盒模型、选择器、单位概念

前言

众所周知，对于一个前端工程师来说，熟练掌握css是必须的，同时，作为一门"永远也学不完的语言"，css的各种各样的特性可以说是令人眼花缭乱。今天这篇文章主要目的就在于为各位解析CSS盒模型、选择器、单位及像素的一些概念，避免各位在春招的路上挂在这上面，那属实是阴沟里翻船了

正文

说说你对css盒模型的理解

在面试中，面试官问出诸如"说说你对xxx的理解"，或者"谈谈你对xxx的看法"之类的问题，那八成是在探你的底了。这个时候不要怂，直接开大和他battle，先说概念之类的东西，在把剩下的详细解释

什么是盒模型

CSS盒模型是指浏览器在渲染网页时将每个HTML元素视为一个矩形盒子的模型。这个盒子包含了四个部分：content（内容）、padding（内边距）、border（边框）和margin（外边距）。简单点可以将盒模型看做一栋大别墅，那这四个部分分别对应的是房屋主体，内院，围墙和外院。

标准盒模型

标准盒模型是最早也是最常用的盒模型，当我们给标准盒模型设定宽度时，设置的仅仅是content（内容）的宽度例如我们先给一个类名为box的容器

html 复制代码

<div class="box"></div>

随后将他的宽度定为300px，顺便给个5px的边框和20像素的内边距以及背景颜色

css 复制代码

.box{
    width: 300px;
    border: 5px solid black;
    padding: 20px;
    background-color: #882929;
    }

这时我们通过开发者工具去看它的实际宽度是多少

不出所料，这个容器的宽度果然是设定的width加上两边的边框和内边距

怪异盒模型

怪异盒模型则是微软创造的，微软很有自己的想法，他们的想法和国土资源局应该是差不多的，宽度不仅包括content（内容），还有padding（内边距）和border（边框）都包括在里面。就像国土资源局给你划分宅基地建房子，给你多少就是多少，你能把内院和围墙建在宅基地外面？分分钟给你当违章建筑爆破了。我们依旧还是拿着刚刚那个box说明一下，唯一不同的是将他声明为怪异盒模型

css 复制代码

.box{
    box-sizing: border-box
            /*要求浏览器以怪异盒子模型的标准加载元素*/
    }

可以看到在将他设置为怪异盒模型之后容器占据的宽度就是我们设定的宽度

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

css中的选择器常见的有 id选择器，类名选择器，标签选择器，后代选择器，自己选择器，相邻兄弟选择器，群组选择器，属性选择器，伪元素选择器，伪类选择器等，相信各位大佬应该都不陌生，但要说到优先级可能就有点不清楚了，毕竟谁家好人给同一个元素的样式分四五个写啊，但这里面确实有点讲究，还是老样子，让我们用"赛博养蛊"的方式来看看谁说了算。

html 复制代码

    <div class="box" id="box"  style="background-color: #f500fd ;">hello world</div>

在html代码中先给定一个内联样式

css 复制代码

.box{
            width: 300px;
            height: 300px;
        }
        /* 先设好宽高方便观察 */
        .box{
            background-color: #b61f1f;
        }
        #box{
            background-color: #f7d204;
        }
        div{
            background-color: #48ff00;
        }

现在我们只需要看看box的颜色就能得出谁的权重最高。通过代码可以很简单得出，!import > 内联 > id > class > 标签

说说css中的单位有哪些

实际上css里面的单位是相当多的，甚至可以自定义，用abc做单位都行，这里我们主要介绍几种常用的

px：

像素，屏幕上的发光单元，是最基础也是最常用的单位之一

rem：

相对单位，相对于根字体大小，通常情况下根字体大小是16px，此时给容器设置宽度为10rem，那么容器宽度就是160px

em：

相对单位，用于字体大小设置时会继承与父容器的字体大小，需要注意的是父容器的字体大小可能会继承自祖父容器，但用于其他地方则继承自己容器的字体大小

vw/vh：

vh（视窗高度单位） ：1vh等于视窗高度的1%。这意味着如果你将一个元素的高度设置为50vh，它将会占据整个视窗高度的50%。
vw（视窗宽度单位） ：1vw等于视窗宽度的1%。这意味着如果你将一个元素的宽度设置为50vw，它将会占据整个视窗宽度的50%。

这些单位非常适合用于响应式设计，因为它们可以根据不同设备的屏幕大小自动调整。例如，你可以使用vh单位来创建一个始终占据屏幕高度一半的页面布局，无论用户使用的是手机、平板还是电脑屏幕。

%：

相对于父容器

总结

相较于其他内容，css无疑是前端中最基础也是最不可或缺的知识点，希望文章能够对各位读者有帮助，后续也会更新更多关于css面试考点的文章