盒子模型

最新推荐文章于 2025-02-07 20:14:20 发布

原创最新推荐文章于 2025-02-07 20:14:20 发布 · 801 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了网页中元素的组织原则——盒子模型，包括其组成部分、如何影响元素布局，以及不同定位方式的应用。通过实例展示了盒子模型如何在实际网页设计中发挥作用，包括margin的‘塌陷’现象及负值margin的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型是使网页中各个元素能合理地进行组织的一套原则和规范。有content（内容）、border（边框）、padding（内边距）、margin（外边距）4个部分组成。一个盒子实际在页面上占据的空间由“内容+内边距+外边距+边框”组成。也不是用<div>定义的网页元素才是盒子，所有的网页元素都可以看做是盒子。

当连个元素是行内元素水平定位margin设置时，它们之间的距离是第一个元素的margin-right加上第二个元素的margin-left，若是垂直排列的块级元素，则margin的距离是两者制作较大的，这种现象称为margin的“塌陷”现象。

当块级元素的定位为嵌套关系（父子关系，即一个元素包含另一个元素）时，margin将以父块的内容为参考。

如下代码：

 
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
   <style type="text/css">
   div.father{
   background-color:#fffebb;
   text-align:center;
   font-family:Arial1, Helvetica, sans-serif;
   font-size:20px;
   padding:10px;
   border:1px solid #000000;
 }
 div.son{
 background-color:#a2d2ff;
 margin-top:30px;
 margin-bottom:0px;
 padding:15px;
 border:1px dashed #004993;
 }
 </style>
 </HEAD>
 <BODY>
<div class="father">
<div class="son">内容距离父div边框为10+30+15+1=56px</div>
</BODY>
</HTML>

运行效果如图：