DIV+CSS 前端面试题及详细答案（实战完整版）

DIV+CSS前端面试题及详细答案（实战完整版）一、基础核心面试题1、谈谈你对DIV+CSS布局的理解？和传统table布局的区别？参考答案：DIV+CSS是现在主流的网页布局方式，核心思想是结构与样式分离。HTML标签负责搭建页面结构、承载内容，CSS专门负责控制页面的样式、布局、配色、间距等视觉效果。和table布局的核心区别：结构清晰度：table布局依靠表格嵌套，代码冗余、层级混乱；DIV+CSS代码简洁，结构语义化更强，可读性高。维护成本：table样式和结构混杂在一起，修改一处样式可能改动整个表格；CSS统一管理样式，全局修改、局部调整都很方便。加载速度：table表格需要完整加载完所有内容才会渲染页面；DIV布局是边加载边渲染，页面展示速度更快。适配性：table布局很难适配移动端、响应式场景；DIV+CSS可以灵活适配不同屏幕尺寸，适配性极强。SEO优化：结构清晰的DIV布局更利于搜索引擎抓取页面内容，table嵌套冗余代码会影响收录权重。2、CSS选择器有哪些？优先级如何计算？参考答案：常用CSS选择器分为五类：通用选择器：*，匹配页面所有标签标签选择器：div、p、span，匹配对应标签类选择器：.class，匹配对应类名标签，最常用ID选择器：#id，匹配唯一id标签高级选择器：后代选择器、子代选择器、相邻兄弟选择器、属性选择器、伪类、伪元素优先级权重规则（从高到低）：!important（最高）>行内样式（style）>ID选择器>类/伪类/属性选择器>标签选择器>通用选择器>继承样式（最低）优先级计算原则：权重多者优先，同权重后面样式覆盖前面样式；!important会直接覆盖所有样式，开发中尽量少用，避免样式混乱。3、什么是CSS继承？哪些属性可以继承，哪些不可以？参考答案：CSS继承指子元素会默认继承父元素设置的部分样式属性，无需重复书写，简化代码。可继承属性：字体系列（font-size、font-family、font-weight）、文本系列（color、text-align、line-height、text-indent）、光标cursor、字间距等。不可继承属性：盒子模型（width、height、margin、padding、border）、定位（position、top、left）、浮动float、背景background、display、overflow等。如需强制继承不可继承属性，可设置inherit值。4、display、visibility、opacity隐藏元素的区别？参考答案：display:none：完全隐藏元素，不占据页面空间，页面渲染时直接忽略该元素，绑定的事件无法触发，回流重绘都会触发。visibility:hidden：视觉上隐藏元素，保留原有页面空间，元素占位不变，绑定的事件无法触发，只会触发重绘，不会触发回流。opacity:0：透明度为0隐藏，保留页面空间，元素依然存在，可以触发绑定的点击、鼠标事件，仅触发重绘，性能最优。二、盒子模型高频面试题1、标准盒子模型和IE怪异盒子模型的区别？如何切换？参考答案：盒子模型由content、padding、border、margin四部分组成，两种模型的核心区别是宽高计算方式不同。标准W3C盒子模型（默认）：元素设置的width/height仅为内容区content尺寸，实际元素宽高=width/height+padding+border+margin。设置内边距和边框会撑大盒子，改变元素整体占位大小。IE怪异盒子模型：元素设置的width/height包含content、padding、border，实际元素宽高=设定的width/height+margin。修改内边距、边框不会撑大盒子，整体尺寸固定。切换方式：通过box-sizing属性控制box-sizing:content-box;标准盒子（默认）box-sizing:border-box;怪异盒子（项目开发常用）实际开发中统一设置border-box，可避免padding、border撑大布局，减少适配问题。2、margin塌陷问题怎么产生的？如何解决？参考答案：margin塌陷（外边距合并）是块级元素垂直方向的默认渲染规则，水平方向不会塌陷，主要分为两种场景：相邻元素塌陷：上下两个兄弟块级元素，上方元素设置margin-bottom，下方元素设置margin-top，两个外边距不会叠加，只会取最大值。父子元素塌陷：父元素没有边框、内边距、行内内容、BFC包裹时，子元素设置margin-top会直接作用在父元素上，导致父元素整体下移。常用解决方法：给父元素设置border边框、padding内边距（简单粗暴，适合简单布局）触发父元素BFC（最推荐）：设置overflow:hidden统一单边margin写法，只给下方元素设置margin-top，规避叠加问题父元素设置display:inline-block三、浮动与清除浮动面试题1、CSS浮动的原理？浮动带来的问题？参考答案：浮动（float）最初是为实现文字环绕图片效果设计的，现在多用于页面横向布局。设置浮动的元素会脱离标准文档流，向左或向右悬浮，层级高于普通标准流元素。浮动带来的核心问题：父元素高度塌陷：子元素全部浮动后，脱离文档流，父元素没有内容支撑，高度变为0后续标准流元素会向上占位，页面布局错乱、重叠影响同级未浮动元素的排版，导致整体布局塌陷2、常用清除浮动的方法有哪些？各自优缺点？参考答案：方法1：额外标签法（clear:both）在浮动子元素末尾添加空div，设置clear:both。优点：简单易懂、兼容性极好；缺点：增加无意义空标签，代码冗余，不规范。方法2：父元素设置overflow:hidden触发父元素BFC，自动适配浮动子元素高度。优点：代码简洁、无冗余、兼容性好；缺点：元素超出部分会被隐藏，不适合需要溢出显示、弹窗、下拉菜单的布局。方法3：伪元素清除浮动（项目最常用）给父元素添加clearfix类，通过::after伪元素清除浮动。代码示例：PlainText

.clearfix::after{

content:'';

display:block;

clear:both;

height:0;

visibility:hidden;

}

.clearfix{

zoom:1;/*兼容低版本IE*/

}优点：不增加多余标签、不破坏布局、无副作用、兼容性全覆盖；缺点：需要提前定义公共样式，是企业项目通用方案。四、BFC核心面试题（重点）1、什么是BFC？BFC的布局规则？参考答案：BFC全称块级格式化上下文，是浏览器渲染页面的一块独立渲染区域，区域内部的元素布局不会影响外部元素，外部元素也不会干扰内部布局。BFC布局规则：BFC容器内部的块级元素会垂直排列BFC可以解决margin塌陷问题，容器内部元素外边距不会合并BFC容器不会和浮动元素重叠，可实现自适应两栏布局BFC可以包裹浮动元素，解决父级高度塌陷BFC区域独立，内外布局互不干扰2、如何触发BFC？参考答案：满足任意一条即可触发BFC：根元素htmloverflow不为visible（hidden、auto、scroll）display为inline-block、flex、grid、table-cellposition为absolute、fixedfloat不为none日常开发最常用overflow:hidden触发BFC，简洁高效。五、定位布局面试题1、position有哪些属性？各自特点？参考答案：1、static（默认静态定位）默认文档流定位，无特殊定位效果，top/left/right/bottom/z-index全部失效，正常占据标准流空间。2、relative（相对定位）相对于自身默认位置偏移，不脱离文档流，保留原有占位，层级不变，常用于微调位置、作为绝对定位父级参照物。3、absolute（绝对定位）完全脱离文档流，不保留占位；相对于最近一层非static定位的父元素偏移，若无则相对于根元素html定位。常用于弹窗、悬浮按钮、图标定位。4、fixed（固定定位）脱离文档流，相对于浏览器视口定位，页面滚动时元素位置固定不变，常用于导航栏、回到顶部、悬浮广告。5、sticky（粘性定位）相对定位+固定定位结合体，页面滚动到阈值前为相对定位，滚动超过阈值后变为固定定位，常用于吸顶导航、列表吸顶标题。2、z-index生效条件是什么？参考答案：z-index用于控制定位元素的层级高低，数值越大层级越高，越靠前显示，必须满足生效条件：元素必须设置了非static的定位（relative/absolute/fixed/sticky），静态定位下z-index无效。层级堆叠规则：同级元素z-index数值大的优先；父子元素层级由父级堆叠上下文决定，子级z-index再高也无法突破父级层级限制。六、Flex弹性布局面试题（高频）1、谈谈Flex布局的优缺点？参考答案：Flex是一维弹性布局，专门用于解决盒子横向、纵向居中、等分、自适应布局问题，现在主流项目首选布局方案。优点：布局简单简洁，代码量少，无需浮动、清除浮动，不会产生布局塌陷问题居中对齐极其方便，水平、垂直居中一行代码即可实现自适应能力强，自动分配剩余空间，适配各种屏幕尺寸可自由调整子元素排序、尺寸、拉伸比例，布局灵活性远超浮动缺点：仅支持一维布局（单行/单列），复杂二维网格布局不如Grid方便极低版本浏览器兼容性一般（现代项目完全兼容，无需顾虑）2、flex常用属性有哪些？主轴、侧轴对齐方式？参考答案：容器属性（父元素）display:flex;开启弹性布局flex-direction：设置主轴方向（row横向、column纵向）justify-content：主轴对齐（center居中、space-between两端对齐、space-around均分）align-items：侧轴对齐（center垂直居中、stretch拉伸、top/bottom对齐）flex-wrap：是否自动换行（nowrap不换行、wrap自动换行）子元素属性flex-grow：放大比例，默认0，剩余空间按比例分配flex-shrink：缩小比例，默认1，空间不足自动缩小flex-basis：设置元素基础尺寸，优先级高于widthorder：控制子元素排序，数值越小越靠前align-self：单独控制单个子元素侧轴对齐方式七、CSS居中方案面试题（必考）1、列举常用的水平垂直居中方法参考答案：方法1：Flex居中（最常用、推荐）父元素设置：display:flex;justify-content:center;align-items:center;无需考虑子元素宽高，适配所有场景。方法2：绝对定位+transform（不定宽高居中）PlainText

.box{

position:absolute;

top:50%;

left:50%;

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

}方法3：绝对定位+margin负值（固定宽高居中）子元素固定宽高，top/left设为50%，margin-top、margin-left设置为宽高一半的负值。方法4：grid居中父元素设置display:grid;place-items:center;极简代码实现居中。八、CSS兼容与优化面试题1、常见的CSS浏览器兼容问题及解决方案参考答案：IE双边距bug：浮动元素同时设置margin，IE6会出现双倍边距；解决：添加display:inline图片默认留白：行内图片底部有空白间距；解决：图片设置display:block或vertical-align:middle透明度兼容：标准opacity，IE低版本使用filter:alpha(opacity=50)圆角、阴影兼容：低版本浏览器需要加私有前缀-webkit-、-moz-默认边距差异：不同浏览器默认body、p边距不同；解决：统一初始化样式，重置默认样式2、前端CSS性能优化方案有哪些？参考答案：选择器优化：避免层级过深的后代选择器，减少通配符选择器使用，优先使用类选择器样式精简：合并重复样式，提取公共样式，避免冗余代码，简写属性（margin、padding、background）减少回流重绘：避免频繁修改DOM样式，尽量统一修改样式类；避免频繁获取offset、scroll等属性层级优化：合理使用z-index，避免层级混乱，减少堆叠上下文冲突文件优化：CSS文件合并压缩，精简空白、注释，减少请求体积避免无效样式：删除废弃、冗余样式，减少浏览器渲染计算压力硬件加速：动画元素开启