【华为OD技术面试真题 - 技术面】- 前端面试题（1）

华为OD面试真题题库

专栏：华为OD面试真题题库
目录: 最新华为OD面试手撕代码真题目录以及八股文真题目录

1. 请详细解释一下CSS中的盒模型概念

CSS盒模型（Box Model）是CSS布局的基础，它描述了元素在网页布局中所占的空间方式。每个HTML元素可以看作是一个盒子，由四个部分组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。

1. 内容（Content）：这是元素的实际内容，如文本、图片等。

2. 内边距（Padding）：内容周围的空白区域，内边距是透明的。

3. 边框（Border）：围绕在内边距和内容外的边界，边框是可见的。

4. 外边距（Margin）：边框外部的空白区域，用于分隔元素与其他元素，外边距是透明的。

盒模型的总宽度和总高度计算方式如下：

总宽度 = 左边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右边距
总高度 = 上边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下边距

需要注意的是，CSS有两种盒模型：标准模型和IE模型（又称怪异模型）。两者的主要区别在于宽度和高度的计算方式不同。在标准模型中，width和height指的是内容的宽度和高度；而在IE模型中，width和height包含了内容、内边距和边框的宽度和高度。可以通过box-sizing属性来指定使用哪种盒模型，如box-sizing: content-box表示使用标准模型，box-sizing: border-box表示使用IE模型。

2.请列举哪些CSS属性可以使元素脱离文档流

1. 使用float属性：当元素被设置为float（如float: left或float: right）时，它会脱离文档流，并向左或向右浮动。其他文档流中的元素会围绕它流动。需要注意的是，浮动元素之后通常需要清除浮动，以防止布局混乱。

2. 使用position属性：当元素的position属性被设置为absolute或fixed时，元素会脱离文档流。绝对定位元素的位置相对于最近的已定位祖先元素（如果没有则相对于初始包含块），固定定位元素的位置相对于视口。

3. 使用display属性：当元素的display属性被设置为flex或grid时，其子元素会脱离文档流，而按照弹性布局或网格布局进行排列。

示例代码：

/* 使用float属性 */