华为OD面试真题题库
专栏:华为OD面试真题题库
目录: 最新华为OD面试手撕代码真题目录以及八股文真题目录
1. 请详细解释一下CSS中的盒模型概念
CSS盒模型(Box Model)是CSS布局的基础,它描述了元素在网页布局中所占的空间方式。每个HTML元素可以看作是一个盒子,由四个部分组成:内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)。
-
内容(Content):这是元素的实际内容,如文本、图片等。
-
内边距(Padding):内容周围的空白区域,内边距是透明的。
-
边框(Border):围绕在内边距和内容外的边界,边框是可见的。
-
外边距(Margin):边框外部的空白区域,用于分隔元素与其他元素,外边距是透明的。
盒模型的总宽度和总高度计算方式如下:
总宽度 = 左边距 + 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框 + 右边距
总高度 = 上边距 + 上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框 + 下边距
需要注意的是,CSS有两种盒模型:标准模型和IE模型(又称怪异模型)。两者的主要区别在于宽度和高度的计算方式不同。在标准模型中,width和height指的是内容的宽度和高度;而在IE模型中,width和height包含了内容、内边距和边框的宽度和高度。可以通过box-sizing属性来指定使用哪种盒模型,如box-sizing: content-box表示使用标准模型,box-sizing: border-box表示使用IE模型。
2.请列举哪些CSS属性可以使元素脱离文档流
-
使用float属性:当元素被设置为float(如float: left或float: right)时,它会脱离文档流,并向左或向右浮动。其他文档流中的元素会围绕它流动。需要注意的是,浮动元素之后通常需要清除浮动,以防止布局混乱。
-
使用position属性:当元素的position属性被设置为absolute或fixed时,元素会脱离文档流。绝对定位元素的位置相对于最近的已定位祖先元素(如果没有则相对于初始包含块),固定定位元素的位置相对于视口。
-
使用display属性:当元素的display属性被设置为flex或grid时,其子元素会脱离文档流,而按照弹性布局或网格布局进行排列。
示例代码:
/* 使用float属性 */