盒子模型小记

414天前 · 代码 · 327次阅读

众所周知,CSS将每一个元素视作一个盒子,以便更好地划分彼此的区域,如下图所示。

每个盒子又由以下几部分组成:

  1. 外边距margin
  2. 边框border
  3. 内边距padding
  4. 内容区content

两种盒模型

在不同宽度的计算方法下,诞生了两种不同的盒模型——标准盒模型与替代盒模型。

标准盒模型

在标准盒模型下,我们通过CSS设定盒子的width属性实际上是设置盒子内容区的宽度,并非实际宽度。标准盒模型的实际宽度由内容区宽度+内边距+边框组成,高度也是如此。

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
/*此时实际宽度为350px + 25px + 25px + 5px + 5px = 410px*/
/*             内容区  左右内边距     左右边框          */

替代盒模型

在替代模型下,我们通过CSS设定的width直接是盒子的实际宽度,而此时内容区的宽度则为实际宽度 - 内边距 - 边框,高度也是如此。

.box {
  box-sizing: border-box; /*通过这个来改变盒模型*/
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
/*此时内容区的宽度为350px - 25px - 25px - 5px - 5px = 290px*/

外边距

刚刚两个盒模型和外边距都没啥关系,因为外边距并不作为盒子的实际宽度组成部分之一作为考察。但他也是一个相当重要的属性,控制着两个元素间的距离。

例如在这里,我们为.box设置的margin不仅将第一个box与边框分开,同时也使其与第二个box分隔。这个时候我们可以注意到其实两个box之间除了第一个box的右边距还有第二个box的左边距,也就是说此时两者的水平间距是由两者的外边距之和决定的。

然而到了垂直方向下,又是另一种情况了。

此时的两者的垂直间距又变成了只由第二个box的外边距组成。真的吗?再来看看第一个box。

噢,原来不是,只是两者的外边距重叠了。这是CSS中的叠加外边距的特性。这个特性决定了,在正常文档流中,两个盒子的垂直外边距等于两者外边距较长的那一个的值。例如

.box {
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #ddd;
}

.box2 {
    margin-top: 100px;
}

这个时候两个box的垂直距离就成了box2的100px,不是20px也不是20px+100px。

相关链接

CSS盒子模型查漏补缺笔记

盒模型 - 学习 Web 开发 | MDN (mozilla.org)

css权威指南.pdf

👍 2

css 盒子模型

最后修改于413天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡
  • 贴吧泡泡

狗头

  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头
  • 狗头

原神

  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神
  • 原神

小黄脸

  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸
  • 小黄脸

目录

avatar

季悠然

寻找有趣的灵魂

135

文章数

2020

评论数

3

分类

好热啊

arknights!

猛兽是单独的,牛羊则结队。

鲁迅

1092