前端面试题-HTML、web综合问题（五）

16 display:inline-block 什么时候不会显示间隙？(携程)

• 移除空格
• 使⽤ margin 负值
• 使⽤ font-size:0
• letter-spacing
• word-spacing

17 PNG\GIF\JPG的区别及如何选

• GIF
  • 8 位像素， 256 ⾊
  • ⽆损压缩
  • ⽀持简单动画
  • ⽀持 boolean 透明
  • 适合简单动画
• JPEG
  • 颜⾊限于 256
  • 有损压缩
  • 可控制压缩质量
  • 不⽀持透明
  • 适合照⽚
• PNG
  • 有 PNG8 和 truecolor PNG
  • PNG8 类似 GIF 颜⾊上限为 256 ，⽂件⼩，⽀持 alpha 透明度，⽆动画
  • 适合图标、背景、按钮

18 ⾏内元素float:left后是否变为块级元素？

⾏内元素设置成浮动之后变得更加像是 inline-block （⾏内块级元素，设置
成这个属性的元素会同时拥有⾏内和块级的特性，最明显的不同是它的默认宽度不是 100% ），
这时候给⾏内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

19 在⽹⻚中的应该使⽤奇数还是偶数的字体？为什么呢？

• 偶数字号相对更容易和 web 设计的其他部分构成⽐例关系

20 ::before 和 :after中双冒号和单冒号 有什么区别？解释⼀下这2个伪元素的作⽤

• 单冒号( : )⽤于 CSS3 伪类，双冒号( :: )⽤于 CSS3 伪元素
• ⽤于区分伪类和伪元素

21 如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）

• 多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为1/60*1000ms ＝ 16.7ms

22 CSS合并⽅法

• 避免使⽤ @import 引⼊多个 css ⽂件，可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂
  件，例如使⽤ Sass\Compass 等

23 CSS不同选择器的权重(CSS层叠的规则)

• ！important 规则最重要，⼤于其它规则
• ⾏内样式规则，加 1000
• 对于选择器中给定的各个 ID 属性值，加 100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
• 对于选择其中给定的各个元素标签选择器，加1
• 如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则

24 列出你所知道可以改变⻚⾯布局的属性

• position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 、`

25 CSS在性能优化⽅⾯的实践

• css 压缩与合并、 Gzip 压缩
• css ⽂件放在 head ⾥、不要⽤ @import
• 尽量⽤缩写、避免⽤滤镜、合理使⽤选择器

26 CSS3动画（简单动画的实现，如旋转等）

• 依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation
• transition ：定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。
• transform ：定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。
• animation ：动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括 animation-name ， animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction

27 base64的原理及优缺点

• 优点可以加密，减少了 HTTTP 请求
• 缺点是需要消耗 CPU 进⾏编解码

28 ⼏种常⻅的CSS布局

流体布局
.left {
float: left;
width: 100px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background: green;
}
cssitjc8.com
2019/9/5 第⼀部分：基础篇 | FE-Interview
blog.poetries.top/FE-Interview-Questions/base/#_3-内存泄漏 26/115
圣杯布局
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height:300px;
background: green;
}
.left {
position: relative;
left: -120px;
float: left;
height: 300px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
position: relative;
right: -220px;
float: right;
height: 300px;
width: 200px;
margin-left: -200px;
background: blue;
}
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
html
css
html
双⻜翼布局
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background: green;
}
.main::after {
content: '';
display: block;
font-size:0;
height: 0;
zoom: 1;
clear: both;
}
.left {
float:left;
height: 200px;
width: 100px;
margin-left: -100%;
background: red;
}
.right {
float: right;
height: 200px;
width: 200px;
margin-left: -200px;
background: blue;
}
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

29 stylus/sass/less区别

• 均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性
• Scss 和 LESS 语法较为严谨， LESS 要求⼀定要使⽤⼤括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系
• Scss ⽆全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作⽤域概念
• Sass 是基于 Ruby 语⾔的，⽽ LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；

30 postcss的作⽤

• 可以直观的理解为：它就是⼀个平台。为什么说它是⼀个平台呢？因为我们直接⽤它，感觉不能⼲什么事情，但是如果让⼀些插件在它上⾯跑，那么将会很强⼤
• PostCSS 提供了⼀个解析器，它能够将 CSS 解析成抽象语法树通过在 PostCSS 这个平台上，我们能够开发⼀些插件，来处理我们的 CSS ，⽐如热⻔的： autoprefixer
• postcss 可以对sass处理过后的 css 再处理 最常⻅的就是 autoprefixe