曾经面试踩过的坑，都在这里了～ HTML/CSS

前言

前段时间面试(包括阿里巴巴的电话面试)，遇到过一些面试题，且面试中出现机率较高的提问 /笔试，有些答的不是很好挂掉了，今天终于有时间整理出来分享给大家，希望对大家面试有所帮助，都能轻松拿 offer。

主要分三部分：html、css、js； react/vue 等都归类于 js,内容来源于面试过程中遇到的、在复习过程中看到认为值得加深巩固、群友交流分享的；如有理解的错误或不足之处，欢迎留言纠错、斧正，这里是@IT·平头哥联盟，我是首席填坑官∙苏南(South·Su) ^_^～

HTML

1、什么是盒子模型？

有些面试官会问你对盒子模型的理解，在我们平时看到的网页中，内部的每一个标签元素它都是有几个部分构成的：内容(content)、外边距(margin)、内边距(padding)、边框(border)，四个部分组成，当你说完这些面试官是不会满意这个答案的，因为还有一个重点（IE 盒模型和标准盒模型的区别）——— IE 盒模型的 content 包括 border、padding

2、页面导入样式时有几种方法，它们之间有区别？

link标签引入，也是当下用的最多的一种方式，它属于 XHTML 标签，除了能加载 css 外，还能定义 rel、type、media等属性;
@import引入，@import 是 CSS 提供的，只能用于加载 CSS;
style 嵌入方式引入，减少页面请求(优点)，但只会对当前页面有效，无法复用、会导致代码冗余，不利于项目维护(缺点)，此方式一般只会项目主站首页使用（腾讯、淘宝、网易、搜狐）等大型网站主页，之前有看到过都是这种方式，但后来有些也舍弃了

小结：link页面被加载的时，link 会同时被加载，而@import引用的 CSS 会等到页面被加载完再加载,且 link 是XHTML标签，无兼容问题; link 支持动态 js 去控制 DOM 节点去改变样式，而 @import 不支持，

3、简单讲述一下块元素、内联元素、空元素有哪些，它们之间的区别？

行内元素有：a、b、span、img、input、select、textarea、em、img、strong （强调的语气）;
块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4 … p、section、div、form 等;
空元素：input type="hidden"/>、br>、hr>、link>、meta>;

小结：块元素总是独占一行，margin 对内联元素上下不起作用;

4、说说 cookies，sessionStorage、localStorage 你对它们的理解？

cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie 数据始终在同源的 http 请求中携带，记会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
大小：cookie 数据大小不能超过 4k,sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
时效：localStorage 存储持久数据，浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器 /应用缓存；sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭部分面试官可能还会再深入一些：

1)、如何让 cookie 浏览器关闭就失效？——不对 cookie 设置任何正、负或 0 时间的即可;

2)、sessionStorage 在浏览器多窗口之间 (同域)数据是否互通共享? ——不会，都是独立的，localStorage 会共享;

3)、能让 localStorage 也跟 cookie 一样设置过期时间？答案是可以的，在存储数据时，也存储一个时间戳，get 数据之前，先拿当前时间跟你之前存储的时间戳做比较详细可看我之前写的另一篇分享（小程序项目总结）。

5、简述一下你对 HTML 语义化的理解？

语义化是指根据内容的类型，选择合适的标签（代码语义化）,即用正确的标签做正确的事情; html语义化让页面的内容结构化，结构更清晰，有助于浏览器、搜索引擎解析对内容的抓取; 语义化的 HTML 在没有CSS的情况下也能呈现较好的内容结构与代码结构; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO;

CSS

1、position 的 static、relative、absolute、fixed 它们的区别？

absolute：绝对定位，元素会相对于值不为 static 的第一个父元素进行定位(会一直往父级节点查找)，且它是脱离正常文档流、不占位的;
fixed:同样是绝对定位，但元素会相对于浏览器窗口进行定位，而不是父节点的 position (IE9 以下不支持);
relative:相对定位，元素相对于自身正常位置进行定位,属于正常文档流;static: position 的默认值，也就是没有定位，当元素设置该属性后（ top、bottom、left、right、z-index ）等属性将失效;
inherit:貌似没用过，查了一下文档“规定从父元素继承 position 属性的值”;

2、如何让一个元素垂直 /水平（垂直水平）都居中，请列出你能想到的几种方式？

水平垂直居中 —— 方式一

<div class="div-demo"></div>
<style>
	.div-demo{
		width:100px;
		height:100px;
		background-color:#06c;
		margin: auto;
		position:absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
</style>

水平垂直居中 —— 方式二

<style>
	.div-demo{
		width:100px;
		height:100px;
		background-color:#06c;
		margin: auto;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}
</style>

水平垂直居中 —— 方式三，（新旧伸缩盒兼容）

<body class="container">
	<div class="div-demo"></div>
	<style>

		html,body{
			height:100%;
		}
		.container{
			display: box;
			display: -webkit-box;
			display: flex;
			display: -webkit-flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		.div-demo{
			width:100px;
			height:100px;
			background-color:#06c;
		}
	</style>

</body>

3、项目中有用纯 CSS 样式写过三角形 icon 吗？

<body class="container">
	<div class="div-angles"></div>
	<div class="div-angles right"></div>
	<div class="div-angles bottom"></div>
	<div class="div-angles left"></div>
	<style>

		html,body{
			height:100%;
		}
		.container{
			display: box;
			display: -webkit-box;
			display: flex;
			display: -webkit-flex;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		.div-angles{
			width: 0;
			height: 0;
			border-style: solid;
			border-width:30px;
			width:0px;
			height:0px;
			border-color: transparent transparent #06c transparent;
		}
		.right{
			border-color: transparent transparent transparent #06c ;
		}
		.bottom{
			border-color: #06c transparent transparent ;
		}
		.left{
			border-color: transparent #06c transparent transparent;
		}
	</style>

</body>

4、什么是外边距合并,项目中是否有遇到过?

有，外边距合并指的是，当两个垂直元素的都设置有 margin 外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的值中的较大那个。

5、:before 和 :after 两伪元素，平时都是使用双冒号还是单冒号？有什么区别？以及它们的作用：

单冒号(:)用于CSS3 伪类，双冒号(::)用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成） ;
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after 等，而新的在 CSS3 中引入的伪元素则不允许再支持旧的单冒号的写法;
想让插入的内容出现在其它内容前，使用::before，之后则使用::after ；在代码顺序上，::after生成的内容也比::before 生成的内容靠后。如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上;

6、Chrome、Safari 等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff;//设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}
//方法 2：由(licongwen )补充
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}

7、浏览器的最小字体为 12px，如果还想再小，该怎么做？

用图片：如果是展示的内容基本是固定不变的话，可以直接切图兼容性也完美(不到万不得已，不建议);
找 UI 设计师沟通：为了兼容各大主流浏览器，避免后期设计师来找你撕逼，主动找 TA 沟通，讲明原因 ————注意语气，好好说话不要激动，更不能携刀相逼;
CSS3：css3 的样式 transform: scale(0.7)，scale 有缩放功能;
又去找chrome复习了一下，说是 “ display:table;display: table-cell;” 可以做到，没用过。

8、移动端的边框 0.5px,你有几种方式实现？

devicePixelRatio:它是 window 对象中有一个 devicePixelRatio 属性，设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素;这种方式好麻烦，js 检测，再给元素添加类名控制，难维护;
切图：直接.5px 的切图，这种方式太 low，建议还是别用了，特别难维护，高清屏就糊了,更重要的是被同行看到会觉得你们很渣渣～;
image 背景：css3 的 background-image:linear-gradient，缺点就是：样式多，遇到圆角这个方案就杯剧了; box-shadow:网上看到说使用 box-shadow 模拟边框，box-shadow: inset 0px -1px 1px -1px #06c;没用过，不过多评论，建议自己百度;
伪类缩放：现在用的比较多的方式之一 :after 1px 然后 transform: scale(0.5);基本能满足所有场景，对于圆角的处理也很方便;

贴上 3、5 两方案代码，也是目前公司一直在用的(预处理 SCSS)：

//3、css3 的 background-image 本文由 @IT·平头哥联盟-首席填坑官∙苏南分享
@mixin border($top:1, $right:1, $bottom:1, $left:1, $color:#ebebf0) {
  background-image:linear-gradient(180deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(90deg, $color, $color 50%, transparent 50%), 
                  linear-gradient(0deg, $color, $color 50%, transparent 50%),
                  linear-gradient(90deg, $color, $color 50%, transparent 50%);
  background-size: 100% $top + px, $right + px 100%, 100% $bottom + px, $left + px 100%;
  background-repeat: no-repeat;
  background-position: top, right top, bottom, left top ;
}

@mixin borderTop($top:1, $color:#ebebf0) {
  @include border($top, 0, 0, 0, $color);
}
@mixin borderRight($right:1, $color:#ebebf0) {
  @include border(0, $right, 0, 0, $color);
}
@mixin borderBottom($bottom:1, $color:#ebebf0) {
  @include border(0, 0, $bottom, 0, $color);
}
@mixin borderLeft($left:1, $color:#ebebf0) {
  @include border(0, 0, 0, $left, $color);
}
@mixin borderColor($color:#ebebf0) {
  @include border(1, 1, 1, 1, $color);
}

//5、css3 的 transform:scale  本文由 @IT·平头哥联盟-首席填坑官∙苏南分享
@mixin borderRadius($width:1,$style:solid,$color:#ebebf0,$radius:2px) {
  position:relative;
    &:after{
       left:0px;
       top:0px;
       right:-100%;
       bottom:-100%;
       border-radius:$radius;
       border-style: $style;
       border-color: $color;
       border-width: $width+ px;
       position:absolute;
       display:block;
       transform:scale(0.5);
       -webkit-transform:scale(0.5);
       transform-origin:0 0;
       -webkit-transform-origin:0 0;
       content:'';
    }
}

8、display:none 与 visibility:hidden 两者的区别？

display:none 在页面中是不占位置的，而 visibility:hidden 保留原来的位置后;
display：none 显示 /隐藏页面会产生回流和重绘的问题，visibility 则不会 ——重绘 /回流请看 JS 部分第七题;

9、CSS 样式优先级排序如何计算的？

同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比内联优先级高

10、li 与 li 之间有看不见的空白间隔是什么原因引起的？你是怎么解决的？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了。

抱歉 Javascript 部分，在下一篇，因为 V2EX 提示文章主题超长了，请见谅！

文本将持续更新，整理收集自己 /群友的面经分享给大家，如果觉得不错那就请关注下方的 `公众号`吧，您的支持是我最大的动力。

作者：苏南 - 首席填坑官
原文链接： https://blog.csdn.net/weixin_43254766/article/details/83119712
交流群：912594095，公众号：honeyBadger8
本文原创，著作权归作者所有。商业转载请联系@IT·平头哥联盟获得授权，非商业转载请注明原链接及出处。