背景想想我为什么写这个，不就是因为最近这篇《50道CSS基础面试题（附答案）》文章被转了很多，凑热闹的人越来越多吗？显然，这一定是我要写它的原因。更何况，我的公众号已经很久没有更新了。微信说如果长时间不更新，就会关闭公众号。恐怕...我还没有时间从事CSS工作以及与CSS相关的事情。一直在接触，自从离开之前的公司来到现在的公司处理小程序后，只是简单的看了一眼CSS内容，没有想太多。看完这篇文章，我才明白，再不思考，我真的要废了。根据这篇文章的题目和答案，结合自己的一些经验和想法，稍微合理化一下，不对的地方请喷，毕竟我的考虑还是很有限的。问题的正文部分直接复制，答案引用那篇文章的部分，引用的答案附上我的一些个人观点。1.引入标准的CSS盒子模型？和低版本IE的盒子模型有什么区别？标准盒模型：Width=内容宽度（content）+border+padding+margin低版本IE盒模型：Width=内容宽度（content+border+padding）+margin首先抛开所谓的标准，因为这个标准是AfterW3C制定它，它与主要制造商进行沟通以使其统一。在这个回答中，严格来说，你会先问基本如何计算，就像上面的回答一样，但是需要注意顺序。标准盒模型的width=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right，所以可能会显得长一些，根据上面的回答，可能是width+padding+border+margin就可以了。顺便说一句，除了宽度之外，还有左侧和右侧。weirdmode的boxmodelwidth=(width+padding+border)+margin整体上和标准boxmodel差不多，主要是width+padding+border是一起算的。标准盒模型是基于doctype的正确写法，只能在IE6以上的浏览器中使用。如果浏览器低于IE6，即使doctype写对了也会进入怪异模式；在IE浏览器中，如果doctype写错或者doctype前面有其他字符，可能会导致IE进入怪异模式，导致浏览器对元素框模型的解析出现问题，如：在这种情况下，低版本的IE会进入怪异模式，不仅可能会导致盒模型计算出现问题，还会出现其他情况。与更高版本的浏览器区别对待。附上网址：DOCTYPE与浏览器模式分析http://www.w3help.org/zh-cn/casestudies/002，供参考学习。扩展题可以根据上面再问。width:0时；填充：0100px；边框：10px纯红色；边距：050px；盒子模型有什么区别？根据box-sizng变化的盒模型的计算方法与标准盒模型和weird模式的盒模型的计算方法有什么区别？2.box-sizing属性？用于控制元素的盒模型的解析方式，默认为content-boxcontext-box：W3C标准盒模型，设置元素的height/width属性，指的是内容部分边框的高/宽-box：IE传统的盒子模型。设置元素的高/宽属性是指border+padding+content部分的高/宽。box-sizing主要用于计算元素的宽高之和，具体的计算方式将根据box-sizing属性值来确定，有两个属性值：content-box和border-box。我们了解了一个元素的盒子模型之后，其实对这个的理解就简单多了。比如我们可以这样理解，再扩展解释一下：content-box:标准模式下盒模型的一种计算方法border-box:aquirks模式下盒模型的计算方法是一个边笔记。目前低版本的IE已经逐渐淡出了大家的视线，所以怪癖模式和标准模式已经不再引起太多人的注意，doctype基本上在各种情况下都会被自动添加为小编，但这并不意味着我们不关心盒模型的计算，而是我们不关心怪异模式和标准模式的浏览器解析方式。在目前的移动端，为了方便计算box，我们会使用box-sizing:border-box;进行操作，计算总宽度内padding和border的值。当然，如果有余量，还是会额外考虑的。3.什么是CSS选择器？哪些属性可以继承？注：原文部分答案省略CSS选择器：id选择器（#myid）、类选择器（.myclassname）、标签选择器（div,h1,p）、相邻选择器（h1+p）、子选择器(ul>li),后代选择器(lia),通配符选择器(*),属性选择器(a[rel="external"]),伪类选择器(a:hover,li:nth-child)...这道题应该说是两道题，分别是选择器和属性的问题。或许可能是考核一个人对CSS选择器的理解程度，以及对CSS属性的掌握程度。关于这个问题，我个人认为不需要全部回答。如果你真的回答了所有的问题，你可能正在背课文。这是我之前编译的selector的一张图，大家感受一下。这张图好久没更新了。可能还有一些新稿没加进去，不过没关系。东西那么多，我们目前能用到的就那么几个，就是原文提供的答案。那么哪些属性可以继承又是一个大话题。可能需要对CSS的所有属性进行排序，才能得到一个比较完整的结果。这里我会提到原答案中提到的可继承属性中的font-size属性。font-size确实是可以继承的，但是并不是所有的HTML元素在body中定义了font-size之后都会把这个文字大小应用到自己的标签上，比如h1和h2等一系列title元素的标签，以及Control输入和按钮等元素。h1系列的title元素标签在浏览器默认样式中以em为单位，会根据parent的font-size变化（说实话，这算不算继承？）input的控制元素series，直接有浏览器默认的文字大小，以px为单位（这是因为已经定义了属性，其实应该算是继承，只是权重值不够高tocoverthefont-sizeofbody)在这个问题中，提到了一个优先级：priority(proximityprinciple):!important>[id>class>tag]不知道是不是和下一个问题搞混了，但是这里应该缺少样式属性Bar。!important>styleattribute>id>class>tag不明白为什么原文的答案里有个方括号。这意味着这是可选的，或者什么。4、CSS优先级算法是如何计算的？elementselector:1classselector:10idselector:100elementlabel:1000我觉得没有问题，但是面试的时候提到这个之后，可能会问到其他相关的问题。选择器优先级扩展问题：11个元素选择器和1个类选择器哪个优先级高？如果有256个类选择器，比如.class001.......class256{}，此时会不会大于一个id选择器？!important声明的样式优先级最高，有冲突才会计算。如果优先级相同，则选择最后出现的样式。继承样式的优先级最低。这三点不是很全面。面试的时候，如果面试官提到了selector的优先级，他可能会给你几个demo，让你想一下哪个文本是什么颜色等等，最后问原理。众所周知，!important的优先级最高，所以如果可能扩展的话，会有：
