CSS盒模型

古城微笑少年丶 2022-05-27 08:46 309阅读 0赞

**1）盒模型结构**

![70][]

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

内容（CONTENT）：盒子里装的东西；  
填充(PADDING)     ：怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)       ：盒子本身；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

下述即为盒模型的平面图：

![70 1][]

**2）盒模型属性介绍**

1、margin: 包括margin-top、margin-right、margin-bottom、margin-left，控制块级元素之间的距离，它们是透明不可见的。根据上、 右、下、左的顺时针规则，可以写为 margin: 40px 40px 40px 40px;  
为便于记忆，请参考下图:

![191936129093657.jpg][]

2、Padding: 包括padding-top、padding-right、padding-bottom、padding-left，控制块级元素内部，content与border之间的距离，其代码，简写请参考margin属性的写法。

备注：约定的写法中有简写规则，样例如下。  
body \{ padding: 36px;\} //对象四边的补丁边距均为36px   
body \{ padding: 36px 24px; \} //上下两边的补丁边距为36px，左右两边的补丁边距为24px   
body \{ padding: 36px 24px 18px; \} //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px [点击打开链接][Link 1]  
body \{ padding: 36px 24px 18px 12px; \} //上、右、下、左补丁边距分别为36px、24px、18px、12px

参考资料：

[https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top][Link 1]       //盒模型基础属性

[http://www.w3school.com.cn/css3/index.asp  ][http_www.w3school.com.cn_css3_index.asp]         //css3的盒模型特性

[70]: /images/20220527/bd2b0e1771234c0d91b0232d8844ffd3.png
[70 1]: /images/20220527/20bb0752941c44b093aaaec7bb66f696.png
[191936129093657.jpg]: /images/20220527/7974f1f1cb624890a15da4f9f602d77b.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top
[http_www.w3school.com.cn_css3_index.asp]: http://www.w3school.com.cn/css3/index.asp