总纲：前端面试知识点大全
目录
1.请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局
4.请解释relative、fixed、absolute 和 static 元素的区别
5.请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗
6.为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
7.你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
8.请问为何要使用 translate() 而非 absolute position，或反之的理由？为什么？
1.请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局
目前盒子模型分为IE盒子模型和W3C标准盒子模型。他们包括margin、border、padding和content，但他们的区别主要体现在width和height上面。IE浏览器认为盒子宽度指的是两侧border宽度加上两侧padding的宽度以及内容宽度，而W3C认为盒子宽度仅代表内容宽度。因为存在这样的却别，W3C在css3中引入了box-sizing属性，其中content-box表示使用W3C盒子模型渲染，border-box使用IE盒子模型。
学习链接：https://blog.csdn.net/sinat_36521655/article/details/80045791
2.请罗列出你所知道的 display 属性的全部值
none：隐藏元素
block：变成块级元素
inline：变成内联元素
inline-block：变成内联块级元素
inherit：从父元素继承display属性的值
list-item 此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody）
table-header-group 此元素会作为一个或多个行的分组来显示（类似thead）
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似tfoot）
table-row 此元素会作为一个表格行显示（类似 tr ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup ）。
table-column 此元素会作为一个单元格列显示（类似 col ）
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
CSS3添加属性flex(块级元素)和inline-flex(内联元素)，设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
具体情况参考http://www.runoob.com/css3/css3-flexbox.html
3.请解释inline 和inline-block 的区别
block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
3.1 display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
3.2 display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
3.3 display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。也就是兼具block拥有width和height的特性，同时又能排列在一行中，常用用于<li><a>标签
4.请解释relative、fixed、absolute 和 static 元素的区别
4.1 absolute:绝对定位（脱离文档流）
相对第一个非static定位的父元素进行定位
4.2 fixed：固定定位（脱离文档流，老IE6不支持）
相对浏览器窗口进行定位
4.3 relative：相对定位（不脱离文档流）
相对其正常（默认布局）位置进行定位，原位置留白
4.4 static
默认值，没有定位，元素出现在正常的流中(忽略top、bottom、left、right、z-index声明)
4.5 补充：
1、absolute定位会脱离文档流，浮动起来，多个层叠加可以使用z-index属性改变层叠顺序，值越大，所处层越高，可以为负值，但是不推荐使用负值。
2、absolute定位(设置了top等值)忽略padding，相对位置为相对容器的左上角内边框(padding和border交界的地方)，定位元素的margin开始算。
3、若absolute定位未设置top、left、right、bottom等的值，则会收到父元素的padding和自身margin的挤压。
5.请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗
flex很重要，每个属性都要知道。建议去读阮一峰的flex文章
grid是flex布局的升级版，目前两个的普及性都不高，但是flex更好，主流的现代浏览器基本上都支持。
grid可以参考https://www.jianshu.com/p/d183265a8dad
flex可以参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
注意点：
1、不考虑max/min-width/height的情况下，若所有项目的flex-grow/shrink之和大于等于1，则所有项目的尺寸一定会调整到适应父元素（flex容器）的尺寸
2、如果flex-grow/shrink之和小于1，则只会按照相对“1”的比例
3、grow时的每个元素的权重即为元素的flew-grow的值；shrink时每个元素的权重则为元素flex-shrink值乘以width后的值
4、优先级：flex-basis > width > content中的width，优先级高的若有值，则忽略优先级低的值
6.为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
6.1 响应式设计
一套代码，在适应不同屏幕的浏览器，目前最火的就是bootstrap。主要利用CSS3的媒介查询（Media Query）和Viewport来解决问题。通过媒介查询的设置，根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题
缺点：兼容各种设备工作量大，效率低下；代码累赘会出现隐藏无用的元素，加载时间加长；一定程度上改变了网站原有的布局结构，会出现用户混淆的结果
6.2 自适应设计
指能使网页自适应显示在不同大小终端设备上新网页设计及技术。同样要设置<meta>标签。
1、不使用绝对宽度，由于网页会根据屏幕宽度调整布局，不能使用width: xxx px具体的像素值，使用百分比width:xxx %或者width:auto
2、相对大小的字体，字体也不能使用绝对大小（px），而只能使用相对大小（em）或者rem
3、流动布局：各个区块的位置都是浮动的，不是固定不变的。
Float的好处是，如果宽度太小放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的出现。注：绝对定位（position: absolute）的使用，也要非常小心。
4、图片的自适应img { max-width: 100%; height: auto }
5、自适应网页设计的核心，就是CSS3引入的Media Query模块，与响应式布局设计的使用一样。
6.3 区别：
理论上说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。
自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。
自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。
7.你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
7.1 retina是什么
就是苹果推出的新型屏幕，由4个原像素点去描述一个新像素点（即压缩了2倍），且存在0.5个像素点这样的描述，所以需要兼容。参考http://www.ui.cn/detail/24556.html
说完了重要性，适配Retina的原理又是什么呢？我们知道，当一个图像在标准设备下全屏显示时，一位图像素对应的就是一设备像素，导致一个完全保真的显示，因为一个位置像素不能进一步分裂。而当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。
对此，解决方法相信大家也都听过，就是通过制作两种不同的图形，一张是普通屏幕的图片，另外一种是Retina屏幕的图形，而且Retina屏幕下的图片是普通屏幕的两倍像素。
7.2 直接加载2倍大小的图片
假如要显示的图片大小为200px*300px，你准备的实际图片大小应该为400px*600px，并且使用以下代码控制即可：
<img src="pic.png" height="200px" width="300px" />
这种方法就解决了Retina显示不清楚的问题，但是在普通屏幕下，这种图片要经过浏览器的压缩，在IE6和IE7上有十分差得显示效果，同时，两倍大小的图片势必会导致页面加载时间加长，用户体验下降，此时，我们可以通过Retina.js（http://retinajs.com/）文件解决：
<img class="pic" src="pic.png" height="200px" width="300px"/>
<script type="text/javascript">
$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.pic");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});
</script>7.3 Image-set控制
假如要显示的图片大小为200px*300px，你准备的图片应有两张：一张大小为200px*300px，命名为pic.png；另一张大小为400px*600px，命名为pic@2x.png（@2x是Retina图标的标准命名方式），然后使用以下css代码控制：
#logo {
background: url(pic.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
}或者使用HTML代码控制亦可：
<img src="pic.png" srcset="pic@2x.png 2x" />
3、使用@media控制
实际是判断屏幕的像素比来取舍是否显示高分辨率图像，代码如下：
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(pic@2x.png);
background-size: 100px auto;
}
}
8.请问为何要使用 translate() 而非 absolute position，或反之的理由？为什么？
通过absolute定位属性实现的移动，通过translate也可以实现，两者结合使用可以实现元素的居中。
文档流上的差异：
absolute会脱离文档流，而translate不会脱离文档流
基点上的差异：
absolute是基于第一个非static父元素的左上角border与padding交界处，而translate是子元素整体平移，没有所谓的基点而言，当然通过transform-origin改变旋转的基准点？
视图属性上的差异：
可以看出使用 translate 的例子的 offsetTop 和 offsetLeft 的数值与没有产生位移的元素没有然后区别，无论位移多少这两个数值都是固定不变的。
而使用相对定位的例子 offsetTop 和 offsetLeft 的数值则根据位移的长度发生了改变。
动画表现上的差异：
使用绝对定位的动画效果会受制于利用像素(px)为单位进行位移，而使用 translate 函数的动画则可以不受像素的影响，以更小的单位进行位移。
另外，绝对定位的动画效果完全使用 CPU 进行计算，而使用 translate 函数的动画则是利用 GPU，因此在视觉上使用 translate 函数的动画可以有比绝对定位动画有更高的帧数。
9.如果实现一个高性能的CSS动画效果？
目前css3的animation配合@keyframes可以实现动画，transition可以实现渐变动画，transform也可以实现动画效果，他们都是基于GPU的。但是将位图传至GPU内存中的效率是比较慢的，所以关键是减少位图转移操作、减少重拍和重绘的计算，都使用css3属性更好。
例如：div { height: 100px; transition: height 1s linear; } div:hover { height: 200px; }
因为每一帧的变化浏览器都在进行布局、绘制、把新的位图交给 GPU 内存(这恰好是我们上面提到的GPU的短板)
虽然只改变元素高度但是很可能要同步改变他的子元素的大小，那浏览器就要重新计算布局，计算完后主线程再来重新生成该元素的位图。
例如：div { transform: scale(0.5); transition: transform 1s linear; } div:hover { transform: scale(1.0); }
transform 属性不会改变自己和他周围元素的布局，他会对元素的整体产生影响。
因此，浏览器只需要一次生成这个元素的位图，然后动画开始时候交给 GPU 来处理他最擅长的位移、旋转、缩放等操作。这就解放了浏览器不再去做各种的布局、绘制等操作。
参考https://www.cnblogs.com/langzi1989/p/5965818.html
http://www.fly63.com/article/detial/106
10.IFC（行级格式化上下文）
在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始。在盒子间margins,borders,和padding的水平方向的值是有效。这些盒子也许通过不同的方式进行对齐:他们的底部和顶部也许被对齐，或者通过文字的基线进行对齐。矩形区域包含着来自一行的盒子叫做line box。
line box的宽度由浮动情况和它的包含块决定。line box的高度由line-height的计算结果决定。
一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高。(比如，盒子对齐导致基线提高了)。当盒子B的高度比包含它的line box的高度低，在line box内的B的垂值对齐线通过'vertical align'属性决定。当几个行内级盒子在一个单独的line box内不能很好的水平放置，则他们被分配成了2个或者更多的垂直重叠的line boxs.因此,一个段落是很多个line boxs的垂直叠加。Line boxs被叠加没有垂直方向上的分离(特殊情况除外)，并且他们也不重叠。
通常，line box的左边缘挨着它的包含块的左边缘，右边缘挨着它的包含块的右边缘。然而，浮动盒子也许会在包含块边缘和line box边缘之间。因此，尽管line boxs在同样的行内格式上下文中通常都有相同的宽度(就是他的包含块的宽度)，但是水平方向上的空间因为浮动被减少了，它的宽度也会变得复杂。Line boxs在同样的行内格式上下文中通常在高度上是多样的(比如，一行也许包含了一个最高的图片然后其他的也可以仅仅只包含文字)
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由'text align'属性决定。如果属性是'justify'，用户代理可能会拉伸空间和文字在inline boxs内。
当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs。如果一个行内盒子不能被分割。则行内盒子溢出line box。
当一个行内盒子被分割，分割发生则margins,borders,和padding便没有了视觉效果。
在同样的line box内的行内盒子也许会被分割成几个盒子因为双向的文字。
Line boxs在行内格式上下文中档需要包含行内级内容时被创造。Line boxs包含没有文字，没有空格，没有带着margins,padding和borders，以及没有其他在流中的内容(比如图片，行内盒子和行内表格)，也不会以新起一行结尾。对于在他们内的任何盒子的位置都以他们决定并且必须将他们视作没有高度的line boxs。
主要影响IFC内布局的css：font-size、line-height、height、vertical-aligin
扫一扫
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
