CodeGym/课程/Frontend SELF ZH/内容和边框模型

内容和边框模型

可用

4.1 box-sizing属性

CSS的box-sizing属性是一个强大的工具,用于管理元素的尺寸计算模型。 它定义了如何计算元素尺寸,包括宽度和高度,以及内边距、边框和外边距。下面我们将详细讨论box-sizing的工作原理,它的使用如何影响网页布局。

主要的box-sizing模型

Content-box (内容模型)

content-box是所有元素的默认值。在该模型中,元素的大小(widthheight)只定义内容的大小,不包括内边距和边框。这意味着内边距和边框被加到元素的总宽度和高度中。

Border-box (边框模型)

border-box值改变了尺寸计算模型,元素的大小(widthheight)包括内边距和边框。这意味着内边距和边框属于元素的总宽度和高度,使得尺寸计算和管理更加简单。

box-sizing使用示例:

CSS
.box {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border: 5px solid #2c3e50;
  margin: 10px;
  width: 200px;
  height: 100px;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
HTML
<div class="box content-box">Content-box: 宽度和高度仅包括内容。</div>
<div class="box border-box">Border-box: 宽度和高度包括内边距和边框。</div>

代码说明:

  • .box: 所有盒子的基本样式,包括内边距、边框和大小
  • .content-box: 使用box-sizing: content-box的元素,宽度和高度只包括内容
  • .border-box: 使用box-sizing: border-box的元素,宽度和高度包括内边距和边框

4.2 box-sizing对布局的影响

内容模型 (Content-box)

当使用box-sizing: content-box;时,内边距和边框被加到元素的总宽度和高度中。 这可能导致在计算尺寸和定位元素时需要额外的考虑。

使用示例

在这种情况下,元素的总宽度是200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, 总高度是100px + 20px (padding) * 2 + 5px (border) * 2 = 150px。

CSS
.content-box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box content-box">Content-box: 宽度和高度仅包括内容。</div>

边框模型 (Border-box)

当使用box-sizing: border-box;时,内边距和边框包括在元素指定的宽度和高度中。 这简化了尺寸计算和管理,尤其是在创建响应式布局时。

使用示例:

CSS
.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box border-box">Border-box: 宽度和高度包括内边距和边框。</div>

4.3 创建响应式布局

使用box-sizing: border-box;可以简化创建响应式布局的过程,因为元素的尺寸包括内边距和边框,防止意外的溢出。

使用示例:

CSS
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #f4f4f4;
}

.item {
  flex: 1 1 calc(33.333% - 20px);
  padding: 20px;
  border: 5px solid #3498db;
  background-color: #fff;
}
HTML
<div class="container">
  <div class="item">元素 1</div>
  <div class="item">元素 2</div>
  <div class="item">元素 3</div>
  <div class="item">元素 4</div>
  <div class="item">元素 5</div>
  <div class="item">元素 6</div>
</div>

代码说明:

  • * { box-sizing: border-box; }: 将边框模型应用到页面上的所有元素,简化尺寸管理
  • .container: 带有响应式布局的Flex容器
  • .item: Flex元素,等比例分配宽度并将内边距和边框包括在总宽度中

4.4 固定尺寸和内边距

使用box-sizing: border-box;可以轻松为具有内边距的元素设置固定尺寸,而不用担心溢出问题。

使用示例:

CSS
.fixed-size {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #2ecc71;
  background-color: #ecf0f1;
  text-align: center;
  line-height: 150px; /* 垂直居中对齐文本 */
}
HTML
<div class="fixed-size">
  固定尺寸
</div>

代码说明:

  • .fixed-size: 元素的固定尺寸为300x150像素,包括内边距和边框,这使得尺寸控制更加精确
1
任务
Frontend SELF ZH,  第 16 级课程 4
已锁定
盒子模型
盒子模型
1
任务
Frontend SELF ZH,  第 16 级课程 4
已锁定
固定尺寸
固定尺寸
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论