跳至主要內容

盒模型

wzCoding大约 6 分钟CSS盒模型

盒模型

在页面当中，所有的元素都被一个个的“盒子”包围着，这些盒子本质上便是 盒模型，它是我们使用 CSS 实现准确布局、处理元素排列的关键

盒模型分类

在开发页面时，我们经常会用到两种“盒子”：

  1. 块级盒子（block box）
  2. 内联盒子（inline box）

这两种盒模型在页面上的行为表现是不相同的

块级盒子

如果一个元素被设置成 块级盒子，那么就会有以下的行为：

  • 每个盒子都会换行
  • 可以设置该元素的 width 与 height 属性
  • 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围推开
  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下盒子会和父容器一样宽
代码示例
<div class='parent'>
   <div class='child'>example1</div>
   <div class='child'>example2</div>
</div>

div.parent{
    width:100%;
    height:100px;
    border:1px solid orange;
    padding:10px 0;
}
div .child{
    display:block;
    background:green;
    margin:10px;
    border:2px dashed black;
    padding:5px;
}

内联盒子

如果一个元素被设置成 内联盒子，那么就会有以下的行为：

  • 盒子不会产生换行
  • 设置该元素的 width 与 height 属性将不生效
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开
代码示例
<div class='parent'>
   <div class='child'>example1</div>
   <div class='child'>example2</div>
</div>

div.parent{
    width:100%;
    height:50px;
    border:1px solid orange;
    padding:10px 0;
}
div .child{
    display:inline;
    background:orange;
    width:200px;
    margin:10px;
    border:2px dashed black;
    padding:5px;
}
ℹ️提示

可以通过设置元素的 display 属性来来控制盒子是 块级 还是 内联 的

盒模型组成

代码示例
<div class='margin-box'>
   <div class='border-box'>
       <div class='padding-box'>
          <div class='content-box'>Content</div>
       </div>
   </div>
</div>

.margin-box{
    display:flex;
    width:200px;
    padding:30px;
    background:orange;
    position:relative;
}
.border-box{
    display:flex;
    width:100%;
    padding:30px;
    background:black;
    position:relative;
}
.padding-box{
    display:flex;
    width:100%;
    padding:30px;
    background:green;
    position:relative;
}
.content-box{
    width:100%;
    background:white;
}
.margin-box::after{
    content:'Margin';
    position:absolute;
    top:5px;
    left:5px;
}
.border-box::after{
    content:'Border';
    position:absolute;
    top:5px;
    left:5px;
    color:white;
}
.padding-box::after{
    content:'Padding';
    position:absolute;
    top:5px;
    left:5px;
}

在页面当中，一个完整的盒模型应当是一个块级盒子（内联盒子相当于应用了部分块级盒子的特性），盒模型定义了盒子的每个部分：

  1. Content：内容区域，大小可以通过 width 和 height 来设定
  2. Padding：内边距，包围在内容区域外部的空白区域；大小可以通过 padding 相关属性设置
  3. Border：边框，包围在内容区域和内边距外部；大小可以通过 border 相关属性设置
  4. Margin：外边距，盒子最外面的区域，也是与其他盒子（元素）之间的空白区域，大小可以通过 margin 相关属性设置

标准盒模型

content-box
标准盒模型

标准盒模型，也可以叫 W3C盒模型，在标准盒模型中，给盒子设置宽高实际上设置的是内容区域的 width 与 height，它们跟 padding、border、margin一起决定了盒子的大小，标准盒模型大小的计算方法如下：

计算项目值
内容区域的宽实际设置的宽度
内容区域的高实际设置的高度
整体盒子的宽内容区域的宽 + 内边距 *2 + 边框 *2
整体盒子的高内容区域的高 + 内边距 *2 + 边框 *2

怪异盒模型

border-box
怪异盒模型

怪异盒模型，也可以叫 IE盒模型 或者 替代盒模型，在怪异盒模型中，盒子的宽高包括了内边距和边框，这使得盒子的宽高都是直观可见的，而内容区域的宽高则要相应的去掉内边距与边框，怪异盒模型大小的计算方法如下：

计算项目值
内容区域的宽实际设置的宽度 - 内边距 *2 - 边框 *2
内容区域的高实际设置的高度 - 内边距 *2 - 边框 *2
整体盒子的宽实际设置的宽度 + 外边距 *2
整体盒子的高实际设置的高度 + 外边距 *2
ℹ️提示

可以通过设置元素的 box-sizing 属性来控制盒子是标准盒模型还是怪异盒模型

盒模型应用

在开发页面布局时，盒模型几乎无处不在，我们会将盒模型应用到各种布局当中，然而，在使用盒模型来实现布局的过程中，我们也会遇到一些意料之外的问题，例如：

  • 浮动带来的副作用
  • 外边距合并

BFC

BFC（Block Formatting Context）块级格式化上下文，便是在应用盒模型布局时产生的区域（也是浮动元素与其他元素交互的区域），它可以帮助我们很好地避免上述的问题

创建 BFC 的方式如下：

  • 根元素：<html>
  • 浮动元素：float 值不为 none
  • 绝对定位元素：position 值为 absolute 或 fixed
  • overflow 值不为 visible、clip 的块元素
  • contain 值为 layout、content 或 paint 的元素
  • 多列容器：column-count 或 column-width 值不为 auto，包括 column-count 为 1
  • column-span 值为 all 的元素
  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素）
  • 设置元素的 display 属性为以下的值：
    • inline-block
    • table
    • table-caption
    • table-row
    • table-cell
    • table-header-group
    • table-footer-group
    • table-row-group
    • table-row
    • inline-table
    • flow-root

BFC 影响布局，它相当于一个隔离的容器，内部的子元素不会影响到外部元素，我们可以利用这个特性在布局时避免一些问题，比如消除浮动对周围其他元素的副作用，解决外边距合并等问题

ℹ️提示

浮动：浮动会使元素脱离正常文档流，使元素紧贴容器左侧或右侧边界并影响它下一个元素，使下一个元素位置改变到原本浮动元素的位置。更多关于浮动的信息请 点击这里

外边距合并：块元素的上或下外边距在某些情况下会发生合并，其大小为单个边距的最大值。更多关于外边距合并的信息请 点击这里

MIT LICENSE | copyright © 2023-present wzCoding