前端面试宝典（四）
Hello小伙伴们，我又来了，来的太不频繁，兔妞也自惭形秽！但是真的是有机会就更新啦～最近烦心事也很多，不过还是要努力开心呀，每天都是愉快的新的一天！
1） 要求容器在宽度自由伸缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。
<div class="div1">
<div class="div2 div">Rabbit1</div>
<div class="div2 div">Rabbit2</div>
<div class="div2 div">Rabbit3</div>
</div>//flex解决办法
.div1{
width: 100%;
height: 400px;
border: 1px solid #888;
flex-direction: row;
display: flex;
}
.div{
flex-grow: 1;
border: 1px solid #888;
}
.div1{
width: 100%;
height: 400px;
}
.div2{
margin-left:5%;
}
.div{
width: 30%;
display: inline-block;
}
快去自己动手敲敲试试吧！
2）元素竖向的百分比是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
3）重绘和重排是什么？怎样减少重排？
- 重绘
- 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。
- 重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
- 触发重绘的条件：改变元素外观属性。如：color，background-color等。
- 重排:
- 页面初始渲染
- 添加/删除可见DOM元素
- 改变元素位置
- 改变元素尺寸（宽、高、内外边距、边框等）
- 改变元素内容（文本或图片等）
- 改变窗口尺寸
- 减少重排
- 分离读写操作
- 样式集中改变
4）写出清除浮动的方法，及优缺点
- 额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>优点：通俗易懂
缺点：添加额外标签
- 父级添加overflow属性（触发BFC）
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
- 使用after伪类元素清除浮动
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}优点：结构语义化清晰
缺点：IE部分不兼容
- before、after双伪元素
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}优点：代码简洁
5）什么叫优雅降级和渐进增强
- 渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
- 区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
6）px、em、rem的区别
- PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
- EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
- REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
- px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
PS：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
好啦，今天的分享就到这里啦，喜欢兔妞文章的小伙伴们请在看+关注噢～～有什么烦心事也欢迎后台给兔妞留言哦，最短的的时间内恢复哦！