浅聊一下

书接上文，上篇文章中我们和面试官聊完了响应式、BFC容器、CSS中的单位，本篇文章将继续这些天面试完的CSS内容总结...

CSS面试系列

面了这么多天，该做总结了-CSS篇(一) - 掘金 (juejin.cn))

说说你对css盒模型的理解

先说一说在面试时，当面试官向我问到："说说你对css盒模型的理解"，我该如何回答...这可以是一个万能的模板，首先要回答什么是盒模型，再回答盒模型分为几类，有什么特点...

什么是css盒模型

浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分：content、padding、border、margin。（content也就是width）

分类

css盒模型分为标准盒模型和怪异盒模型

标准盒模型

有以下这么一段html

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{       
        }
        .box{
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            padding: 10px;
            margin: 20px;
            /* box-sizing: border-box;IE盒模型 */
            /* box-sizing: content-box;标准盒模型 */
        }
    </style>
</head>
<body>
    <div class="box">盒模型</div>
</body>
</html>

效果如下

我们将其运行在谷歌浏览器中，发现当我们给div设置了宽高时

盒子总宽度 = width + padding + border + margin

我们设置的是内容的宽高，实际宽高还要加上padding、border、margin

怪异盒模型

我们再把以上代码拿到IE浏览器中运行(怪异盒模型也叫IE盒模型)

此刻我们发现盒子的总宽度就是300px，除去padding，margin，真正的内容区域向里面缩小

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

css中的选择器主要有以下几种：

id选择器 #box{ }

类选择器 .box{ }

标签选择器 h2{ }

后代选择器 div h2{ div下所有的h2标签 }

子级选择器 div>h2{ div下的h2标签 }

相邻兄弟选择器 div+h2{ div后面的那一个h2 }

群组选择器 div,h2{ 所有的div和h2 }

属性选择器 image[href] {存在href属性的image标签}

伪元素选择器 .wrap::before{ 在wrap前添加东西 }

伪类选择器 button:hover{ button鼠标悬停变色 }

js 复制代码

 <div id="box" class="box">
        <div class="wrap">
            <h2>helloworld</h2>
            <image href="123.jpg"></image>
            <button>按钮</button>
        </div>
    </div>

优先级

对于选择器的优先级，我们来举个例子：

分别给这个div的不同选择器加上不同的背景颜色，来看到底谁的优先级高

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>
        div{
            width: 200px;
            height: 100px;
        }
        #box{
            background-color: aqua;
        }
        .box{
            background-color: red;
        }
        div{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box" id="box" style="background: blue;">

    </div>
</body>
</html>

首先是蓝色，说明内联样式style最高

去掉内联样式

变成淡蓝色，此时优先级最高为ID选择器，再去掉ID选择器

变成红色，此时优先级最高为类名选择器，标签选择器的优先级最低，但是我们还忽略了一个！important，给优先级最低的标签选择器加上！important，然后恢复内联样式

html 复制代码

div{
    background-color: yellow !important;
}
<div class="box" style="background-color: blue;"></div>

所以优先级最高的是!important

优先级顺序：

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

css中有哪些方式可以隐藏页面元素？区别是什么？

主要有五种方式可以隐藏页面元素

display:none;

visibility:hidden;

position:absolute;

opacity:0;

clip-path:circle(0%)

方法较为简单，这里就不一一介绍，来看他们的区别

区别

他们的区别主要体现在

是否脱离文档流

是否可以响应事件

是否回流重绘

来举例子，不明白回流重绘的掘友来看(从输入4399.com到页面渲染之间的回流和重绘（附字节面试题） - 掘金 (juejin.cn))

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>
        div{
            width: 500px;
            height: 500px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="box" @click="click"></div>
    <script>
        let box = document.querySelector('.box');
        box.addEventListener('click',function(){
            console.log('box');
        })
    </script>
</body>
</html>

页面效果为，有一个点击事件，点击box，打印点击事件触发

display:none

先设置display:none

此时页面不显示box，box脱离文档流并且不响应点击事件，因为在box脱离文档流时，几何形状和颜色都要改变，所以发生回流重绘...

特点：

1.脱离文档流

2.无法响应事件

3.回流重绘

visibility:hidden

设置visibility:hidden

此时虽然box不显示，但是他依然存在，占据文档流，但是点击却不触发点击事件，几何形状不改变，但是颜色改变，所以

特点：

1.不脱离文档流

2.无法响应事件

3.不回流但是重绘

position:absolute

设置 position:absolute，并且让他向左移动 left:-999px

此刻效果和设置display:none一样，他们有相同特点

特点：

1.脱离文档流

2.无法响应事件

3.回流重绘

opacity:0

设置透明度为0

此刻div不显示但是占据文档流，并且会响应事件，只发生重绘

但是，如果给他加上动画属性 animation: hide 2s ease ; ，此时虽然颜色会在两秒内变没，但是animation 会触发GPU加速不会产生重绘

特点：

1.不脱离文档流

2.可以响应事件

3.只重绘不回流加上animation则不会重绘

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>
        div{
            width: 500px;
            height: 500px;
            background-color: burlywood;
        }
        .box{
            opacity: 0;
            animation: hide 2s ease ; 
            /* animation 会触发GPU加速 不会产生重绘 */
        }
        @keyframes hide{
            0%{
                opacity: 1;
            }
            50%{
                opacity: 0.5;
            }
            100%{
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="box" @click="click"></div>
    <script>
        let box = document.querySelector('.box');
        box.addEventListener('click',function(){
            console.log('触发点击事件');
        })
    </script>
</body>
</html>

clip-path:circle(0%)

设置clip-path:circle(0%)，来看效果

div不显示且占据文档流，不响应事件，颜色改变，发生重绘

特点：

1.不脱离文档流

2.不可以响应事件

3.只重绘不回流

面了这么多天，该做总结了-CSS篇(二)

浅聊一下

说说你对css盒模型的理解

什么是css盒模型

分类

标准盒模型

怪异盒模型

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

优先级

css中有哪些方式可以隐藏页面元素？区别是什么？

区别

结尾