盒模型_盒模型box--优快云博客

本文链接：https://blog.youkuaiyun.com/chonger_feifei/article/details/123366435

本文介绍了HTML盒模型的概念，包括width、height、padding、border和margin，并详细阐述了margin的特性和塌陷规则。同时，讲解了如何利用margin实现元素的水平和垂直居中，以及如何清除默认的margin和padding。此外，还对比了W3C标准盒模型与IE传统盒模型的区别，并给出了使用示例。最后提到了在移动网页布局中，box-sizing属性的使用和兼容性考虑。

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

认识盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型"

margin

margin特性之塌陷

出现在竖直方向，小margin塌陷到大margin中，即margin不叠加以大值为准
在这里插入图片描述

margin应用之盒子居中

谁要居中	水平	竖直
文本	text-align:center;	line-height=盒子高height
盒子	margin:0 auto;	（如下代码）

父亲{
position:relative;
}
元素{
position: absolute;
top: 50%;
margin-top: -自己高度一半;
}

默认值清除（margin/padding）

一些元素（比如body、ul、p等）有默认的margin
在开始制作网页的时候，要清除

  /* 通配符选择器表示选择所有元素 */
  * {
      margin: 0;
      padding: 0;
  }
  /* 通配符有效率问题，应使用并集选择器 */
  body,
  ul,
  p {
      margin: 0;
      padding: 0;
  }

盒模型

W3C标准模型box-sizing: content-box;

在这里插入图片描述

元素实际大小（内盒）

内盒=width

元素空间尺寸（外盒）

外盒=内盒+padding+border+margin

IE传统/怪异模型box-sizing: border-box;

元素实际大小（内盒）

内盒=width+padding+border

元素空间尺寸（外盒）

外盒=内盒+margin

.box {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid #000;
    padding: 10px;
       }

多用于移动网页，结合百分比布局、弹性布局等，PC页面使用较少
兼容到IE9