CSS前端经典面试题及解析——小白入门必备
12.如何实现一个使用非标准字体的网页设计？
使用@font-face并为不同的font-weight定义font-family。
13.解释浏览器如何确定哪些元素与 CSS 选择器匹配。
这部分与上面关于编写高效的 CSS 有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。
例如，对于形如p span的选择器，浏览器首先找到所有元素，并遍历它的父元素直到根元素以找到元素。对于特定的，只要找到一个，就知道’`已经匹配并停止继续匹配。
参考资料：
- stackoverflow.com/questions/5…
14.描述伪元素及其用途。
CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（:first-line，:first-letter）或将元素添加到标记中（与 content:…组合），而不必修改标记（:before，:after）。
-
:first-line和:first-letter可以用来修饰文字。 -
上面提到的
.clearfix方法中，使用clear: both来添加不占空间的元素。 -
使用
:before和after展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
参考资料：
- css-tricks.com/almanac/sel…
15.说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。
CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。
CSS 盒模型负责计算：
-
块级元素占用多少空间。
-
边框是否重叠，边距是否合并。
-
盒子的尺寸。
盒模型有以下规则：
-
块级元素的大小由
width、height、padding、border和margin决定。 -
如果没有指定
height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。 -
如果没有指定
width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。 -
元素的
height是由内容的height来计算的。 -
元素的
width是由内容的width来计算的。 -
默认情况下，
padding和border不是元素width和height的组成部分。
参考资料：
- www.smashingmagazine.com/2010/06/the…
这是我整理的面试题中的一部分，此外还包含HTML、JavaScript、React、Vue、浏览器、服务端与网络、算法等等…
篇幅有限，仅展示部分内容
如果你需要这份完整版的面试题+解析，【点击我】就可以了，免费分享给大家。
16.* { box-sizing: border-box; }会产生怎样的效果？
-
元素默认应用了
box-sizing: content-box，元素的宽高只会决定内容（content）的大小。 -
box-sizing: border-box改变计算元素width和height的方式，border和padding的大小也将计算在内。 -
元素的
height= 内容（content）的高度 + 垂直方向的padding+ 垂直方向border的宽度 -
元素的
width= 内容（content）的宽度 + 水平方向的padding+ 水平方向border的宽度
17. display的属性值都有哪些？
none,block,inline,inline-block,table,table-row,table-cell,list-item.
18. inline和inline-block有什么区别？
我把block也加入其中，为了获得更好的比较。
| | block | inline-block | inline |
| — | — | — | — |
| 大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
| 定位 | 从新的一行开始，并且不允许旁边有 HTML 元素（除非是float） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。 |
| 能否设置width和height | 能 | 能 | 不能。 设置会被忽略。 |
| 可以使用vertical-align对齐 | 不可以 | 可以 | 可以 |
| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管border和padding在content周围，但垂直方向上的空间取决于’line-height’ |
| 浮动（float） | - | - | 就像一个block元素，可以设置垂直边距和填充。 |
19.relative、fixed、absolute和static四种定位有什么区别？
经过定位的元素，其position属性值必然是relative、absolute、fixed或sticky。
-
static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 -
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。 -
absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 -
fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 -
sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为table时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对table元素的效果与position: relative相同。
参考资料：
- developer.mozilla.org/en/docs/Web…
20.你了解 CSS Flex 和 Grid 吗？
Flex 主要用于一维布局，而 Grid 则用于二维布局。
Flex
flex容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为flex item。
在容器上可以设置6个属性：
-
flex-direction
-
flex-wrap
-
flex-flow
-
justify-content
-
align-items
-
align-content
注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
Flex 项目属性
有六种属性可运用在 item 项目上:
-
order
-
flex-basis
-
flex-grow
-
flex-shrink
-
flex
-
align-self
Grid
CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
21.响应式设计与自适应设计有何不同？
响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。
响应式设计的适应性原则：网站应该凭借一份代码，在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球通过膨胀和收缩，来适应不同大小的篮圈。
自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特性中，选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同，自适应设计允许使用多个球，然后根据不同的篮筐大小，去选择最合适的一个。
参考资料：
-
developer.mozilla.org/en-US/docs/…
-
mediumwell.com/responsive-…
-
css-tricks.com/the-differe…
22.你有没有使用过视网膜分辨率的图形？当中使用什么技术？
我倾向于使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。更好的方法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改变background-image。
对于图标类的图形，我会尽可能使用 svg 和图标字体，因为它们在任何分辨率下，都能被渲染得十分清晰。
还有一种方法是，在检查了window.devicePixelRatio的值后，利用 JavaScript 将src属性修改，用更高分辨率的版本进行替换。
参考资料：
- www.sitepoint.com/css-techniq…
23.什么情况下，用translate()而不用绝对定位？什么时候，情况相反。
translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。 因此translate()更高效，可以缩短平滑动画的绘制时间。
当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。
参考资料：
- www.paulirish.com/2012/why-mo…
其他答案
-
neal.codes/blog/front-…
-
quizlet.com/28293152/fr…
-
peterdoes.it/2015/12/03/…
24.一边固定宽度一边宽度自适应
可以使用flex布局 复制下面的HTML和CSS代码 用浏览器打开可以看到效果
.wrap {
display: flex;
justify-content: space-between;
}
.div1 {
min-width: 200px;
}
.div2 {
width: 100%;
background: #e6e6e6;
}
html,
body,
div {
height: 100%;
margin: 0;
}
25.水平垂直居中的方式
flex
// 父容器
display: flex;
justify-content: center;
align-items: center;
position
// 父容器
position: relative;
// 子容器
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
position+transform
// 父容器
position: relative;
// 子容器
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
table-cell
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background-color: #000;
display: inline-block;
width: 200px;
height: 200px;
}
26.display:none、visibile:hidden、opacity:0的区别
| | 是否隐藏 | 是否在文档中占用空间 | 是否会触发事件 |
| — | — | — | — |
| display: none | 是 | 否 | 否 |
| visibile: hidden | 是 | 是 | 否 |
| opacity: 0 | 是 | 是 | 是 |
27.CSS中link和@import的区别
-
link属于HTML标签，而@import是CSS提供的
-
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
-
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
-
link方式的样式的权重 高于@import的权重
28.文本超出部分显示省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
29.利用伪元素画三角
.info-tab {
position: relative;
}
.info-tab::after {
content: ‘’;
border: 4px solid transparent;
border-top-color: #2c8ac2;
position: absolute;
top: 0;
}
复制代码
30.已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形
需要用到css的object-fit属性
div {
width: 200px;
height: 200px;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
MDN
31.iframe的作用
文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。