最新大厂前端面试题-面试指南css篇面试题.docx

前端面试指南 - CSS 篇面试题 本文将详细讲解 CSS 相关知识点，涵盖 CSS 初始化、margin 重合问题、盒模型问题、隐藏元素问题等多个方面。 考点 1：初始化样式问题 CSS 初始化是指开发者对浏览器的默认样式进行重置。这样做的目的是为了解决浏览器差异问题，因为不同的浏览器具有不同的默认样式，例如 margin 和 padding 等。初始化 CSS 样式可以让开发者省去很多写单独兼容的代码，减少代码体积，节约网页下载时间，使得开发网页内容时更加方便简洁。 考点 2：margin 重合问题 margin 重合问题是指相邻两个盒子垂直方向上的 margin 会发生重叠，只会取比较大的 margin。解决方法有多种，例如设置 padding 代替 margin、设置 float、设置 overflow、设置 position：absolute 绝对定位、设置 display：inline-block 等。 考点 3：关于盒模型问题 盒模型是指页面上所有的 HTML 元素都可以看作是盒子，每个盒子由 4 部分构成：外边距 margin、内边距 padding、内容 content、边框 border。标准盒模型和 IE 盒子模型是两种不同的盒模型，前者将 width 和 height Only 计算内容 content 的宽度和高度，而后者将 width 和 height 计算包括 padding 和 border 的宽度和高度。 在 CSS3 中新增了 box-sizing 属性，可以让开发者指定盒子模型种类。值为 content-box时，padding 和 border 不算在 width 和 height 里面，等同于标准盒模型；值为 border-box 时，padding 和 border 算在了 width 和 height 里面，等同于 IE 盒子模型。 考点 4：隐藏元素问题 隐藏元素有多种方法，例如设置元素的 display 为 none、设置元素的 visibility 为 hidden 等。display:none 是最常用的隐藏元素的方法，但它会导致浏览器的重排和重绘；visibility:hidden 则只会导致浏览器重绘，不会重排，适用于那些元素隐藏后不希望页面布局会发生变化的场景。