CSS高频面试题及详细答案（实战向）.docxVIP

CSS高频面试题及详细答案（实战向）

一、CSS基础核心题

1.讲讲CSS的盒模型，以及标准盒模型和怪异盒模型的区别

盒模型是CSS布局的核心，所有HTML元素都可以看作一个盒子，由四个部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。

两种盒模型的核心区别在于元素整体宽度高度的计算规则：

1）标准盒模型（W3C盒模型）：默认属性box-sizing:content-box

元素设置的width/height仅代表内容区大小，盒子实际总宽度=width+padding+border+margin。日常开发中，内容不会挤压预设宽高，边框和内边距会向外撑开盒子。

2）怪异盒模型（IE盒模型）：属性box-sizing:border-box

元素设置的width/height是盒子整体可视区域的总大小，包含了content、padding、border。盒子实际宽度=设定的width+margin。padding和border会向内挤压内容区，不会撑大盒子。

实际开发中基本都会统一设置box-sizing:border-box，方便布局尺寸精准控制。

2.CSS选择器有哪些？优先级规则是什么？

常用选择器分类（从低优先级到高）：

1）通用选择器（*）、标签选择器（div、p）

2）类选