网站首页 > 技术文章正文

CSS盒模型详解

hmc789 2024-11-24 16:43:39 技术文章 1 ℃

CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在面试中会被问到，属于经典问题了。

在盒模型中，包含元素的内容区域 (Content Area) 和边框区域 (Border Area) 是两个重要的概念。

1.内容区域 (Content Area):内容区域是指元素内部的内容所占据的区域，包括文本、图像、链接等。

2.边框区域 (Border Area):边框区域是指元素周围的边框所占据的区域，边框的粗细、颜色、样式等都会影响到边框区域的大小和样式。

3.外边距 (Margin):外边距是指元素与其周围元素之间的空白区域，它可以用来控制元素与其他元素之间的间距和布局。

4.内边距 (Padding):内边距是指元素内容区域与边框之间的空白区域，它可以用来控制元素的内容与边框之间的空白区域大小。

通过设置元素的宽度、高度、边框、内边距和外边距等属性，可以控制元素在屏幕上的显示效果。同时，盒模型也是 CSS 布局算法的基础，这些算法可以根据元素的盒模型属性来计算出元素在屏幕上的布局结果。

什么是盒子模型？

展示在页面上的每一个元素都可以视为一个盒模型，且本质上都是一个矩形盒子，盒模型总共分为两种，分别为：W3C标准盒模型、IE盒模型。

之所以分为两类，是因为二者在性质上有些不同，具体来说是在计算宽高时的差异。

? 页面中的矩形盒子宽高可以通过width、heitht属性进行配置，但这只是设置了content内容部分的宽高，除此之外，盒子宽高还受padding、border两个属性的影响。

? W3C标准盒模型、IE盒模型两种盒子类型，也就是因为对padding、border两个属性处理的形式不同，从而划分为两类的。

box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。

box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。

W3C标准盒模型

W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。

实际也就是 content+padding+border，因为我们通过css设置width/height属性就是用来定义盒子内容宽高的。

实际操作：

<style>
  article {
    width: 100%;
    background-color: #16a085;
  }
  .box {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid black;
    margin: 5px;
    
    background-color: #f39c12;
    color: white;
  }
</style>

<body>
  <article>
    <div class="box W3CBox">
      <span>W3CBox</span>
    </div>
  </article>
</body>

我们通过控制台工具，看看盒子宽高到底是不是上文讲的那样： content+padding+border

现在来分析一下：

content：content= width/height = 100 * 100 (px)
padding：在content的基础上设置padding为10px 此时盒子宽度 width+paddingLeft/Right =100 + 20 (px) 此时盒子高度 width+paddingTop/Bottom =100 + 20 (px)
border：在上面的基础上又对盒子宽高产生了影响此时盒子宽度 width+paddingLeft/Right + borderLeft/Right =100 + 20 + 20(px) 此时盒子高度 width+paddingTop/Bottom + borderTop/Bottom =100 + 20 + 20(px)

整体计算下来，盒子宽高为 140 *140 (px)，完全符合上述结论。

值得注意的是：网上好多博客文章都将margin算入了盒子的宽高，虽然在视觉上，盒子最外层的确有了间隙，但这只是影响了布局，并没有影响盒子本身的尺寸，若盒子尺寸包含了margin，那最后得到的盒子尺寸应为 150 * 150 (px)，但事实并不是这样。

IE盒模型

IE盒模型在计算盒子宽高时，只包含width/height即内容content部分。但值得注意的是，这content包含了padding、border两个属性。

也即是说，盒子最终的宽高，就是我们设置的width/height,若我们又设置了padding、border两个属性，则这两个属性不会对宽高造成影响，而是包含在了设置的width/height中。

实际操作：

.IEBox { box-sizing: border-box; }

<div class="box IEBox"> <span>IEBox</span> </div>

通过结果来看，完全符合上述结论，盒子的尺寸只包含content部分，也就是我们定义的 width/height属性。之后定义的padding、border都会被包含到content中。

box-sizing

上面两个例子已经让我们清晰的发现两种盒模型的差异，那我们怎么切换两种盒子模型呢，其实上文已经使用过了，也就是box-sizing属性。

语法

box-sizing: content-box|border-box|inherit;

content-box默认值，设置为W3C标准盒模型
border-box设置为IE盒模型
inherit继承父级盒子类型

总结

W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。

IE盒模型在计算盒子宽高时，只包含width/height即内容content部分，且content包含了padding、border。

margin 并不会影响盒子的尺寸，该属性影响的是布局。

可通过box-sizing改变盒子类型。

上一篇：纯 CSS 实现一个可调节亮度的吊灯【附源码】
下一篇：值得收藏的CSS小技巧

网站首页 > 技术文章 正文