likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 10

浅聊一下

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

说说你对css盒模型的理解

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

什么是css盒模型

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

分类

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>
        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>

效果如下

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

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

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

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

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

怪异盒模型

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

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

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

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

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

  1. id选择器 #box{ }
  2. 类选择器 .box{ }
  3. 标签选择器 h2{ }
  4. 后代选择器 div h2{ div下所有的h2标签 }
  5. 子级选择器 div>h2{ div下的h2标签 }
  6. 相邻兄弟选择器 div+h2{ div后面的那一个h2 }
  7. 群组选择器 div,h2{ 所有的div和h2 }
  8. 属性选择器 image[href] {存在href属性的image标签}
  9. 伪元素选择器 .wrap::before{ 在wrap前添加东西 }
  10. 伪类选择器 button:hover{ button鼠标悬停变色 }
 <div id="box" class="box">
        <div class="wrap">
            <h2>helloworld</h2>
            <image href="123.jpg"></image>
            <button>按钮</button>
        </div>
    </div>

优先级

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

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

<!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最高 面了这么多天，该做总结了-CSS篇(二)

去掉内联样式

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

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

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

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

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

所以优先级最高的是!important

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

优先级顺序：

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

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

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

  1. display:none;
  2. visibility:hidden;
  3. position:absolute;
  4. opacity:0;
  5. clip-path:circle(0%)

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

区别

他们的区别主要体现在

  1. 是否脱离文档流
  2. 是否可以响应事件
  3. 是否回流重绘
<!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，打印点击事件触发

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

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

  • display:none

先设置display:none

面了这么多天，该做总结了-CSS篇(二) 此时页面不显示box，box脱离文档流并且不响应点击事件，因为在box脱离文档流时，几何形状和颜色都要改变，所以发生回流重绘...

特点：

1.脱离文档流

2.无法响应事件

3.回流重绘

  • visibility:hidden

设置visibility:hidden 面了这么多天，该做总结了-CSS篇(二)

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

特点：

1.不脱离文档流

2.无法响应事件

3.不回流但是重绘

  • position:absolute

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

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

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

特点：

1.脱离文档流

2.无法响应事件

3.回流重绘

  • opacity:0

设置透明度为0

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

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

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

特点：

1.不脱离文档流

2.可以响应事件

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

<!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%)，来看效果

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

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

特点：

1.不脱离文档流

2.不可以响应事件

3.只重绘不回流

结尾

更多精彩，请看下集...