常见的的CSS面试题目

*1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content） + 边框宽度（border ）+ 内边距（padding ）+ 外边距（margin）；
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ 外边距（margin），与标准盒子模型不同的地方在于内容部分包含了border和padding；
2、box-sizing属性？
它是用来控制元素的盒子模型的解析模式，其默认为值为：content-box，该属性不可被继承。它还可以设置值为“border-box”和“inherit”，其主要作用是统一CSS盒子模型规范，属性值含义如下：
① context-box：使用W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽；
② border-box：使用IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽；
③ inherit：从父元素继承box-sizeing的值。
3、CSS选择器有哪些？哪些属性可以继承？
① CSS选择器按照类型区分有：ID选择器(#id)、Class选择器(.class)、Tag选择器(div)、相邻选择器(div + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, p:nth-child）、伪元素选择器（div::after，div::before）;
②可继承的属性：font-size, font-family, color；
③不可继承的样式：border, padding, margin, width, height；
④优先级（详情参考MDN描述）：选择器优先级权重：!important > inline > id > 伪类选择器 > 属性选择器 > class > 伪元素选择器 > tag > * > 浏览器继承属性。
4、CSS选择器及其优先级计算？
① CSS中的选择器有：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href=“segmentfault.com”]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 {}
② 选择器的优先级：
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器