CSS面经D11. CSS的盒子模型 1.1 标准盒子模型（width和height大小就是content的大小） 1.

1. CSS的盒子模型

1.1 标准盒子模型（width和height大小就是content的大小）

1.2 IE盒子模型（width和height的大小包括了border、padding、content）

1.3 盒子模型的互相转换

2 line-height和height的区别

line-height可以被继承。

3 CSS的选择符有哪些、哪些属性可以继承

4 CSS优先级算法如何计算

4.1 CSS中的优先级

ID = 身份证：页面里只能出现一次，唯一标识一个元素。
class = 会员标签：可以反复使用，给任意多个元素打同一标记。

4.2 计算CSS中的优先级（叠加就是相加）

5 用CSS画一个三角形（使用border去画盒子）

原理：border的斜角连接
当元素有边框时，相邻边框的交界处是 斜角连接 的，而不是直角。当宽度和高度都为0时，整个元素就只剩下边框的斜角部分。

<!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: 0;
     height: 0;
     border-top: 200px solid transparent;
     border-left: 200px solid transparent;
     border-bottom: 200px solid transparent;
     border-right:  200px solid yellow;
   }
 </style>
</head>
<body>
 <div></div>
</body>
</html>

效果：

5. 一个盒子不给宽高如何水平垂直居中

5.1 给父盒子加flex布局+justify-content：center； align-items：center；（弹性盒子）

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 500px;
      height: 500px;
      background-color: red;
      /* 给父盒子加一下内容： */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .son{
      
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      son
    </div>
  </div>
</body>
</html>

结果：

5.2 子绝父相

子绝父相，后再给子盒子在top和letft方向移动

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 500px;
      height: 500px;
      background-color: red;
      /* 给父盒子加一下内容： */
      position: relative;
    }
    .son{
      background-color: yellow;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">
      son
    </div>
  </div>
</body>
</html>

结果：

6. display有哪些值，有什么作用

7. 对BFC规范（格式化上下文：block formatting context）的理解

可以使用overflow：hidden 优先使用 display: flow-root

8.清除浮动有哪些方式

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
      border: 1px solid #ccc;
      display: flow-root;
    }
    /* ul::after{
      content: '';
      clear: both;
      display: block;

    } */
    li{
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #4e0505;
    }
    
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>

</ul>
<h1>这是一个标题</h1>
  </div>
</body>
</html>

9. 在网页中应该使用奇数还是偶数的字体

注意：现在浏览器可以解析小数 网页开发中使用偶数：便于开发

10.有几种定位

11.写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块、请写出结构以及其样式

11.1 要求先加载中间块：先写中间块的div盒子

11.2 给左中右三个盒子包在container盒子中，使用flex布局，中间盒子的宽度设置为100%

11.3 使用margin-left，给左右两个盒子设置负值，调整到中间盒子的左右两端

<!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 {
      height: 100vh;
      width: 100vw;
    }
    .container>div{
      float: left;
    }
    .c{
      width: 100%;
      height: 100vh;
      background-color: red;
    }
    .c .main{
      padding: 0 250px;
    }
    .l{
      margin-left: -100%;
      width: 500px;
      height: 100vh;

      background-color: blue;
    }
    .r{
      margin-left: -500px;
      width: 500px;
      height: 100vh;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="c">
      <div class="main">中</div>
    </div>
    <div class="l">左</div>
    <div class="r">右</div>
  </div>
</body>
</html>

12 css reset是什么（现在很少用）

12.1 reset.CSS:是一个css文件，用来重置css样式

CSS Tools: Reset CSS

12.2 Bootstrap：Normalize.css：CSS重置样式库

13 css sprit是什么有什么优缺点

13.1 是什么

把多个小图标合并为一张大图片，再通过移动大图的方式，在浏览器显示不同的大图中的小图标

13.2 优点

1 减少了http的请求次数，提升了性能。

13.3 缺点

维护较差：若大图中的小图标位移改变，难以维护

14 display：none与visibility；hidden；的区别

14.1 共同：都是用来做隐藏元素的

14.2 区别

14.2.1 占用位置的区别：display：none不占用位置； visibility：none：占用位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>111</p>
  <div style="display: none;">111</div>
  <p>222</p>

  <p>aaa</p>
  <div style="visibility: hidden;">aaa</div>
  <p>bbb</p>
</body>
</html>

效果：

14.2.2 重绘和回流的区别：

display：none； visibility：none：都会产生重绘，但是display：none还会再回流一次回流一定会造成重绘，但是重绘不一定会造成回流

14.2.3 产生重绘和回流的情况

产生回流的情况：改变元素的位置（left、top。。。）、显示隐藏元素产生重绘的情况：样式的改变

15 opacity和rgba的区别

15.1 相同

都可以实现透明的效果

15.2 区别

15.2.1 opacity：取值范围从0到1

子元素会继承opacity的透明值

<!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 type="text/css">
    .o1{
      background-color: red;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div class="o1">
    <p>这是父元素</p>
    <div class="o2">
      <p>这是子元素</p>
    </div>
  </div>
</body>
</html>

结果：

15.2.2 rgba： R表示红色； G表示绿色； B表示蓝色其中这三个取值可以取正整数和百分数 A表示透明度（a的取值从0到1）

<!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 type="text/css">
    .o1{
      background-color: rgba(255, 0, 0, 0.5);
      
    }
  </style>
</head>
<body>
  <div class="o1">
    <p>这是父元素</p>
    <div class="o2">
      <p>这是子元素</p>
    </div>
  </div>
</body>
</html>

效果：

CSS面经D1