2021面试题——CSS面试题总结

css面试题总结

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

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

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

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

content-box:w3c的标准盒子模型，设置元素的宽高属性就是content部分的宽高

border-box：IE传统盒子模型，设置元素的宽高属性值的是border+padding+margin 三者之和的宽高，

元素内容的宽高等于：元素的宽高 - （ border + padding ）

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

id选择器

类选择器

标签选择器

相邻选择器

子选择器

后代选择器

通配符选择器

属性选择器

伪类选择器

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

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

优先级（就近原则）：！important>id选择器>类选择器>标签选择器

3.CSS3有哪些新特性？

background-image
background-origin（content-box，padding-box，border-box）
background-size
background-repeat
word-wrap：normal|break-word;
text-shadow文字阴影: 水平 垂直 模糊距离 阴影颜色
font-face 字体
border-radius边框圆角
border-image：url（） 3 3 round 边框图片
box-shadow
媒体查询

4.em和px的区别

px和em都是长度单位

**区别：**px的值是固定的的，计算比较容易；em的值不是固定的，并且em会继承父级元素的字体大小

**注意：**浏览器的默认字体高都是16px，所以未经调整的浏览器都符合：1em=16px