CSS盒模型

不念不忘少年蓝@ 2023-01-01 02:58 200阅读 0赞

#### 盒子模型： ####

盒子模型,又称框模型 (Box Model)  
![4c87c5ede4c2210fcc827a0d7de07e1e.png][]

盒子模型主要的属性：width、height、padding、border、margin；

*  width：内容的宽度
 *  height：内容的高度（不是盒子的宽度、高度）
 *  padding：内边距
 *  border：边框
 *  margin：外边距

例：

#### 标准盒模型与IE盒模型: ####

**标准盒模型**：  
![1e89cb8358ca437314b2c791179856db.png][]

【标准盒子模型的范围包括margin，border，padding，content，并且content部分不包含其他部分；】

**IE盒模型**：  
![5b7a85684f770ed5f62e9fa75e596d86.png][]  
【IE盒子模型的范围包括margin，border，padding，content，和标准盒子模型不同的是：IE盒子模型的 content 部分包含 border 和 pading；】

**标准盒子模和IE盒模型的区别：**

*  标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
 *  IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

#### 盒子模型面试题 ####

1，css盒模型基本概念？  
2，标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？  
3，css如何设置这两种模型？  
4，js如何设置获取盒模型对应的宽和高？  
5，实例题（根据盒模型解释边距重叠）  
![60edf1e088208927b930ff9605084835.png][]  
![436e6770c502a052f9573f9265b4b416.png][]

> 结语：想要学习web前端或者正在学习前端的朋友，可以加入这边的学习裙：953352883，一起学习交流，裙里有小白也有大佬，还有前端学习资料，前端面试题PDF文档，都能在群里领取，免费分享哦！

[4c87c5ede4c2210fcc827a0d7de07e1e.png]: /images/20221120/4651bdeec3c54a18b7adb562f4eda9a3.png
[1e89cb8358ca437314b2c791179856db.png]: /images/20221120/d18e60ae89c74aeba127f1eaf280ac64.png
[5b7a85684f770ed5f62e9fa75e596d86.png]: /images/20221120/364efe9384d2461884f6445db8c230f6.png
[60edf1e088208927b930ff9605084835.png]: /images/20221120/5aad189a622d413eb18cca02c256956f.png
[436e6770c502a052f9573f9265b4b416.png]: https://img-blog.csdnimg.cn/img_convert/436e6770c502a052f9573f9265b4b416.png