CSS高频面试题及实战答案.docxVIP

CSS高频面试题及实战答案

一、基础核心类

问：CSS盒模型有哪两种？区别是什么？实际开发中如何切换？

答：分为标准盒模型（W3C）和怪异盒模型（IE）。核心区别是宽高计算范围：标准盒模型的width/height仅包含内容区（content），padding和border会额外撑开元素；怪异盒模型的width/height包含content+padding+border，元素整体尺寸不会因padding/border变形。切换方式：通过box-sizing属性，box-sizing:content-box（默认，标准盒模型）、box-sizing:border-box（怪异盒模型，开发中常用，避免计算麻烦）。

问：CSS选择器的优先级规则是什么？!important有什么作用？

答：优先级从高到低：①内联样式（style属性）→②ID选择器（#id）→③类选择器（.class）、伪类（:hover）、属性选择器（[type=text]）→④元素选择器（div）、伪元素（::after）。规则：①优先级高的覆盖优先级低的；②同优先级下，后定义的样式覆盖先定义的；③继承的样式优先级最低。!important可强制提升单个样式声明的优先级（最高），但需慎用：仅在修复第三方样式等特殊场景使用，滥用会导致样式管理混乱，且内联样式加!important后无法被覆盖。

问：什么是CSS浮动（float）？浮动会带来什么问题？如何清除浮动？

答：float是早期布局方案，用于让元素脱离文档流，向父容器左侧或右侧浮动（常见值：left/right/none）。问题：①父元素高度塌陷（父元素未设置高度时，子元素浮动后父元素高度为0）；②后续元素排版错乱（可能被浮动元素覆盖）。清除浮动方法（实战常用）：①父元素添加overflow:hidden（触发BFC，简单高效）；②父元素末尾添加空标签并设置clear:both（兼容好但冗余）；③使用伪元素清除（.parent::after{content:;display:block;clear:both;}，无冗余，推荐）。

二、布局与定位类

问：flex布局的核心属性有哪些？请举例说明常用场景。

答：flex布局（弹性布局）核心分为容器属性和项目属性：

容器属性：display:flex（开启flex布局）、flex-direction（主轴方向：row/column）、justify-content（主轴对齐：center/space-between）、align-items（交叉轴对齐：center/stretch）、flex-wrap（是否换行：wrap）。

项目属性：flex:1（项目占比，等价于flex-grow:1;flex-shrink:1;flex-basis:0%）、align-self（单个项目交叉轴对齐，覆盖容器align-items）。

常用场景：①水平垂直居中（父容器：display:flex;justify-content:center;align-items:center）；②等分布局（子项目加flex:1）；③自适应布局（左侧固定宽度，右侧flex:1自适应）；④导航栏排版（横向均匀分布）。

问：position的取值有哪些？各自的定位规则是什么？

答：position取值及规则：

static（默认）：正常文档流，不脱离文档流，top/left等属性无效。

relative（相对定位）：不脱离文档流，相对于自身原有位置定位（top/left等属性生效），不影响其他元素布局。

absolute（绝对定位）：脱离文档流，相对于最近的已定位祖先元素（position不为static）定位，若无则相对于根元素（html），会影响后续元素布局。

fixed（固定定位）：脱离文档流，相对于浏览器视口定位，滚动页面时位置不变（如导航栏、回到顶部按钮）。

sticky（粘性定位）：结合relative和fixed特性，滚动到指定阈值前是relative，超过后是fixed（如列表标题吸顶）。

问：什么是BFC？BFC的触发条件和应用场景有哪些？

答：BFC（块级格式化上下文）是一个独立的渲染区域，内部元素的布局不会影响外部元素，外部元素也不会影响内部。

触发条件（满足其一即可）：①根元素（html）；②浮动元素（float≠none）；③绝对/固定定位元素（position:absolute/fixed）；④行内块元素（display:inline-block）；⑤overflow≠visible（如overflow