HTML+CSS 面试题及详细答案（真实面试版）

HTML+CSS面试题及详细答案（真实面试版）一、HTML基础面试题1.说说HTML5的新增特性，日常开发常用哪些？参考答案：HTML5主要新增了语义化标签、多媒体能力、表单新特性、本地存储、图形绘制等功能，日常开发高频使用的有这几类：1）语义化标签：解决旧版div布局无结构的问题，让代码可读性、SEO优化、设备适配更好。常用的有header、nav、main、section、article、aside、footer。2）多媒体标签：原生支持音视频播放，无需依赖插件，主要是audio、video标签。3）表单增强：新增输入类型number、tel、email、date，还有占位提示placeholder、自动聚焦autofocus、必填校验required等属性，简化表单校验开发。4）本地存储：新增localStorage、sessionStorage，替代传统cookie存储量大、操作繁琐的问题，用于本地简单数据缓存。5）图形与交互：canvas画布绘图、svg矢量图形，适配图表、图标、简单动画场景。2.什么是语义化标签？为什么要使用语义化？参考答案：语义化标签就是标签本身具备明确的页面结构含义，不是单纯用来承载样式的标签。比如header代表头部、nav代表导航、footer代表底部，而div、span是无语义的通用标签。使用语义化的核心好处：1）代码可读性更高：看标签就能知道对应模块的功能，团队协作维护更方便；2）利于SEO优化：搜索引擎爬虫可以精准识别页面结构和内容权重，提升页面收录和排名；3）适配无障碍访问：屏幕阅读器可以识别语义标签，帮助残障用户浏览页面；4）结构样式分离更彻底：页面结构清晰，后续改样式、改布局不会打乱整体结构。3.div和span的区别？参考答案：1）显示类型不同：div是块级元素，独占一行；span是行内元素，不独占一行，横向排列。2）宽高设置不同：div可以直接设置width、height、margin、padding；span无法直接设置宽高，上下margin、padding不生效。3）嵌套规则不同：块级元素可以嵌套行内元素和其他块级元素；行内元素只能嵌套文本或其他行内元素，不能嵌套块级元素。4）使用场景不同：div用于页面大模块、区块布局；span用于局部文本样式修改、小范围行内布局。4.HTML5行内元素、块级元素、行内块元素的区别？参考答案：1）块级元素（block）独占一行，默认宽度100%父级宽度，可设置宽高、内外边距，可嵌套任意元素。常见：div、p、h1-h6、ul、li、section。2）行内元素（inline）横向排列，不独占一行，宽高由内容撑开，无法设置宽高，上下内外边距不生效。常见：span、a、em、i、b。3）行内块元素（inline-block）结合两者优点，横向排列不独占一行，同时可以设置宽高、内外边距。常见：img、input、button，也是开发中常用的布局属性值。5.说说你对HTML文档流的理解？参考答案：文档流是浏览器默认的页面元素排列规则，页面内普通元素默认按照从上到下、从左到右的顺序排列，块级垂直排布、行内/行内块水平排布。默认处于标准文档流的元素，不会重叠、不会脱离正常排版。而浮动、绝对定位、固定定位的元素会脱离标准文档流，不再占据正常文档流位置，会导致父级高度塌陷、元素重叠等问题，需要手动处理。二、CSS基础核心面试题1.CSS选择器有哪些？优先级规则是什么？参考答案：常用选择器：通配符选择器、标签选择器、类选择器、id选择器、后代选择器、子代选择器、相邻兄弟选择器、属性选择器、伪类、伪元素。优先级从高到低排序：!important（最高）>行内样式style>id选择器>类、伪类、属性选择器>标签、伪元素选择器>通配符>继承样式（最低）优先级规则细节：1）优先级只看权重，不看书写顺序，权重高的样式优先生效；2）同级优先级，后写的样式覆盖先写的；3）!important慎用，会打乱层级权重，不利于后期样式维护和覆盖。2.伪类和伪元素的区别？常用的有哪些？参考答案：1）本质区别伪类（单冒号:）：用于给已有元素添加状态样式，不生成新元素，比如悬浮、点击、聚焦状态。伪元素（双冒号::）：用于创建虚拟行内元素，可以添加内容、样式，相当于页面新增了看不见的元素。2）常用伪类：hover、active、focus、link、visited、nth-child()、first-child3）常用伪元素：before、after、first-letter、first-line4）开发小规范：before/after必须搭配content属性，否则不生效；伪元素默认是行内元素。3.CSS盒模型是什么？标准盒模型和怪异盒模型的区别？参考答案：所有HTML元素都可以看作一个盒子，盒模型由四部分组成：内容区content、内边距padding、边框border、外边距margin。1）标准盒模型（content-box）元素实际宽度=width+padding+border+margin设置的width仅代表内容区宽度，padding和border会撑大盒子，容易导致布局错位。2）怪异盒模型（border-box）元素实际宽度=width+margin设置的width包含content、padding、border，修改内边距和边框不会改变盒子整体大小，布局更稳定，日常开发统一使用border-box。4.什么是BFC？触发条件和作用是什么？参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的排版不会影响外部元素，外部也不会影响内部。常用触发条件：1）根元素html自带BFC；2）元素设置浮动（float不为none）；3）overflow不为visible（auto、hidden、scroll）；4）设置绝对定位、固定定位；5）display为inline-block、flex、grid。BFC核心作用：1）解决浮动导致的父元素高度塌陷；2）解决上下元素margin重叠问题；3）实现自适应两栏、三栏布局，隔离元素布局。5.如何解决margin重叠问题？参考答案：margin重叠只发生在标准文档流的块级元素垂直方向，水平方向不会重叠，父子元素、兄弟元素都会出现该问题。解决方式：1）给父元素触发BFC（最常用）：设置overflow:hidden；2）父元素设置padding或border，隔开父子间距；3）避免上下相邻元素同时设置margin，统一单边设置间距；4）使用flex布局，flex容器内元素不会发生margin重叠。三、CSS布局高频面试题1.浮动布局的优缺点？如何清除浮动？参考答案：浮动优点：可以快速实现元素横向排列，兼容性好，适配老旧浏览器。浮动缺点：浮动元素脱离标准文档流，导致父级高度塌陷，容易出现布局错乱，需要手动清除浮动，代码冗余度高。常用清除浮动方法：1）伪元素清除法（项目最常用）：给父元素添加clear-fixed类，通过after伪元素清除浮动，不增加冗余dom结构；2）父元素设置overflow:hidden，触发BFC自动撑起高度；3）在浮动元素末尾添加空div，设置clear:both，缺点是增加多余dom。2.详细说说flex布局，常用属性有哪些？参考答案：flex是弹性布局，是目前项目主流布局方式，简洁高效，完美适配自适应、居中、等分布局场景，完全替代传统浮动布局。设置display:flex的元素为父容器，子元素自动成为弹性项。父容器常用属性：1）flex-direction：设置主轴方向，row横向、column纵向；2）justify-content：主轴对齐方式，居中、两端对齐、均分间距等；3）align-items：侧轴单行对齐方式，常用居中对齐；4）flex-wrap：是否自动换行，默认不换行，wrap自动换行；5）align-content：多行元素的侧轴对齐方式。子元素常用属性：1）flex-grow：放大比例，默认0，剩余空间自动分配；2）flex-shrink：缩小比例，默认1，空间不足自动缩小；3）flex-basis：元素基础宽度，优先级高于width；4）align-self：单独设置自身对齐方式，覆盖父容器样式。3.水平垂直居中的多种实现方式？参考答案：方式一：flex居中（项目首选、最简单）父元素设置display:flex;justify-content:center;align-items:center;直接实现子元素水平垂直居中，适配所有场景。方式二：绝对定位+transform父相对定位，子绝对定位，top、left设为50%，transform:translate(-50%,-50%)；适配未知宽高元素，兼容性良好。方式三：绝对定位+宽高固定子元素固定宽高，top、left、right、bottom全部设为0，margin:0auto；仅适配固定宽高场景。方式四：table布局父设置display:table-cell;vertical-align:middle;子水平居中，适合简单老旧布局场景。4.三栏自适应布局怎么实现？（左右固定、中间自适应）参考答案：方法一：flex布局（主流）父容器设置display:flex；左右栏设置固定width，中间栏设置flex:1，自动占满剩余空间，代码简洁、无兼容问题、适配性强。方法二：浮动布局（传统方案）左栏左浮动、右栏右浮动，中间主体设置margin左右边距，留出左右栏宽度，实现自适应。需要注意清除浮动，避免布局塌陷。方法三：绝对定位父相对定位，左右栏分别绝对定位固定左右位置，中间设置左右margin适配间距。四、CSS进阶与兼容面试题1.谈谈CSS继承性，哪些属性可以继承？参考答案：CSS继承性指子元素会默认继承父元素的部分样式，无需重复书写，简化代码。可继承属性：字体系列（font-size、font-family、font-weight）、文本系列（color、text-align、line-height、text-indent）、光标cursor、visibility等。不可继承属性：宽高、内外边距、边框、背景、定位、浮动、display布局属性。可以通过inherit强制继承任意属性，initial恢复默认样式。2.什么是CSS层叠上下文？层叠顺序规则？参考答案：层叠上下文是页面元素的三维层级空间，元素重叠时，层级高的元素会覆盖层级低的元素，z-index只对开启定位、层叠上下文的元素生效。常见层叠上下文触发条件：定位元素（relative/absolute/fixed）、flex子元素、设置opacity小于1、transform、filter属性的元素。层叠顺序（从低到高）：背景边框<标准文档流块级元素<浮动元素<标准文档流行内元素<定位元素（z-index越小层级越低）3.移动端1px边框问题如何解决？参考答案：移动端高清屏会出现1px边框变粗的问题，原因是设备像素比（DPR）大于1，CSS像素和物理像素不匹配。最优解决方案：伪元素+transform缩放通过before/after伪元素生成边框，结合媒体查询判断设备像素比，将边框缩放1/DPR倍，实现真实1px细边框，兼容性最好、无副作用，是项目通用方案。4.常见的CSS兼容性问题及解决方案？参考答案：1）flex兼容问题：低版本浏览器需加前缀-webkit-，老旧项目可做降级布局；2）图片间隙问题：img行内元素默认有底边距，设置img为block或vertical-align:middle解决；3）margin塌陷、重叠：触发BFC、使用flex布局规避；4）透明度兼容：rgba透明不继承，opacity透明会继承，按需选用；低版本浏览器兼容filter透明属性；5）百分比高度失效：父元素未设置高度时，子元素百分比高度无效，需给父级指定高度或使用flex自适应。五、综合手写面试题（高频笔试）1.手写清除浮动通用样式参考答案：css

.clear-fixed::after{

content:'';

display:block;

height:0;

clear: