持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

1. 针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximun-scale=1, user-scale=no">

解析：

主要考察对meta标签的理解

定义：meta标签用于提供有关HTML文档的元数据。元数据不会显示在页面上，但是机器可解析。

作用：meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

2. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：

id选择器(#myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p)
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

3. 常用的伪类选择器

p:first-of-type{}		选择第一个p
p:last-of-type{}		选择最后一个p
p:nth-child(2)			选择第二个p

4. div水平垂直居中

水平居中

如果 div 设置了宽度，水平居中 可以使用 margin:0 auto; 来实现。

绝对定位

.wrap {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
}

flex解决方案

.wrap2 {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content2 {
  width: 90px;
  height: 90px;
}

table解决方案

.parent {display: table;}
.son {display: table-cell; vertical-align: middle;}

注意: 直接对块级元素使用 vertical-align 是不能解决这个问题的，vertical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐

grid 解决方案

.parent{
	display: grid;
	place-items: center;
}

5. 浮动

元素浮动会带来哪些问题？

对一个div元素设置浮动后，该元素就脱离了文档流。（元素的display属性自动变成display:block）包含该浮动元素的父元素就会发生高度塌陷，造成与父元素同级的其它元素定位出现问题。

浮动造成父元素高度塌陷

清除浮动后

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

编写clearfix, 之后父元素上添加上clearfix

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
 }

6. CSS选择器是如何被浏览器解析的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

CSS 基础面试题