HTML&CSS（二）1. 解释下浮动和它的工作原理？清除浮动的方法？（掌握）浮动元素脱离文档流，不占据空间。浮动元

1. 解释下浮动和它的工作原理？清除浮动的方法？（掌握）

浮动元素脱离文档流，不占据空间。

浮动元素碰到包含它的边框或者浮动的边框停留。

使用 块级空标签 清除浮动

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      border: 1px solid #000;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="clear"></div>
  </div>
  <div class="box"></div>
</body>
</html>

这种方法是在所有浮动标签中添加一个块级空标签定义 css clear：both；弊端就是增加了无意义的标签。

溢出隐藏

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      overflow: hidden;
      width: 400px;
      border: 1px solid #000;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

给父盒子设置overflow方法

使用 after伪对象 清除浮动

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      border: 1px solid #000;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .father::after {
      content: '';
      height: 0;
      visibility: hidden;
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

该方法只适用于非IE浏览器，还要设置height：0，否则该元素会比实际高出若干像素。

使用 before和after伪对象 清除浮动

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      border: 1px solid #000;
      background-color: pink;
    }
    .son {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .father::before,
    .father::after {
      content: '';
      display: table;
    }
    .father::after {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <div class="box"></div>
</body>
</html>

该方法只适用于非IE浏览器

2. 如何让一个盒子在页面垂直水平居中（掌握）

方法一：利用 margin：auto

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .son {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

方法二：利用transform

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

方法三：利用 display：flex;

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

方法四：利用定位

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .son {
      position: absolute;
      left: 50%;
      top: 50%;
      /* 自身盒子宽高的一半 */
      margin-top: -50px;
      margin-left: -50px;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

2. 前端性能优化方案（掌握）

减少DOM操作
部署前，图片压缩，代码压缩
优化js代码结构，减少冗余代码
使用内容分发cdn加速
静态资源缓存
图片延迟加载
减少http请求，合理设置http缓存

3. css选择器优先级顺序（掌握）

ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href="segmentfault.com"]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}

4. CSS3有哪些新特性（掌握）

border-radius 圆角

box-shadow 阴影

text-shadow 文字阴影

gradient 线性渐变

transform 旋转、缩放、移动或倾斜

scale 缩放

translate 位移

媒体查询多栏布局多背景

5. 什么是空元素？（掌握）

即没有内容的HTML元素，例如：br、meta、hr、link、input、img

6. 如何实现浏览器内多个标签页之间的通讯（掌握）

1.定时器 setInterval + Cookie

在 页面A 设置一个使用 setInterval 定时器不断刷新，检查Cookies是否发生变化，如果变化就进行刷新的操作。

由于 Cookies 是同域可读的，所以在 页面B 审核的时候改变Cookies的值，页面A自然是可以拿到的。

缺点：浪费资源

localStorage localStorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信（ps：session是会话及的存储空间，每个标签页都是单独的）

直接在widow对象上添加监听即可：

window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))

onstorage 以及 storage事件，针对都是非当前页面对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。

然后就是在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem('a', 'b')代码，同样是不会触发监听函数的。

7. 为什么要初始化css样式（掌握）

浏览器差异

不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异

提高编码质量

如果不初始化，整个页面做完会很糟糕，重复的css样式很多

8. CSS3新增的伪类有哪些？（掌握）

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

9. 说说对canvas，svg，webgl的理解（掌握）

Canvas 是HTML5新增的一个元素对象，名副其实就是一个画布，浏览器 js 配有相应的操作api，可以不再依赖其他的API或组件而直接绘图，相当于2D的API。Canvas 适用于位图，高数据量高绘制频率（帧率）的场景，如动画、游戏；
SVG 是给数据就可以绘制点、线、图形的，基于 XML 的标记语言；SVG 适用于矢量图，低数据量低绘制频率的场景，如图形、图表；
WebGL（全写Web Graphics Library）是一种3D绘图标准，通俗说WebGL是canvas绘图中的3D版本。因为原生的WebGL很复杂，我们经常会使用一些三方的库，如three.js等，WebGL 主要用来做3D 展示、动画、游戏。

10. 浏览器是如何渲染UI的？（掌握）

浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
与此同时，进行css解析，生成Style Rules
接着将DOM Tree 和 Style Rules 合并成 Render Tree
接着进入布局(layout)阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
随后调用GPU进行绘制(Paint),遍历Render Tree的节点，并将元素呈现出来