《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

时间 2019-11-05

标签 css 基础面试答案只是栏目 CSS 繁體版

原文原文链接

背景

想一想本身为何要写这个，难道不是由于这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，确定是由于这样我才打算写的。并且还有就是，个人公众号也好久没有更新了，微信说长期不更新会关掉公众号的，怕……html

对于 CSS 方面的工做以及跟 CSS 有关的东西，我已经有一些时间没有接触了，自从离开上家公司到了目前所在的公司，处理小程序方面的事情之后，有关 CSS 的内容我都只是大概瞄一下，没去过多思考。看了这篇文章后，发觉本身再不思考，真的是要废了。面试

根据这篇文章的题目以及答案，再结合本身的一些经历以及想法，稍微理一理，不对的请喷，毕竟我所考虑的点仍是颇有限的。算法

正文部分

问题直接复制过来，那篇文章的答案引用部分，在引用的答案下面附带我我的的一些见解。小程序

一、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不一样的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

首先抛开所谓的标准不说，由于这个标准是 W3C 那边制定后跟各大厂商沟通去作统一的。在这个答案中，若是按照严格来讲，首先会问基本怎么计算，就像上面这个答案，不过须要注意一下顺序。segmentfault

标准盒模型的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right，这样写可能会显得比较长，按照上面的答案来讲的话，或许 width + padding + border + margin 就行了，附带说一下除了 width 之外是有左右两边的。
怪异模式的盒模型宽度 = （width + padding + border） + margin 总体来讲跟标准盒模型是相相似的，主要是 width + padding + border 这三者算在一块儿了。

标准的盒模型是基于 doctype 正确书写的状况下，而且是高于 IE6 的浏览器才会有的，若是是低于 IE6 的浏览器，就算是正确的 doctype 的书写状况下也是进入怪异模式的；在 IE 浏览器中若是写错了 doctype 或者是 doctype 以前有其余字符，那么可能就让 IE 进入怪异模式，从而致使浏览器解析元素盒模型出现问题，好比：浏览器

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这种状况下就会让低版本的 IE 进入怪异模式，致使的可能不只仅只是盒模型计算问题，还有多是其余的一些状况，早年以前有很多公司直接利用这种方式对低版本和高版本的浏览器作样式上的区别操做对待。微信

附带一条 URL：DOCTYPE 与浏览器模式分析 http://www.w3help.org/zh-cn/casestudies/002 供参考学习。网络

拓展问题

根据以上能够再问一下，当 width: 0; padding: 0 100px; border: 10px solid red; margin: 0 50px; 的时候，这个盒子里有内容跟没内容，在标准盒模型和怪异模式的盒模型中有什么区别？
根据 box-sizng 改变的盒模型的计算方式，跟这个标准盒模型以及怪异模式的盒模型的计算方式有什么区别？

二、box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

box-sizing 主要是用来计算一个元素中的宽度和高度的总和的值，而具体的计算方式将会根据 box-sizing 的属性值来决定，共有两个属性值：content-box 和 border-box。编辑器

当咱们了解一个元素的盒模型以后，其实对于这个的理解就简单不少了，好比咱们能够这样理解，而后延伸来讲明：性能

content-box：一个标准模式下的盒模型的计算方式
border-box：一个怪异模式下的盒模型的计算方式

附带说明

目前来讲，低版本的 IE 已经逐渐淡出了你们的视线了，因此，怪异模式和标准模式已经再也不有太多人去关注，并且 doctype 也基本上会在各类编辑器中自动添加为 <!doctype html> 了，但这不表明咱们不会在乎盒模型的计算，只是不在乎怪异模式和标准模式的浏览器解析方式。

在如今移动端中，不少时候为了便于盒子的计算，咱们会使用 box-sizing: border-box; 来操做，把 padding 和 border 的值计算在一个总体的宽度内，固然了，若是有 margin 的话，仍是会额外去考虑的。

三、CSS选择器有哪些？哪些属性能够继承？

注：省略部分原文的答案

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

这个问题应该来讲是两个问题，分别是选择器和属性的问题，或许多是考核一我的对 CSS 选择器的了解程序以及对 CSS 属性的掌握程度吧。对于这个问题，我的以为并不会要求把全部的都回答出来，要真都回答出来了，那就多是背课文了。

这是早以前我整理的一份有关选择符的图，你们能够感觉一下。

这图已经很久没有更新了，可能有一些新的草案没增长，不过无所谓拉，这么多东西，目前咱们能使用到也就那么几个，也就是原文中所提供的答案。

那么对于哪些属性能够继承这个问题，这又是一个很大的话题了，可能须要对 CSS 的全部属性都进行一次归整才会有一个相对比较完整的结果。这里我就提一个在原文答案中提到的可继承属性中的 font-size 这个属性。

font-size 的确是可继承的，但并非全部的 HTML 元素都会在 body 定义了 font-size 后，把这个文字大小做用在自身标签上，好比 h1、h2 等一系列标题元素的标签，还有 input 以及 button 之类的控件元素。

h1 系列的标题元素标签在浏览器默认样式中是使用了 em 做为单位的，会根据父级的 font-size 而改变（讲真，这到底算不算继承呢，?）
input 系列的控件元素，是直接有浏览器默认文字大小，而且是 px 做为单位的（这个又是由于已经被定义过了属性，但实际上应该算是继承了吧，只是权重值不够高，没法覆盖了 body 的 font-size）

在这个问题中，提到了一个优先级：

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

不知道是否是跟下一个问题搞混了，可是这里应该是少了一个 style 属性吧。

!important > style 属性 > id > class > tag

而且我没看懂为何原文的答案这里有一个中括号，是想说表明这个是可选的呢，仍是怎么样呢。

四、CSS优先级算法如何计算？

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

这个我以为吧，并无任何问题，不过在面试的时候，提到了这个以后，可能会被问其余相关的问题。

选择符优先级的拓展问题：

有 11 个元素选择符的优先级跟 1 个 class 选择符优先级哪一个高呢？
若是有 256 个 class 选择符，好比 .class001.......class256 {} 那么这个时候是否会大于一个 id 选择符呢？

!important声明的样式优先级最高，若是冲突再进行计算。

若是优先级相同，则选择最后出现的样式。

继承获得的样式的优先级最低。

这三点归纳的并非十分全面吧，在面试的过程当中，若是面试官提到了有关选择符优先级的问题，那么可能会给几个 demo 来让你想一下哪一个文字是什么颜色之类的，最后再问原理。

众所周知，!important 的优先级是最高，那么若是可能会延伸的问题会有：<div style="width: 100px !important;"></div> 这里的这个 width 样式如何去覆盖。

五、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素惟一的元素
p:only-child 选择属于其父元素的惟一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

这个能够说的内容其实也挺多的，仍是能够参考以前那张图，具体的哪些是伪元素选择符哪些是伪类选择符，根据图中的所列的状况能够一目了然看到。

拓展出来的问题；

隔行换色的实现方式；
:nth-child(an+b) 能够作的 XXX 事情，咱们应该怎么实现（具体可能会根据不一样面试官给出不一样的题目而定）；
::after 和 :after 一个冒号和两个冒号有什么区别；

诸如此类的问题不少，在 CSS3 中对于选择符能够玩的状况太多了，就看怎么去想这个问题，但只要掌握了原理，不管面试官怎么去改变，最终原理是差很少的，万变不离其宗嘛，对吧。

六、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

看到这个问题，我能想到的是，果真水平垂直居中的题目会出现啊。

如何居中div？

一个 div 元素的居中，这里并无提到说这个 div 标签使用的是什么类型的 display 值，那么对于咱们来讲能够拓展的方式就很是很是多了。

在原文答案中提到了：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

这里的关键点是 width 和 margin，当一个 display: block 的块级元素有了宽度以后，就可使用 margin: 0 auto; 的方式让其水平居中。

那么这里提到的是块级元素，那么咱们能够假设一下，若是咱们把 display: block; 换成了：

display: inline;
display: inline-block;
display: table-cell;

在不一样的 display 属性存在的时候，咱们仍是用 margin: 0 auto; 的方式来居中吗？

接着就能够经过这个问题延伸出第二个问题：如何居中一个浮动元素。

如何居中一个浮动元素

这里提到的一个点是，居中一个浮动元素，并无说是水平居中仍是垂直居中，或者是二者并存，也并无说这个浮动元素是否有子元素或者是父元素，那么可操做的方式又有不少了。

若是只是水平居中的话，前提是浮动了，当设置了 float 以后，使用 margin: 0 auto; 方式居中是不可能的了，若是只有一个元素的话，那就只能经过原文答案中提到的经过 position: absolute 和 margin 的结合来处理，固然，这里的 margin 能够换成 transform，当若是换成 transform 的话，可能又会被面试官提到另一个问题了——性能的问题。

不过呢，仅仅只是水平居中的一个浮动元素的话，若是存在父级元素，能够考虑使用“float: center;”，嗯，这里是加引号的，并非真的有这个属性值。

.float_center {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.float_center > .child {
  position: relative;
  left: 50%;
}

部分代码是这样的，具体的能够看 https://codepen.io/alexandred... 这里，这个方法在几年前仍是用的比较多的，尤为是在水平居中的一个分页数控件。

反正无论怎么样，这个是带有浮动属性的元素，进行了居中的操做了。若是有垂直居中的话，就按照原文答案的方式来操做就能够了，毕竟浮动了以后 display 的属性值是 block，不会改变的。

如何让绝对定位的div居中？

这个问题我就没看明白跟上面那个浮动元素中使用了绝对定位方式居中有什么区别了。无非就是 margin 或者 transform 的方式来操做。

额外想法

对于水平垂直居中的方法，网络上有不少不少的文章了，不一样的方式会带来不一样的效果状况。在平常使用的过程当中，咱们是会根据页面的实际需求状况而采用不一样的居中方式，原理都差很少，只是实现的方式不一样。对于这个题目，总而言之一句话就是：如何作好一个元素的居中。

-----------============ 我是分割线 ============-----------

小结

小小的结束一下，嗯，不是小小的总结，是小小的结束，写这些东西真累，偷懒花一点时间写一下，回头一看，原来才写 7 点，后面还有那么多，先这样吧，后面看状况再说了。

并且说实在的，目前这个写的的内容其实也很笼统，并不全面。