css面试题分享

css面试题

1、介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的？

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

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



2、 css选择器有哪些？哪些属性可以继承？

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

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

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

!important 比内联优先级高

3、 css优先级算法如何计算？

答：元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

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

p如果优先级相同，则选择最后出现的样式。

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

4 、css3新增伪类有那些p

答：p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

5、 box-sizing属性？

答：用来控制元素的盒子模型的解析模式，默认为content-box

context-box：w3c的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：ie传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽