前端面试大全（CSS篇——2/2）
目录
-
-
-
- 面试系列
- 内容介绍
- 21、在网页中的应该使用奇数还是偶数的字体？为什么呢？
- 22、margin和padding分别适合什么场景使用？
- 23、元素竖向的百分比设定是相对于容器的高度吗？
- 24、全屏滚动的原理是什么？用到了CSS的那些属性？
- 25、什么是响应式设计？响应式设计的基本原理是什么？
- 26、::before 和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
- 27、如何修改chrome记住密码后自动填充表单的黄色背景？
- 28、你对line-height是如何理解的？
- 29、怎么让Chrome支持小于12px 的文字？
- 30、让页面里的字体变清晰，变细用CSS怎么做？
- 31、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
- 32、display:inline-block 什么时候会显示间隙？
- 33、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
- 34、png、jpg、gif 这些图片格式解释一下，分别什么时候用？
- 35、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
- 36、什么是CSS 预处理器/ 后处理器？
- 37、什么是CSS reset？
- 38、css sprite是什么,有什么优缺点。
-
- 1、概念
- 2、优点
- 3、缺点
- 39、你用过栅格系统吗？如果使用过，你最喜欢哪种？
- 40、渐进增强和优雅降级
- 41、什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
- 42、display: none;与visibility: hidden;的区别
- 43、rem和em
- 44、css3中的动画
-
-
面试系列
后续更新分类将同步更新系列目录：
- 前端面试大全（序篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116518423
- 前端面试大全（HTML篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116519021
- 前端面试大全（CSS篇——1/2）：https://blog.csdn.net/cainiaoyihao_/article/details/116521551
- 前端面试大全（CSS篇——2/2）：https://blog.csdn.net/cainiaoyihao_/article/details/117020429
- 前端面试大全（Ajax篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116979060
- 前端面试大全（jQuery篇——含移动端常见问题）:https://blog.csdn.net/cainiaoyihao_/article/details/117281709
- 前端面试大全（JavaScript篇——面试利器值得拥有！）：https://blog.csdn.net/cainiaoyihao_/article/details/117355120
内容介绍
前端面试大全（CSS篇——2/2）。
21、在网页中的应该使用奇数还是偶数的字体？为什么呢？
应该是用偶数字体
原因：
像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看
22、margin和padding分别适合什么场景使用？
何时应当使用margin
- 需要在border外侧添加空白时。
- 空白处不需要背景（色）时。
- 上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
何时应当时用padding
- 需要在border内测添加空白时。
- 空白处需要背景（色）时。
- 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
23、元素竖向的百分比设定是相对于容器的高度吗？
是的，元素的百分比设置一般是根据父级元素的宽高决定的，如果父级元素没有宽高百分比是不起作用的
24、全屏滚动的原理是什么？用到了CSS的那些属性？
全屏滚动的原理就是每次滚动滚轮，屏幕移动的距离就刚好是一个屏幕的距离，利用css的高度百分比实现这个效果，因为设定百分比的值是需要更具父元素设置的所以需要给html，body都设置为高度百分百，然后一层一层的设置，用js控制鼠标滚轮事件
25、什么是响应式设计？响应式设计的基本原理是什么？
响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案基本原理就是利用css的媒体查询功能更具不同屏幕的大小，向下兼容设备、移动优先，达到响应的效果
26、::before 和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
- 双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
- 对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。
- 如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。
27、如何修改chrome记住密码后自动填充表单的黄色背景？
chrome 表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：
input : -webkit-autofill {
background-color : #FAFFBD ; background-image : none ; color : #000 ;
}
在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给input文本框使用图片背景的时候，原来的圆角和边框都被覆盖了：
情景一：input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
}
如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级，如：
input : -webkit-autofill {
-webkit-box-shadow : 0 0 0px 1000px white inset ; border : 1px solid #CCC !important ;
height : 27px !important ; line-height : 27px !important ; border-radius : 0 4px 4px 0 ;
}
情景二：input文本框是使用图片背景的
这个比较麻烦，目前还没找到完美的解决方法，有两种选择：
1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果，那就只能牺牲chrome自动填充表单的功能，使用js 去实现，例如：
$ ( function () {
if ( navigator . userAgent . toLowerCase (). indexOf ( "chrome" ) >= 0 ) {
$ ( window ). load ( function (){
$ ( 'ul input:not(input[type=submit])' ). each ( function (){
var outHtml = this . outerHTML ;
$ ( this ). append ( outHtml );
});
});
}
});
遍历的对象可能要根据你的需求去调整。如果你不想使用js，好吧，在form标签上直接关闭了表单的自动填充功能：autocomplete=“off”。
28、你对line-height是如何理解的？
- line－height：是用来设置字体的行高，可以理解为设置文字高度的占位大小，单位可以是数字，或者像素
- 数字：更具文字的大小来决定 1.5相当于文字大小的1.5倍
- 像素：就是通常的px大小了
29、怎么让Chrome支持小于12px 的文字？
- 文本内容固定不变的，可切图片适应兼容和美观
- 使用transform:scale()属性进行缩放：
.text {
font-size: 10px;
-webkit-transform: scale(0.8);
display: block;
}
30、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing: antialiased;
31、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
- 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为
1/60＊1000ms ＝16.7ms
32、display:inline-block 什么时候会显示间隙？
- 移除空格
- 使用margin负值
- 使用font-size:0
- letter-spacing
- word-spacing
33、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度title>
<style type="text/css">
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
/*方案一*/
/* .outer {
height: 100%;
padding: 100px 0 0;
box-sizing: border-box;
}
.topDiv {
height: 100px;
margin: -100px 0 0;
background: #BBE8F2;
}
.bottomDiv {
height: 100%;
background: #D9C666;
} */
/*方案二*/
/* .outer {
height: 100%;
padding: 100px 0 0;
box-sizing: border-box;
position: relative;
}
.topDiv {
height: 100px;
background: #BBE8F2;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bottomDiv {
height: 100%;
background: #D9C666;
} */
/*方案三*/
.outer {
height: 100%;
position: relative;
}
.topDiv {
height: 100px;
background: #BBE8F2;
}
.bottomDiv {
background: #D9C666;
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
style>
head>
<body>
<div class="outer">
<div class="topDiv">div>
<div class="bottomDiv">div>
div>
body>
html>
34、png、jpg、gif 这些图片格式解释一下，分别什么时候用？
| 图片类型 | 介绍 | 适合用途 |
|---|---|---|
| GIF | 8位像素，256色 无损压缩 支持简单动画 支持boolean透明 | 适合简单动画 |
| JPEG | 颜色限于256 有损压缩 可控制压缩质量 不支持透明 | 适合照片 |
| PNG | 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画 | 适合图标、背景、按钮 |
35、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
- 如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。
- 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 - 同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。
36、什么是CSS 预处理器/ 后处理器？
-
预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
-
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
37、什么是CSS reset？
重置浏览器标签的样式表
在HTML标签在浏览器里有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
38、css sprite是什么,有什么优缺点。
1、概念
- 将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案
2、优点
- 减少HTTP请求数，极大地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
3、缺点
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式
39、你用过栅格系统吗？如果使用过，你最喜欢哪种？
-
大多数ui框架中栅格系统，我感觉栅格系统都差不多，如果非要说一个的话，我还是比较喜欢使用bootstrap
-
栅格系统可以实现响应式的移动端布局。
-
栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比， 在使用的时候，我们给相应的div设置col-lg-2 col-md-3 col-sm-4 col-xs-6，以此完成布局。
40、渐进增强和优雅降级
-
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
-
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
41、什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
-
原因： 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
-
解决方法：
只要在之间加入一个或者