盒模型

字数: 0 字 时长: 0 分钟

简介

众所周知，CSS 盒模型是网页布局的基础，它定义了元素的内容、内边距、边框和外边距。CSS3 对盒模型进行了改进，引入了新的属性和特性，使得盒模型的计算更加灵活和高效。

box-sizing 属性

box-sizing 属性用于设置元素的盒模型类型，它有两种取值：

• content-box：默认值，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。
• border-box：元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

现在让我们来试验一下，下方有两个盒子，box-sizing 分别设置为 content-box、border-box。

1. content-box

2. border-box

• 然后设置以下的样式，看看会发生什么

box1

.box1 {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  border: 10px solid #DD5292;
  /* 默认为 content-box */
  box-sizing: content-box;
}

box2

.box2 {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  border: 10px solid #DD5292;
  /* 设置为 border-box */
  box-sizing: border-box;
}

• 使用浏览器开发者工具可以看到如下两个图的渲染结果。

• 会发现，当 box-sizing 设置为 content-box 时，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。因此，元素的实际宽度和高度会比设置的宽度和高度大，这样就不利于开发者根据设计图或者原型图进行布局。
• 当 box-sizing 设置为 border-box 时，元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。因此，元素的实际宽度和高度与设置的宽度和高度相同，这样我们便可以根据设计图或者原型图进行布局，而不需要担心内边距和边框的影响。

最后更新于: 2024/11/7 16:03:20