前端面试必备：盒子模型、弹性盒与定位解析

"前端面试题，包含前端基础知识和CSS定位技术" 在前端开发中，CSS是样式和布局的重要工具，本资源主要涵盖了两个关键概念：绝对定位和相对定位，以及CSS盒子模型和弹性盒子模型。 ### 相对定位（Relative Positioning） 相对定位是CSS定位中的基础。当你为一个元素设置`position: relative;`时，这个元素依然保持在文档流中的原始位置，并且继续占用其原有的空间。然后，你可以使用`left`、`right`、`top`和`bottom`属性来改变元素的位置，使其相对于它自身原本在文档流中的位置偏移。这种偏移不会影响其他元素，它们仍然会按照原始的文档流排列。 ### 绝对定位（Absolute Positioning） 绝对定位与相对定位不同，它将元素从正常的文档流中移除，不再占用其原本应占的空间。当设置`position: absolute;`后，元素会根据最近的具有定位属性（非`static`）的父元素进行定位。如果没有这样的父元素，那么它将相对于`body`元素或浏览器窗口定位。使用`left`、`right`、`top`和`bottom`属性，你可以精确地控制元素在视口或其定位父元素内的位置。 ### 盒子模型（Box Model） 在CSS中，每个元素都是一个“盒子”，包含内容区（content）、内边距（padding）、边框（border）和外边距（margin）。当你设置元素的宽度和高度时，实际上是在设置内容区的尺寸。元素的实际占用空间会包括内容区、内边距、边框和外边距。需要注意的是，IE5.x和6在“怪异模式”下使用不同的非标准盒子模型，将宽度和高度属性理解为包括内容、内边距和边框的总和。 ### 弹性盒模型（Flexbox） 弹性盒模型是一种现代的布局方式，特别适合于创建响应式设计。当父元素（容器）设置`display: flex;`时，它的子元素（项目）会变得灵活，能够根据容器的大小变化调整自身的大小。通过`flex-shrink`和`flex-grow`属性，你可以控制子元素在空间不足或多余时如何缩放。弹性盒模型还允许轻松实现水平或垂直居中，只需对子元素设置`margin: auto;`即可。 理解和掌握这些基本的CSS概念对于前端开发者来说至关重要，它们是构建复杂布局和实现动态效果的基础。在面试中，了解并能熟练应用这些技术是衡量候选人技能的重要指标。