一.基础知识（一）

1.常见的选择器及其优先级
内联样式：1000
id：100
类、伪类、属性选择器：10
标签、伪元素：1
通配符：0
注意：样式的后边添加 !important，该样式会获取到最高的优先级

2.说一下伪元素和伪类的区别和使用?

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，表示页面中一些特殊的并不真实的存在的元素（特殊的位置），比如：::before 元素的开始。
• 伪类：伪类用来描述一个元素的特殊状态，比如：第一个子元素（:first-child）、被点击的元素（:active）、鼠标移入的元素（:hover）...

3.flex是哪几个属性简写？

• flex-grow：指定弹性元素的伸展的系数；
• flex-shrink：指定弹性元素的收缩系数；
• flex-basics：设置占据主轴空间的大小;
  flex: 1; === flex: 1 1 0;

4.说一下link 和@import 的区别?

• link无兼容性问题，在页面载入时同时加载；支持JS控制DOM改变样式，而@import不支持
• @import需要页面完全载入后加载；

5.说一下CSS3 中有哪些新特性？
圆角、阴影、渐变、动画、转换等

CSS3 动画
CSS3 有两种动画，扑间动画和帧动画
1、扑间动画 ：只能控制开头结尾（transition 过渡）
2、帧动画 ：除了控制开头结尾之外，还能控制动画的过程 （animation 动画）

6.CSS预处理器/后处理器是什么？为什么使用/优点？
预处理器：增加复用性、mixin/变量/函数等利于开发简便、易于扩展
后处理器：给浏览器添加私有前缀，解决浏览器兼容性问题
PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀

7.说一下单行、多行文本溢出隐藏怎么实现？
单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

8.说一下什么是盒子模型？
把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型

• box-sizeing: content-box：标准盒模型的 width 和 height 属性的范围只包含了 content。
• box-sizeing: border-box：IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

9.说一下媒体查询/栅格布局?（了解）
媒体查询 ：使用 @media 查询，可以针对不同的媒体类型定义不同的样式，提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与指定的规则相匹配的时候 CSS 才会真的被应用。
栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。
10.margin和padding的使用场景？（了解）
使用margin的场景：
1.若需要在border外侧添加空白时。
2.空白处不需要背景（色）时。
使用padding的场景：
1.需要在border内测添加空白时。
2.空白处需要背景（色）时。

11.说一下隐藏元素的方法有哪些？
overflow:hidden（防止溢出）；display:none（不会占用空间）；opacity:0（元素的透明度）；visibility:hidden（占位）；

12.CSS3 中的 transform(转换) 有哪些属性？
1、translate ： 位移，translate（x，y）有两个值，第一个是x轴，第二个是y轴
2、rotate: 旋转，rotate(XXdeg) deg值为你要旋转的角度
3、scale: 缩放，scale(x, y) x为x轴，y为y轴, 它只是视眼可见的放大了，其实在dom元素中没有变化

transform: translate(500px,500px) scale(1.5,1.5) rotate(1080deg);

4、skew 斜切

13.说一下display:none 与 visibility:hidden 的区别？

• display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；
  是非继承属性，通过修改子孙节点的属性无法显示。
• visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。是继承属性，通过设置visibility：visible，可以让子孙节点显示。

14.常见的图片格式及使用场景？

• jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片。
• gif：支持的颜色比较少，支持简单透明，支持动图，一般用于颜色单一的图片，动图。
• png：支持的颜色丰富，支持复杂透明，不支持动图，一般用于颜色丰富，复杂透明图片（专为网页而生）。
• webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，但兼容性不好。
• base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64。

二.基础知识（二）

1.CSS 优化和提高性能的方法有哪些？

• 使用link样式分离
• css 压缩
• 选择器性能问题，别让css做太多计算
• 渲染性能问题，减少重绘回流（重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘；回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。）
• http问题，如使用精灵图（雪碧图）
  精灵图：把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。

2.z-index 属性在什么情况下会失效?
z-index属性来指定元素的层级
父元素 position 为 relative 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；
元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed 中的一种；
元素在设置 z-index 的同时还设置了 float 浮动。解决：float 去除，改为 display：inline-block；

3.说一下对 requestAnimationframe 的理解？
请求动画帧

MDN 对该方法的描述：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。用cancelAnimationFrame()来取消执行动画

优势：

• CPU 节能、函数节流、减少DOM操作

4.为什么有时候⽤translate来改变位置⽽不是定位？

• translate是transform的一个值。改变transform或者opacity不会触发浏览器重新布局，或者重绘，只会触发复合，在使用绝对定位时会触发重绘和回流操作。
• transform使浏览器为元素创建一个GPU图层，但是改变绝对定位会使用到CPU，因此translate更加高效，可以缩短平滑动画的绘制时间。
• translate改变元素时，元素依然会占据原始位置，但是绝对定位不会发生这样的情况。

5.li和li之前有看不见的空白间隔是什么原因，如何解决？

• li元素换行产生的换行符，会变成一个空格，空格就占用一个字符的宽度。
• 解决办法：不使用换行，将所有的li都在一行展示；将ul的字符尺寸设置为0，文字大小为0,则空格就不会被展示，但是如果在ul中设置的字体，需要重新设置；给ul设置letter-space:-5px,并且给li的letter-space设置为normal

6.对 CSS sprites 的理解？
是一种网页图片应用处理方式:将一个页面涉及到的零星图片都包含到一张大图中去。

7.什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x 这种图片？
8.对line-height 的理解及其赋值方式？
line-height 指一行文本的高度，包含了字间距，上间距、下间距，实际上文本行基线间的垂直距离；
如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；

9.dispaly:inline-block什么时候会产生间隙？
将一些元素在同一行显示
解决方法：移除空格；使用margin负值；使用font-size：0；letter-spacing（字符间距）；word-spacing（单词间距）
10.对 CSS 工程化的理解？
工程化指遵循一定的标准和规范，提高开发效率、降低成本、保证质量的一种手段

三、定位与浮动

1.说一下清除浮动/解决高度塌陷有哪些方式？

• 给父级 div 定义height属性
• 最后一个浮动元素之后添加一个空的 div 标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
• 使用 :after 伪元素。由于 IE6-7 不支持 :after，使用 zoom:1

2.说一下 clear 属性清除浮动的原理？
官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。
clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

3.说一下什么是 margin 重叠问题？如何解决？

• 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。重叠只会出现在垂直方向。
• 解决办法：
  兄弟之间重叠：底部元素变为行内盒子：display: inline-block；底部元素设置浮动：float；底部元素的 position 的值为absolute/fixed
  父子之间重叠：父元素加入：overflow: hidden；父元素添加透明边框：border:1px solid transparent；子元素变为行内盒子：display: inline-block；子元素加入浮动属性或定位

4.说一下对BFC的理解？怎么创建BFC?
BFC(Block Formatting Context)： 块级格式化环境
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex 等；
overflow：值不是visible

5.说一下position 的属性/作用有哪些？
属性：static 默认值，元素是静止的没有开启定位；relative 开启元素的相对定位；absolute 开启元素的绝对定位；fixed 开启元素的固定定位；sticky 开启元素的粘滞定位。一般都要配合偏移量："left"、“top”、"right"以及 "bottom"属性使用。

6.说一下 sticky 定位怎么使用？是在哪两个定位间切换？
如设置top：0可以粘滞效果，在fixed和relative直接切换

7.absolute 与 fixed 共同点与不同点?
共同点：

• 改变行内元素的呈现方式，将 display 置为 inline-block
• 使元素脱离普通文档流，不再占据文档物理空间
• 覆盖非定位文档元素
  不同点：
• 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动；
• absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

8.display、float、position 的关系?
总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整’display’的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。

9.说一下元素的层叠顺序？
当两个元素都是块级元素时，默认情况越后面的元素层级越高；当两个元素为行内块时，越后面的元素层级越高且行内块元素的背景层级比文字高。当两个元素为行内元素时跟行内块一样

四.布局问题

1.说一下常见的 CSS 布局单位/px、em、rem 的区别及使用场景？

• 区别：px是固定像素，一旦设置了就无法因为适应页面而改变，em和rem相对于px更具有灵活性，因为他们是相对的长度单位（即长度不是定死的，更适用于响应式布局）。em和rem的区别一句话概括:em相对于父元素，rem相对于根元素(html)
• 使用场景：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem

2.说一下 Flex 布局/grid布局的区别？
Flex一维布局，适合做局部布局，比如导航栏组；grid二维布局，通常用于整个页面的规划

3.说一下三栏布局怎么实现？
若高度不给，那么高度能自适应的只有 flex 布局和 表格布局，网格布局了，其他则不可以

绝对定位

 <style type="text/css">
            .container {
                position: relative;
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }

            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }

            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                height: 300px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

浮动，两边固定大小，对应方向浮动，中间设置margin值，且中间一栏放最后

 <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    </style>
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
      </div>

利用flex:1

<style>
      .container{
            display: flex;
        }
        .left{
            width:200px;
            background: red;
        }
        .main{
            flex: 1;
            background: blue;
        }
        .right{
            width:200px;
            background: red;
        }

</style>
<body>
  <div class="container">
    <div class="left">left</div>
    <div class="mid">mid</div>
    <div class="right">right</div>
  </div>
</div>
</body>

Table布局：

<style>
    .container{
            display: table;
            width:100%;
        }
        .container>div{
            display: table-cell;
        }
        .left{
            width: 100px;
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            width: 200px;
            background: red;
        }
</style>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">center</div>
        <div class="right">right</div>
    </div>
</body>

圣杯布局：利用浮动和负边距来实现，margin 负值将其移动到上一行
双飞翼布局：双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

4.说一下水平垂直居中有哪些方式？

• 第一种方式是给父盒子设置flex布局：display: flex;align-items: center;justify-content: center;
• 给子盒子设置margin: auto
• 使用绝对定位：容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
• tabel-cell实现垂直居中：容器设置 display: table-cell;vertical-align: middle；子元素是块级元素，使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center。
• 给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto；

5.说一下两栏布局怎么实现？

• 浮动+margin：给左边盒子添加一个浮动，之后再给右盒子设置一个 marign-left ，将其挤到右边去，形成左边定宽，右边自适应。
• 浮动+BFC：给左边盒子添加一个浮动，之后可以给右盒子设置一个 overflow:hidden 开启 BFC ，清除左侧盒子 浮动带来的影响，形成左边定宽，右边自适应。
• 左盒子定位+margin：此时将左边盒子的浮动，改变成定位就行了，右盒子还是设置一个 marign-left; ，将其挤到右边去，形成左边定宽，右边自适应。
  6.怎么根据设计稿进行移动端适配？
• 适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
• 适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容
  7.说一下响应式设计的概念及基本原理？
• 概念：是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
• 基本原理：是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。
  8.说一下grid布局？
  即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

五.场景应用/如何实现

1.怎么实现一个三角形/梯形？

• 实现三角形：
  下左上右

<style>
    .box1{
               width: 0;
               height: 0;
               border: 100px solid;
               border-color: rebeccapurple transparent transparent transparent;
           }
</style>

• 实现梯形：

<style>
.box3{
            width: 200px;
            height: 200px;
            border:100px solid;
            border-color: rebeccapurple transparent transparent transparent;
        }
</style>

2.怎么画一条0.5px的线？

transform: scale(0.5,0.5);

3.怎么实现一个扇形？

div{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-radius: 100px;
    border-top-color: red;
}

3.实现一个圆形

div{
  width:100px;
  height:100px;
  border-radius: 50%;
  background: #333;
}

4.怎么设置小于12px的字体？

• -webkit-transform:scale(0.5);
• 使用图片

5.如何解决1px的问题？

window.devicePixelRatio = 设备的物理像素 / CSS像素。

• JSX解决

<div id="container" data-device={{window.devicePixelRatio}}></div>

#container[data-device="2"] {
  border:0.5px solid #333
}

• 利用tranform：scale（0.5）

6.如何判断元素是否到达可视区域？

• window.innerHeight 是浏览器可视区的高度；
• document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
• imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
• 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

7.怎么实现一个宽高自适应的正方形？

.square {
  width: 10%;
  height: 10vw; //视口的宽度,1 个 vw 相当于页面宽度的 1%
  background: tomato;
}

8.响应式布局中margin和margin-top的百分比？
是相对于父元素的width，跟height没关系