2026年CSS+DIV面试题及标准答案（前端必考完整版）

2026年CSS+DIV最新面试题及标准答案（前端必考完整版）适用场景：前端校招、实习生面试、Web期末考试、企业笔试、前端基础复试题库特点：2026最新高频原题，从基础概念→核心原理→手写布局→疑难坑点，答案标准简洁，面试可直接口述、手写一、基础概念必考题（100%必问）1、什么是CSS盒模型？标准盒模型和IE怪异盒模型的区别？（必考）标准答案：所有HTML标签（div）都是矩形盒子，由四部分组成：content内容、padding内边距、border边框、margin外边距。①标准W3C盒模型（默认）：box-sizing:content-box;width/height只控制内容区大小，元素实际宽度=width+padding+border+margin。②IE怪异盒模型：box-sizing:border-box;width/height包含内容+内边距+边框，设置的宽高就是盒子实际占位宽高，margin额外叠加。2、box-sizing两个属性值的作用？标准答案：content-box：默认标准盒模型，padding、border会撑大盒子。border-box：怪异盒模型，padding、border不会撑大盒子，布局更稳定，开发统一推荐使用。3、div默认的特性是什么？标准答案：div是块级元素；独占一行、宽度默认100%父级宽度、可设置宽高边距、默认垂直排列。4、块级元素、行内元素、行内块元素区别？标准答案：块级（div/p/h1）：独占一行，可设宽高marginpadding。行内（span/a）：同行显示，不能设置宽高，上下margin无效。行内块（img/input）：同行显示，可设置宽高边距。二、定位与浮动高频题（面试核心）5、CSS五种定位方式及区别？（static/relative/absolute/fixed/sticky）标准答案：1.static：默认文档流定位，正常排版，偏移属性无效。2.relative：相对自身原位置定位，不脱离文档流，占位保留，常用于父级定位参照。3.absolute：绝对定位，脱离文档流，相对于最近已定位父级；无父级定位则相对于浏览器窗口。4.fixed：固定定位，脱离文档流，永远相对于浏览器视口，滚动页面位置不变（常用于悬浮按钮、顶部导航）。5.sticky：粘性定位，relative+fixed结合，滚动到阈值固定，否则正常流动。6、z-index生效条件？标准答案：z-index只对定位元素生效（relative/absolute/fixed/sticky），static无效；且层级比较仅限同一层叠上下文，父级层级低，子级z-index再高也无效。7、什么是浮动？浮动的副作用？如何清除浮动？（超高频）标准答案：浮动float:left/right：让块级元素同行排列，脱离普通文档流。副作用：父级高度塌陷、浮动元素覆盖普通文档流、页面错乱。清除浮动4种方法：1.父级设置overflow:hidden（最简常用）；2.结尾加空div并设置clear:both；3.伪元素::after清除浮动（企业主流写法）；4.父级开启BFC。三、BFC原理必考（中高级面试）8、什么是BFC？BFC的作用和触发条件？标准答案：BFC（块级格式化上下文）是CSS独立渲染区域，内部元素布局不会影响外部，外部也不影响内部。触发条件：1.根元素html；2.overflow不为visible；3.浮动元素；4.绝对定位元素；5.display:inline-block/grid/flex。BFC作用：解决高度塌陷、解决margin外边距重叠、实现自适应两栏布局。9、为什么会出现margin塌陷/重叠？如何解决？标准答案：垂直方向相邻块级元素、父子块级元素会发生margin合并，取最大值。解决：给父级开启BFC、设置padding/border、分开布局结构。四、Flex&Grid布局（2026最新热点）10、Flex弹性布局常用属性？标准答案：父容器：display:flex、justify-content（水平对齐）、align-items（垂直对齐）、flex-wrap（是否换行）。子元素：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准宽度）、align-self（单独对齐）。11、Flex实现水平垂直居中最简写法？PlainText

.box{

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

}12、Grid网格布局了解吗？适用场景？标准答案：Grid是二维布局（同时控制行和列），适合整体页面栅格、卡片列表布局；Flex是一维布局，适合单行排列、居中对齐。五、经典手写布局题（面试手撕必考）13、手写DIV水平垂直居中（三种主流方法）方法1：Flex布局（推荐最简）PlainText

.parent{

width:500px;

height:500px;

display:flex;

justify-content:center;

align-items:center;

}方法2：绝对定位+margin:autoPlainText

.parent{position:relative;}

.child{

position:absolute;

left:0;right:0;top:0;bottom:0;

margin:auto;

}方法3：绝对定位+平移（适配未知宽高）PlainText

.child{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}14、手写两栏自适应布局（左固定右自适应）PlainText

.left{width:200px;float:left;}

.right{margin-left:200px;}15、手写三栏布局（左右固定，中间自适应）PlainText

.left{width:200px;float:left;}

.right{width:200px;float:right;}

.center{margin:0200px;}六、CSS疑难坑点&兼容性面试题16、display:none和visibility:hidden区别？标准答案：display:none：彻底隐藏，不占文档流位置，重排重绘。visibility:hidden：视觉隐藏，保留占位，只重绘不重排。17、CSS重排和重绘的区别？如何优化？标准答案：重绘：元素颜色、透明度改变，只更新外观，不改变布局。重排（回流）：元素宽高、位置、布局改变，开销更大，会触发页面重新排版。优化：集中修改样式、使用flex/transform、避免频繁操作DOM样式。18、伪类和伪元素的区别？标准答案：伪类（:hover/:active）：匹配元素状态，不生成新节点。伪元素（::before/::after）：创建虚拟DOM节点，可插入内容、装饰样式，常用于清除浮动、图标装饰。19、如何让一个div垂直居中且自适应屏幕？标准答案：使用transform平移居中，无需固定宽高，适配所有屏幕，是企业最优方案。20、CSS优先级权重计算规则？标准答案：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。七、2026年CSS最新面试热点题21、transform和transition的区别？标准答案：transform：变形属性（旋转、缩放、平移、倾斜），是静态样式。transition：过渡动画，给属性变化添加动画过程，需要触发条件（hover/点击/JS修改）。22、为什么transform不会触发重排？标准答案：transform会开启GPU加速，在独立合成层渲染，不改变文档流布局，因此只触发重绘，不触发重排，性能极高。23、移动端1px细线问题如何解决？标准答案：设备像素比导致边框变粗，使用transform:scale(0.5)缩放实现真实1px细线。八、D