本周面试题一览：简述CSS选择器及其优先级伪类伪元素的区别？你知道什么是BFC吗？什么是BFC？BFC的约束规则？BFC能解决什么问题？如何实现居中？(6种方式)说说盒子模型？1、CSS选择器的优先级及其优先级从高到低：!importantinlinestyle(style='xxx')(1000)ID选择器(#example)(0100)class选择器(.example)/attribute选择器([type="radio"])/伪类选择器(:hover)(0010)标签选择器(h1)/伪元素选择器(::before)(0001)通配符选择器(*)/关系选择器(+,>,~,'',||)/否定伪类(:not())(0000)注：通配符选择器(*)，组合选择器(+,>,~,'',||)和否定伪类(:not())不影响优先级（但是，在:not()内声明的选择器会影响优先级）。优先级由A、B、C、D的值决定，它们的取值规则如下：如果有内联样式，则A=1，否则A=0；B的值等于ID选择器出现的次数；C的值等于类选择器和属性选择器与伪类出现的总数；D的值等于标签选择器和伪元素出现的总数。这个很抽象，举个例子你就明白了：#nav-global>ul>li>a.nav-link应用上面的算法依次求ABCD的值：因为没有内联样式,A=0;ID选择器共出现1次，B=1；类选择器出现1次，属性选择器出现0次，伪类选择器出现0次，所以C=(1+0+0)=1；标签选择器出现了3次，伪元素出现了0次，所以D=(3+0)=3；上面计算的A、B、C、D可以简写为：(0,1,1,3)。访问MDN以获取有关优先级的更多详细信息。2、伪类和伪元素的区别伪元素：主要用来创建一些原来dom结构树中不存在的元素，例如：使用::before和::after在前后添加文本样式在一些现有的元素等之后，这些添加的内容将显示在特定的UI中，并被用户看到。这些内容不会改变文档的内容，不会出现在DOM中，也无法复制，只是添加在CSS渲染层中。在CSS3中，推荐使用::来表示伪元素，如：div::before。::before和::after这两个伪类有一个唯一的属性内容，必须存在。伪类：表示一个已经存在的元素处于某种状态，但是这种状态无法通过dom树来表示，所以可以通过伪类为其添加样式。比如a元素的:hover,:active等。CSS3中推荐使用:表示伪元素，如：a:hover。3.你知道什么是BFC吗？3-1.什么是BFC块级格式化上下文？它是一个独立的渲染区域，将BFC内部的元素与外部的元素隔离开来，使得内外元素的定位不会相互影响。IE下布局可以通过zoom:13-2触发。触发BFC根元素的条件floatelementposition:absolute/fixeddisplay:inline-block/tableovevflow!==visibledisplay:flow-rootcolumn-span:all3-3.BFC属于同一个BFC的相邻两个Box的约束规则是垂直的安排（可以看作是BFC中的常规流程）。属于同一个BFC的两个相邻Boxes的外边距会与BFC中子元素的marginboxes重叠左边与包含块（BFC）borderbox的左边接触（子元素absolute除外）.BFC的区域不会和float元素的区域重叠。在计算BFC的高度时，会考虑到BFC中包含的所有元素，即使是浮动元素也包括在内。计算出来的文本层不会被浮动层覆盖，而是包围起来。3-4。BFC可以解决的防止margin重叠和可以包含浮动元素的问题——清除内部浮动（清除浮动的原理是两个div位于同一个BFC区域中）自适用的两列布局（浮动+溢出）可以防止元素被浮动元素覆盖4.如何实现居中4-1.绝对定位+margin的优缺点：parent需要有具体的宽高，具体的宽高要知道value.parent{position:relative;高度：400px；宽度：100%；border:1pxsolid#000;}.child{position:absolute;顶部：50%；左：50%；宽度：100px；高度：100px；左边距：-50px；边距顶部：-50px；背景颜色：海蓝宝石色；}4-2.transform的优缺点：parent不需要特定的宽高，但是兼容性不是特别好。父母{位置：相对;高度：400px；宽度：100%；border:1pxsolid#000;}.child{position:absolute;顶部：50%；左：50%；宽度：100px；高度：100px；转换：翻译（-50%，-50%）；背景颜色：海蓝宝石；}4-3。绝对定位的优缺点：parent需要有具体的宽高，但是不需要知道width和height的具体值。parent{position:relative;高度：400px；宽度：100%；border:1pxsolid#000;}.child{position:absolute;顶部：0；左：0；底部：0；右：0；保证金：自动；宽度：100px；高度：100px；;证明内容：居中；对齐项目：居中；高度：400px；宽度：100%；border:1pxsolid#000;}.child{width:100px;高度：100px；5.table-cell优缺点：要求parent宽高固定，不能用百分比。parent{显示：表格单元格；垂直对齐：中间；文本对齐：居中；高度：400px；宽度：400px；border:1pxsolid#000;}.child{display:inline-block;宽度：100px；高度：100px；背景颜色：海蓝宝石；}4-6.javascript5.Boxmodel页面渲染时，可以通过box-sizing设置dom元素采用的布局模型。根据计算出来的宽高区域可以分为：content-box（W3C标准盒模型）border-box（IE盒模型）padding-box（FireFox曾经支持）margin-box（浏览器还没有实现）注意:理论上有以上4种类型的框，但是现在w3c和mdn规范都只支持content-box和border-box；关于作者齐小神，只有一个前端程序。有点文艺，喜欢摄影。虽然我现在朝九晚五，努力学习，但我的梦想是当女侠，扶贫济困，剑走天下。希望有一天我能修复BUG，实现我的梦想。公众号：前端大空间，不定时更新，欢迎来玩~
