关于盒模型你想知道的一切

最新推荐文章于 2022-09-07 12:08:48 发布

郭临腾

最新推荐文章于 2022-09-07 12:08:48 发布

阅读量107

点赞数

文章标签： css

本文链接：https://blog.csdn.net/jtnykx/article/details/124132276

版权

什么是盒模型

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。

盒模型的组成

CSS中组成一个块级盒子需要:

**Content box:** 这个区域是用来显示内容，大小可以通过设置 width 和 height.
**Padding box**: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
**Border box**: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
**Margin box**: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小
在这里插入图片描述

盒模型的面积如何计算

总元素高度=内容区宽度+左填充+右填充+左边框+右边框

总元素高度=内容区高度+上填充+下填充+上边框+下边框

由于边框会增加盒模型的面积

那么整个盒模型的面积就等于(pl+bl+ml+width+pr+br+mr) *(pb+bb+mb+height+pt+bt+mt)

padding 内边距

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距

赋值方式

顺时针赋值从上开始

border 边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

1.边框宽度

2.边框颜色
border-radius

border-top-left-radius：为元素左上角设置圆角效果；
border-top-right-radius：为元素右上角设置圆角效果；
border-bottom-right-radius：为元素右下角设置圆角效果；
border-bottom-left-radius：为元素左下角设置圆角效果；
border-radius：上面四个属性的简写形式，可以同时为元素的四个角设置圆角效果

margin 外边距

叠压现象

在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。


<style type="text/css">
.box-1 {
  /*底部margin 10px被box-2合并了*/
  margin-bottom: 10px;
  background-color: green;
}

.box-2 {
  margin-top: 20px;
  background-color: gray;
}
</style>


<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>

[点击并拖拽以移动]

塌陷现象

外边距塌陷(margin collapsing)也称为外边距合并，是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距，组合在一起变成单个外边距不。
出现的原因是在常态下，父元素的第一个子集元素为块标签，并且使用了margin 或 margin-top

解决方案有

    1.在父元素使用border

    2.在父元素不使用margin-top在父级使用padding-top

    3.在父级使用overflow：hidden

怪异盒模型

怪异盒模型学习: link
标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

正常盒模型向外扩展，怪异盒模型向内压缩

怪异盒模型: 在这里插入图片描述

box-sizing

去box-sizingbox-sizing属性的三个值：

content-box： 默认值，border和padding不算到width范围内，采用标准模式解析计算，是W3c的标准模型(default)

border-box：border和padding划归到width范围内，采用怪异模式解析计算，是IE的怪异盒模型

padding-box：将padding算入width范围