前端面试题：CSS

1. 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行?

2. 在固定的父容器下水平垂直居中的布局

3.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

4.CSS变量（CSS Variables）使用的方法和好处

5.CSS合法颜色值

6.web前端图片模糊到清晰的实现过程

7.如何设置字体之间的间隙？

---

7.如何设置字体之间的间隙？

给标签设置letter-spacing属性

---

6.web前端图片模糊到清晰的实现过程

在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现？

默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图，然后我们把缩略图模糊处理后按照原图尺寸显示，这样做的目的是为了提高用户体验；
使用js去监听原图的加载，当原图加载成功后，我们把缩略图隐藏，让原图显示出来。这样就实现了图片由模糊变成清晰的过程，为了让变化有渐变效果，我们需要使用到css的transition属性。

具体代码实现如下：
html

<div class="box">
 <img src="" class="bg"/>
 <img src="" class="show_img"/> 
</div>

css

.box{
 position: relative;overflow: hidden;height: 300px;width: 300px;
}
.box img{
 width: 100%;height: 100%;
}
.box .bg{/*缩略图*/
  display: block;filter: blur(15px);transform: scale(1);js：
}
.box .show_img{/*加载完成显示的实际图*/
 position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear;
}

js

<script>
 var show_img=document.querySelector('.show_img'),
 /*图片加载完成*/  
 show_img.onload = function () {
  show_img.style.opacity="1";
  };
</script>

参考连接：https://www.cnblogs.com/ypppt/p/13055058.html

---

5.CSS合法颜色值

• 十六进制色
• RGB 颜色
• RGBA 颜色
• HSL 颜色
• HSLA 颜色
• 预定义/跨浏览器颜色名
• HSV颜色

参考链接：

1. RGB、HSV和HSL颜色空间
2. CSS 合法颜色值

---

4.CSS变量（CSS Variables）使用的方法和好处

• CSS自定义变量
  以往: CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS预编译器。
  现在: 我们可以直接在CSS中定义和使用变量

举个🌰：

/*声明一个变量*/
:root{--bgColor: #90ffc1;}
/*使用变量*/
.box {background:var(--bgColor);}

上面代码中，借助了结构性伪类中的 :root{ }中，在全局 :root{ } 中定义了一个 CSS 变量，命名为 --bgColor，定义变量名字前面一定要注意符号（--），通过var(定义义变量名)来调用。

• CSS 变量的层叠与作用域

CSS 变量是支持继承的，不过这里说成级联或者层叠更好

在 CSS 中，一个元素的实际属性是由其自身属性以及其祖先元素的属性层叠得到的，CSS 变量也支持层叠的特性，当一个属性没有在当前元素定义，则会转而使用其祖先元素的属性。若当前元素有定义的属性，将会覆盖祖先元素

和作用域有异曲同工之处，通俗一点就是局部变量会在作用范围内覆盖全局变量。同名属性

:root{--bgColor: pink;}
.box {margin:20px auto 0;width: 200px;height: 200px;--bgColor: blue;}
// 你猜，渲染出来的box背景颜色是啥？

• CSS 变量并不支持 !important

:root{--bgColor: pink !important;（不支持!important）}
.box {margin:20px auto 0;width: 200px;height: 200px;--bgColor: blue;}

• CSS 变量的组合

:root{--first-word:"this";--second-word:"is";--third-word:"CSS Variable";--word-color:skyblue;}
.box:before{content:var(--first-word)' 'var(--second-word)' 'var(--third-word);display: block;color:var(--word-color);}

上面box 的内容将会显示为:this is CSS Variable

• CSS 变量&& calc( )

:root{--f-size: 14px;}
.box {font-size: calc(var(--f-size) * 2);color:skyblue;text-align: center;}

• CSS 变量的好处

1. 代码更加简单明了，不重复

2. 一个网页会使用到很多重复的样式（色彩，字体的大小，间距），如果采用了变量来声明，会减少浏览器的渲染机制，从而大大提高效率

3. 精简代码，减少冗余，代码更直观，有利于响应式开发

至于CSS变量的兼容性可查询 https://caniuse.com/#search=css%20var~~

---

3.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• display: none;
  DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
  事件监听：无法进行 DOM 事件监听；
  性能：动态改变此属性时会引起重排，性能较差；
  继承：不会被子元素继承，毕竟子类也不会被渲染；
  transition：transition 不支持 display。
• visibility: hidden;
  DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
  事件监听：无法进行 DOM 事件监听；
  性 能：动态改变此属性时会引起重绘，性能较高；
  继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
  transition：transition 不支持 display。
• opacity: 0;
  DOM 结构：透明度为 100%，元素隐藏，占据空间；
  事件监听：可以进行 DOM 事件监听；
  性 能：提升为合成层，不会触发重绘，性能较高；
  继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
  transition：transition 不支持 opacity。

---

2. 在固定的父容器下水平垂直居中的布局

• 绝对定位+transform实现居中布局
  要给父级加上相对定位，还有一点问题就是兼容性的问题
  要给父级元素加上：position:relative;
  子元素加上：position:absolute;top:50%;left:50% ;transform: translate(-50%,-50%);
• table+margin来实现水平居中，table-cell和vertical-align实现垂直居中
  有一点问题就是有可能会影响整体的布局效果没有绝对定位好
  要给父级元素加上：display:table-cell;vertical-align:middle;
  子元素加上：display:table;margin:0 auto;
• flex来实现水平垂直居中，它的作用最大
  要给父级元素加上：display: flex; justify-content: center; align-items: center;

更多方法参考链接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92

---

1. 在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行?

1. media query

h2{
 font-size:25px
}

@media screen and (max-width: 850px){/* 可视区域小于 850px, 设置更小font-size属性 */
  h2{
    font-size:19px;
  }
}

2. media query + -webkit-transition 实现平滑转变

div{
    font-size: 40px;
    -webkit-transition:font-size 0.2s ease-out;
}

@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
...

3. viewpoint: css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。

“viewpoint” = window size

vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大