一、css 基本

1、CSS特性：继承性，层叠，优先级

继承性：子标签会继承父标签的某些样式，如文本颜色和字号。(text- font- color)

层叠性：样式冲突，遵循的原则是就近原则。

优先级:定义 CSS 样式时，经常出现两个或更多规则应用在同一元素上，此时，谁的权重高显示谁的样式。（选择器相同，则执行层叠性；选择器不同，就会出现优先级的问题。）

 !Important > 行内式 > id > 类/伪类/属性 > 标签选择器  >  全局
（对应权重：无穷大∞>1000>100>10>1>0）

2. 介绍一下 CSS 的盒子模型？

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。

IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。

box-sizing: border-box ：IE（替代）盒模型。

3. css 选择器优先级？

!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。

4. css选择器

~（波浪号):波浪号表示A ~ B表示选择 A 标签后的所有 B 标签，但是 A 和 B 标签必须有相同的父元素。

<style>
  h3~h5 {
    color: red;
  }
</style>

<body>
  <div>
    <div>
      <h3>我是第1行</h3>
      <h5>我是测试行1</h5>
      <h5>我是测试行2</h5>
    </div>
    <h5>我是第5行</h5>
  </div>
</body>

波浪选择器图示：

+（加号）:~（加号）加号又被称作兄弟选择器。A+B 表示选择紧邻在 A 后面的 B 元素，且 A 和 B 必须拥有相同的父元素，所选到的仅为一个 B 元素标签。
<style>
  h3+h5 {
    color: red;
  }
</style>

<body>
  <div>
    <div>
      <h3>我是第1行</h3>
      <h5>我是测试行1</h5>
      <h5>我是测试行2</h5>
    </div>
    <h5>我是第5行</h5>
  </div>
</body>

加号选择器图示：

 >（大于号）:大于号表示某个元素的下一代元素。A>B 指选择 A 元素里面的 B 元素，其中 B 元素是 A 元素的第一代。
 
 <style>
        .myDiv>h3{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1行</h1>
        <h2>我是第2行</h2>
        <div class="myDiv">
            <h3>我是测试行</h3>
            <div>
                <h3>我也是测试行</h3>
            </div>
        </div>
        <h4>我是第4行</h4>
        <h5>我是第5行</h5>
    </div>
</body>

大于号选择器图示：

5. 行内元素有哪些？块级元素与那些？

块级元素：div / p / form / ul / li / ol / hr / fieldset / table / dd / dt / dl

行内元素：span / strong / a / b / em / img / input / lable / small / sub

6. webp 图像格式

webP 是由谷歌推出的一种全新图片文件格式，与JPEG格式一样，WebP 是一种有损压缩格式。不同的是，WebP 格式的压缩效率更为出色，在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。目前互联网的流量中有 65% 为图片，这意味如果 Google 让 WebP 格式得到普及的话，浏览网页的速度将大幅提升。

缺点：下载下来的WebP图片无法通过常规软件编辑、浏览，那就只有转换成常规格式了。

那么 webP 文件怎么打开呢?我们可以通过 ACDSee 能直接打开，或者通过Google Chrome浏览器来打开，当然了，第三方的世界之窗等浏览器也是可以打开的。如果机器上没有的话，可以尝试转换成jpg等常见格式。通过软件来转换，下载XnConvert，打开我们需要打开的文件，然后选择希望转换的格式即可!

二、布局

1. 弹性布局 flex

www.runoob.com/w3cnote/fle…

一.  flex-direction ：设置主轴的方向。
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。

二、flex-wrap ：设置子元素是否换行
    nowrap（默认）：不换行。
    wrap：换行，第一行在上方。
    wrap-reverse：换行，第一行在下方。

三、 flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap默认值为 row nowrap。
    .box {
      flex-flow: <flex-direction> <flex-wrap>;
    }

四、justify-content ：设置主轴上的子元素排列方式
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，项目之间的间隔都相等。
    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。


五、align-items ：设置侧轴上的子元素排列方式（单行）
    flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

六、align-content ：设置侧轴上的子元素排列方式（多行）
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。

七、 flex-shrink 属性
    flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    .item {
      flex-shrink: <number>; /* default 1 */
    }
    如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
    如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
    负值对该属性无效。

8、flex：1；的原理

flex-grow:1;flex-shrink:1;flex-basis:auto; 这三个样式的和写   
 flex: 1 1 auto;  简写 flex:1;

flex-grow:0;     扩展比率
默认值为0，容器中项目没有占满时，不分配剩余空间。
flex-shrink:1;   收缩比率
默认值为1，容器中项目超出容器大小时，把项目平均压缩到容器内。
flex-basis:auto; 伸缩基准值

2. rgba 和 opacity 的透明效果有什么不同

opacity 会继承父元素的 opacity 属性，而 RGBA 设置的元素的后代元素不会继承不透明属性。

3. display: none 和 visibility: hidden 的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

4. 隐藏一个 button 的方法（2种）写出一个 button 的按钮（2种）

1、隐藏
display: none;
visibility：hidden；
2、html
<input type = button>
<button>这是一个按钮 </button>

5、那么flex:1;等于什么呢？

flex-grow: 1 ：该属性默认为 0 ，如果存在剩余空间，元素也不放大。设置为 1 代表会放大。

flex-shrink: 1 ：该属性默认为 1 ，如果空间不足，元素缩小。

flex-basis: 0% ：该属性定义在分配多余空间之前，元素占据的主轴空间。浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto ，即项目本身大小。设置为 0% 之后，因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。在做两栏布局时，如果右边的自适应元素 flex-basis 设为 auto 的话，其本身大小将会是 0 。

flex: 1; === flex: 1 1 0;

6. line-height 如何继承？

父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。

父元素的 line-height 写了比例，比如 1.5 或 2，则子元素 line-height 也是继承该比例。

父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值。

7. position 的值， relative 和 absolute 分别是相对于谁进行定位的？

static: 默认值 没有定位，元素出现在正常的流中
relative:(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位
absolute:（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed:（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位
sticky: 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。

z-index规则:
1、值可以是正整数、负整数或0，数值越大，盒子越靠上；
2、如果属性值相同，则按照书写顺序，后来居上；
3、数字后面不能加单位。
4、z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

8. 隐藏页面元素的方法

display：none: 可以将元素在页面中彻底消失。
此元素原本所占据的位置，会被其他元素占据，也就是说它会导致浏览器的重排的重绘
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件 .conceal { display：none }

visibility：hidden: 也是非常常用的一种隐藏方式，但是跟display：none大有不同
visibility：hidden从页面上来看仅仅是隐藏该元素，DOM 结果依然会存在，只是处于一个不可见的状态。不会发生重排，但是会发生重绘。
给人的效果是隐藏了，所以他的自身事件不会触发。
特点：元素不可见，占据空间，无法响应点击事件.conceal { visibility：hidden }

opacity: 属性表示元素的透明度，将元素的透明度设置为 0 之后，在用户的严重，元素也是可以达到隐藏效果的该方法不常用，不会引发重排，一般情况下也会引发重绘
它是存在于页面之上的，所以他自身的事件仍然是可以触发的，但被他遮挡的元素是不能触发其他事件的
注意：其子元素不能设置 opacity 来达到显示的效果
特点：改变元素透明度，元素不可见，占据页面空间，可以响应点点击事件。.conceal { opacity：0 }

设置 height、width 模型属性为 0:要用这种方法实现隐藏需将元素的margin、border、padding、height和width等影响元素盒模型的属性设置成0，如果元素内有子元素的内容，还要设置其overflow：hidden 来隐藏子元素
特点: 元素不可见，不占据空间，无法响应点击事件.conceal { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }

position：absolute: 肯定看到这里会很惊讶为什么定位也能隐藏，其实我也是翻阅了一些资料之后才知道的，是将元素移出页面，不可见，从而就达到了"隐藏效果"虽然用处也很多，但多数不是用于“隐藏”。
特点:元素不可见，不影响布局.conceal { position: absolute; top: -9999px; left: -9999px; }

区别：关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

在这里插入图片描述

三、自定义样式

1. 画一条 0.5px 的直线？

// scale 缩放
height: 1px;
transform: scale(0.5);

2. 画一个三角形？

.a{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="a"></div>

3. 左右布局

父容器：display: flex;
右边容器：flex: 1;

4. 垂直居中几种方式？

1. 单行文本: 设置 line-height 等于 height
2. 图片: vertical-align: middle;
3. position：absolute;  top:50%;   transform:translateY(-50%)
4. display:flex;   align-items: center

5. 水平居中几种方式？

1. 行内元素: text-align: center
2. 块级元素: margin: 0 auto
3. position: absolute; left:50%; transform:translateX(-50%)
4. display: flex; justify-content: center

6. 中间定宽，两边自适应布局的三种实现方法

1. 浮动加定位

<body>
    <div class="parent">
    <div class="left">
        <div class="item"></div>
    </div>
    <div class="right">
        <div class="item"></div>
    </div>
    <div class="center">
        <div class="item"></div>
    </div>
    </div>
</body>


<style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        position: relative;
        overflow: hidden;
    }
    .left{
        float: left;
        width: 50%; 
        margin-left: -150px;
        background-color: red;
    }
    .right{
         float: right;
        width: 50%; 
        margin-right: -150px;
        background-color: yellow;
    }
    .center{
        position: absolute;
        left:50%;
        transform:translateX(-50%);
        width: 300px;
        background-color: green;
    }
    .left .item{
        margin-left: 150px;
    }   
    .right .item{
        margin-right: 150px;
    }   
    </style>

2. calc 计算法

<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</body>

<style type="text/css">
    html,body,div{
        height: 100%;
    }
    .left{
        width: calc(50% - 150px);
        float: left;
        background-color: red;
    }
    .right{
        width: calc(50% - 150px);
        float: right;
        background-color: yellow;
    }
    .center{
        width: 300px;
        float: left;
        background-color: green;
    }
/*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
    </style>

3. 弹性盒子法

<body>
    <div class="parent">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    </div>
</body>


<style type="text/css">
    html,body,div{
        height: 100%;
    }
    .parent{
        display: flex;
    }
    .left{
        flex:1;
        background-color: red;
    }
    .right{
        flex:1;
        background-color: yellow;
    }
    .center{
       
        width: 300px;
        background-color: green;
    }

    </style>



利用 flex: 1; 确实实现了三个不同内容的 div 平分空间

那么 ** flex: 1; === flex: 1 1 auto; 吗？**
第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 
auto, 即项目本身的大小

7. 实现两栏布局（左侧固定 + 右侧自适应布局）

现在有以下 DOM 结构：

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>
复制代码

1、利用浮动，左边元素宽度固定，设置向左浮动。将右边元素的 margin-left 设为固定宽度。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素。

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}
复制代码

2、同样利用浮动，左边元素宽度固定，设置向左浮动。右侧元素设置 overflow: auto; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  overflow: auto;
  height: 100%;
  background: lightseagreen;
}

3、利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 。

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  flex: 1;
  height: 100%;
  background: lightseagreen;
}
复制代码

4、利用绝对定位，父级元素设为相对定位。左边元素 absolute 定位，宽度固定。右边元素的 margin-left 的值设为左边元素的宽度值。

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}
复制代码

5、利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute 定位， left 为宽度大小，其余方向定位为 0 。

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  position: absolute;
  left: 200px;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: lightseagreen;
}

8.水平垂直居中多种实现方式

1. 利用绝对定位，设置 `left: 50%` 和 `top: 50%` 现将子元素左上角移到父元素中心位置，然后再通过 `translate` 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 利用绝对定位，子元素所有方向都为 `0` ，将 `margin` 设置为 `auto` ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

3. 利用绝对定位，设置 `left: 50%` 和 `top: 50%` 现将子元素左上角移到父元素中心位置，然后再通过 `margin-left` 和 `margin-top` 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}
复制代码

4. 利用 `flex` ，最经典最方便的一种了，不用解释，定不定宽高无所谓的。

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

四、清除浮动

1. 清除浮动的三种方式及其原理

一. 浮动元素的特性
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

二. 浮动元素带来的问题
因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。

三. 清除浮动的三种方式
  1.  使用空标签清除浮动 clear: both。
      原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度
      优点：通俗易懂，容易掌握
      缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
      建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

  2. 父级 div 定义 overflow: hidden
      原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度
      优点：简单，代码少，浏览器支持好
      缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏
      建议：只推荐没有使用 position 或对 overflow: hidden 理解比较深的朋友使用

3.   父级div定义伪类:after 和 zoom (用于非IE浏览器)
      原理：IE8 以上和非IE浏览器才支持 :after，原理和方法 1 有点类似，zoom
       ( IE 转有属性)可解决 ie6, ie7 浮动问题
      优点：浏览器支持好，不容易出现怪问题
          （目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
      缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持
      建议：推荐使用，建议定义公共类，以减少 CSS 代码
      <div class="div1 clearfloat"></>
      /*清除浮动代码*/
      .clearfloat: after{ display: block; clear: both; content: ""; visibility: hidden;
      height: 0 }
      .clearfloat{ zoom: 1 }

4、父级 div 定义 height
      原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。
      优点：简单，代码少，容易掌握
      缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题

五、 1rem、1em、1vh、1px各自代表的含义？

1. rem, em, vh, px

1. rem
    rem 是全部的长度都相对于根元素 <html> 元素。通常做法是给 html 元素设置一个字体大小， 然后其他元素的长度单位就为 rem。
    <div id="app">
　　    <div id="son></div>
    </div>
    html{ font-size:20px;}
    #app{
　　    width :4rem; ===>4*20=80px
    }
    #son {
 　　    width :2rem; ===>2*20 =40px
    }

2. em
      子元素字体大小的 em 是相对于父元素字体大小
      元素的width/height/padding/margin用em的话是相对于该元素的font-size
    <div id="app">
　　    <div id="son></div>
    </div>
    #app{
    　　font-size:10px;
    }
    #son{
    　　font-size:1em; ==>1*10=10px
    }

3. vw/vh
    vw是相对于视窗的宽度而定的，视窗就是客户端浏览器的可视区域，视窗被均分
    为100个单位，1vw的大小就是视窗宽度的百分之一。
    全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度
    和高度的 1%，不过，处理宽度的时候 % 单位更合适，处理高度的 话 vh 单位更好。
    h1{font-size:8vw;}  
    如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

4. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
    一般电脑的分辨率有{1920*1024}等不同的分辨率
    1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

2. pc端移动端适配 rem 插件方式

blog.csdn.net/weixin_4885…

六、 css3 特性、兼容性

1. css3 的新特性

1、@font-face 加载字体样式，
2、文字渲染，text-decoration, text-fill-color: 文字内部填充颜色，
   text-stroke-color: 文字边框填充颜色，text-stroke-width: 文字边界宽度。
3、css3的多列布局 Column-count：表示布局几列。
   Column-rule：表示列与列之间的间隔条的样式 Column-gap：表示列于列之间的间隔
4、边框圆角的布局。border-radius: 50px;
5、css3 的渐变效果， （ gradient ）
6、 css3 的阴影效果图 （ shadow 反射和 reflect 反射效果）
7、css3 的多背景图片
8、css3 的动画效果 animation

animation: animation-name | 规定需要绑定到选择器的 keyframe 名称。。 | | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | | animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 | | animation-timing-function | 规定动画的速度曲线。 | | animation-delay | 规定在动画开始之前的延迟。 | | animation-iteration-count | 规定动画应该播放的次数。 | | animation-direction | 规定是否应该轮流反向播放动画。

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

2. 简明说一下 CSS link 与 @import 的区别和用法？

link属于HTML标签，而@import是css提供的；

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

link方式的样式的权重高于@import的权重。

3. 常见兼容性问题？

浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

让浏览器字体小于 12px

移动端：transform: scale(0.6);

PC端：避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px;最后兼容IE: font-size:10px

font-size: 12px;
transform: scale(0.6);
font-size: 10px;

4. 请简述web开发中的兼容问题

1、浏览器默认的内外边距不一样，所以用通用选择器 * 设置 margin 和 padding 来设置。
2、块标签设置浮动后，有设置 margin 的情况下，在 ie6 下的 margin 比别的浏览器大。
3、img 标签会有默认的间距，需要用浮动去设置
4、火狐浏览器中的点击事件和滚动事件需要加（event）来兼容
5、div 里的内容，ie 默认为居中，firefox 默认为左对齐，需要用 margin: 0px auto 来调节
6、css3 的动画效果不兼容 ie8 以下。需要使用 js 去写动画。
7、ie6的双倍边距，比如设置了 margin: 10px, ie6 中默认为 20px，需要使用 display: inline,block.

5. 回流、重绘以及区别？

回流 : 当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow) 。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.

重绘: 当 render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘.

区别: 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流

如何减少重排和重绘？

最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText 。

批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。

使用 **absolute** 或 **fixed** 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。

开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

七、大屏可视化自适应方案

1. vh、vw、rem组合方式

body,html {
  font-size:1vw
}
复制代码

描述： 定义父级大小，之后进行组件的height、margin、padding等多种css属性采用rem作为单位，继承父级设置等单位（1vw）,实现适配。\

坑点： 仅能满足一些特定的小场景，大屏中的实施非常不友好，例如我们覆盖element表格中的为font-size：0.5rem。此时投放到大屏，字体是自适应的，但其组件的多种默认属性用px为单位。如line-height的设置为22px，此时覆盖样式后的字体过大，并不能适应行高，就会出现文字重叠等错乱问题。。

2. 采用 font.js + rem 的组合

(function(doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
复制代码

描述： 引用第三方脚本，通过在main.js中写代码计算，使用rem进行继承,实现适配。\

坑点： 原理跟上述方法1是一样的，同样无法实现大屏适配，坑点不在赘述。

3. 采用 transform 方案

采用了css3的缩放transform: scale(X)属性，改变分辨率时，scale的值是变化的。

1. 封装一个全局组件

以vue 为主，直接粘贴本人编写的代码如下，该公共组件为了下文中方便描述，命名为ScreenAdapter

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920' 
    },
    height: {
      type: String,
      default: '1080' 
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('任你千变万化,我都不会影响性能')
    }
  }
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background: red;
}
</style>
复制代码

2. 将此组件作为外壳，包在我们搭建的页面上

<ScreenAdapter> <div>大家好，我是大屏展示页面</div> </ScreenAdapter>

3. 定义网页规范

根据美工给出的设计（主要获取美工给出的分辨率，如1920*1080）。
Div布局多采用flex+百分比布局（当然也可以根据美工给出的设计，默认写px。）。
各类空间设计，根据美工给出的px进行定义即可

问题统一回复

问题：很多朋友说加入后会有留白的情况，需要调试。
解决：是因为注入的宽高，跟电脑实际分辨率宽高不一致的原因

问题：注入的宽高，跟分辨率宽高一致，为什么还有留白？
解决：

一致的话，只需要将浏览器全屏就可以看到正确的效果.\
将注入的宽高换成document.documentElement.clientWidth、document.documentElement.clientHeight。即使不全屏也可以得到正确的结果
这下大家应该明白了吧😊，基础很重要哦，哈哈～～～

感谢小亮_money\juejin.cn/post/697241…

总结：

基于transform缩放的方案，优点是按设计稿设置元素大小，无需转换长度单位。缺点是放大展示时，echarts等图表会出现失真现象。为了避免图表失真，设计稿设计应按大屏尺寸设计，使其在屏幕中缩小展示。比如19201080和1366768同为16:9的设计稿，应按1920*1080尺寸设计。

基于rem的缩放方案，元素长度单位需转换为rem。放大展示时，不会出现图表失真的情况。当缩小至根元素fontsize<12px时，由于浏览器展示的最小字号是12px，文字不能被再缩小，会出现比例不协调的情况。解决办法是，设置画布的最小宽度和最小高度，当屏幕小于最小宽度和最小高度时增加滚动条，使画布不再被缩小。

八、Less和SaSS

1.1 Less定义：是一种动态的样式语言,使CSS变成一种动态的语言特性，如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)

1.2 SaSS定义：是一种动态样式语言，SaSS里面的语法属于缩排语法，对于之前的css相比，多出了很多功能，更容易阅读

1.3 预处理器。Less和SaSS都属于预处理器，它会定义一种新的语言，其总体思想是为CSS增加一些编程的特性，将 CSS 作为目标生成文件，之后开发者就只要使用这种语言进行CSS的编码工作。

两者之间的区别:
2.1 编译环境：
Sass是在服务端上面处理的，之前是Ruby,现在是Dart-Sass或者是Node-Sass，
但是Less在编译时，需要引入less.js来处理Less代码输出CSS到浏览器上，也可以在开发服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址
2.2 变量符：
Less是@，而Sass是$,示例代码如下

//Less-变量定义
@color: #008c8c; 
#footer {
  border: 1px solid @color; 
}
//scss-变量定义
$color: #008c8c;

#footer {
  border: 1px solid $color; 
}

2.3 输出设置
Less没有输出设置，而Sass有4种输出选项，如下
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
2.4 Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持，其中if(){}else{}示例代码如下

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { 
    font-weight: bold;
  } 
  @else if $weight == light { 
    font-weight: 100;
  } 
  @else { 
    font-weight: normal;
  } 
}
.txt1 { 
  @include txt(bold); 
}

编译结果
.txt1 {
  color: white;
  font-weight: bold; 
}

总体优点
3.1 提供CSS缺失的样式层复用机制
3.2 减少冗余代码
3.3 提高样式代码的可维护性
3.4 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异
3.5 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。\

CSS