"前端面试50题及答案：盒子模型与选择器属性"

一、标准的CSS盒子模型和低版本IE的盒子模型有什么不同？ 标准的CSS盒子模型（content-box模型）包括内容区域、边框、内边距和外边距。元素的宽度（width）属性只包含内容区域的宽度，不包括边框和内边距。元素的总宽度等于内容区域宽度加上边框宽度和内边距宽度再加上外边距宽度。 而低版本的IE盒子模型（border-box模型）中，元素的宽度属性包括了内容区域、边框和内边距的宽度，不需要再额外计算边框和内边距的宽度。元素的总宽度等于内容区域宽度加上外边距宽度。 二、box-sizing属性是用来控制元素的盒子模型的解析模式。它有两个取值： 1. content-box：使用W3C的标准盒子模型。设置元素的height/width属性指的是内容部分的高/宽。 2. border-box：使用IE传统盒子模型。设置元素的height/width属性指的是包括border、padding和content的整个盒子的高/宽。 三、常用的CSS选择器有以下几种： 1. 标签选择器（tag selector）：通过HTML标签名选择元素，如p、div、span等。 2. 类选择器（class selector）：通过指定元素的class属性来选择元素，以.开头，如.class1、.class2等。 3. ID选择器（id selector）：通过指定元素的id属性来选择元素，以#开头，如#id1、#id2等。 4. 伪类选择器（pseudo-class selector）：通过元素的特殊状态来选择元素，如:hover、:active等。 5. 属性选择器（attribute selector）：通过元素的属性来选择元素，如[type="text"]、[title]等。 6. 后代选择器（descendant selector）：通过元素的后代关系来选择元素，如div p、ul li等。 7. 直接子元素选择器（child selector）：通过元素的子元素关系来选择元素，使用>，如ul>li、div>p等。 8. 兄弟选择器（adjacent sibling selector）：通过元素的兄弟关系来选择元素，使用+，如div+p、h2~p等。 部分属性可以继承，即父元素的某些CSS属性值会被子元素继承，并作为子元素的默认值。常见的可以继承的属性有： 1. 字体相关属性：font、font-family、font-size、font-weight等。 2. 文本相关属性：color、line-height、text-align、text-decoration等。 3. 盒模型相关属性：margin、padding、border等。 4. 列表相关属性：list-style、list-style-type等。 5. 表格相关属性：border-collapse、border-spacing等。 6. 元素显示相关属性：visibility、display等。 但需要注意的是，并非所有属性都可以继承，比如背景相关属性（background、background-color等），盒子模型属性（width、height等），定位属性（position、top、left等）等不会被子元素继承。 总结：标准的CSS盒子模型和低版本IE的盒子模型在计算元素的宽度上有差异。box-sizing属性用于控制元素的盒子模型解析模式，默认为content-box。常用的CSS选择器有标签选择器、类选择器、ID选择器等。部分CSS属性可以继承，而部分不能继承。