前端开发面试题—CSS盒子模型

📚文章目录

📦CSS盒子模型

📦盒子模型(Box Model)图解如下

---

今天分享一下我遇到的一个面试题，是关于CSS盒子模式的问题，简单列举说明一下CSS盒子模型的组成有哪些？

📦CSS盒子模型

盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。所有HTML元素可以看作是一个盒子（特别是块级元素），在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容(content)、内边距，也可以叫填充(padding)、边框(border)、外边距(margin)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin(外边距) - 盒子与其他盒子之间的距离。
• Border(边框) - 围绕在padding和content外的边框。
• Padding(内边距、填充) - content和border之间的距离。
• Content(内容) - 盒子的内容，显示文本和图像等元素。

📦盒子模型(Box Model)图解如下

• 关于这两种盒子区别就在于它们的width和height的组成，IE盒子模型的width和height部分还包含了border和padding。为了解决兼容性的问题，可以在HTML页面声明 即可。
• 由图可知，关于盒子的实际高度和实际宽度计算方式如下

1. 总元素的宽度=宽度（width）+左填充（padding-left）+右填充（padding-right）+左边框（border-left）+右边框（border-right）+左边距（margin-left）+右边距（margin-right）
2. 总元素的高度=高度（height）+顶部填充（padding-top）+底部填充（padding-bottom）+上边框（border-top）+下边框（border-bottom）+上边距（margin-top）+下边距（margin-bottom）