布局中的盒模型与 display

2024-01-24 13:43:22

布局中的盒模型与 display

在页面布局中, 有一个很重要的概念 盒模型;
同时也有一个很重要的属性display;

利用盒模型我们可以更好地理解页面元素的几何展示.
同时, 通过设置 display 属性进行页面布局;

那么, 下面我们就一起看一下盒模型与 display;

什么是盒模型

布局中的盒模型与 display

在 CSS 中所有的元素都可以看成一个个小盒子. 这些被我们抽象出来的小盒子就是盒模型.

如上图所示, 用红色框标出的内容, 都可以看成一个个盒子.
盒子里面可以套盒子. 一个个盒子组成了页面.

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

常见的盒模型有哪些

在页面中, 有 2 种盒子模型

  • 块级盒子（Block box）
  • 内联盒子（Inline box）

块级盒子（Block box）

  • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
  • 每个盒子都会换行
  • width 和 height 属性可以发挥作用
  • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题(<h1>等)和段落(<p>), 以及工作中常用的<div>, 默认情况下都是块级的盒子。

对于块级盒子, 它的行为是比较符合我们预期的. padding, margin, border , 宽高等几何属性是有作用的.
但是, 内联盒子就不一样了.

内联盒子（Inline box）

  • 盒子不会产生换行。
  • width 和 height 属性将不起作用。
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
  • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em>以及 <strong> 都是默认处于 inline 状态的。

我们举一个例子, 看一下

.t1 {
  width: 3000px;
  height: 1000px;
  margin: 10px;
  padding: 20px;
}

<div>你好, 世界</div>
<div><span class="t1">hello</span><span class="t1">world</span></div>
<div>--------</div>

布局中的盒模型与 display

在页面中, 给 span 指定的 width, height 完全没有效果.
指定的 margin, padding 也是只有水平方向有效果. 垂直方向是无效的.

可以去浏览器的 devTools 看一下

布局中的盒模型与 display

完整的盒模型

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。

盒模型的各个部分

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

标准模型与替代模型

盒模型分为标准模型与替代模型;

默认情况下, 使用得是标准模型

  • 标准模型: 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
  • 替代模型: 宽度都是可见宽度，内容宽度是该宽度减去边框和填充部分; 在想要设置元素的整体宽高, 而不用考虑具体内部的宽高时, 此模型比较方便.

看一下具体的例子:

.box {
  border: 5px solid red;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
  /* 标准模型 */
  box-sizing: content-box;
  /* 替代模型 */
  box-sizing: border-box;
}

<div class="box">hello world</div>

display

不同的标签, 例如 <a>, <div> 都有自己默认的盒模型. 或是 block, 或是 inline.

我们可以通过 display 设置了元素为 block 还是 inline 盒模型.
并且可以设置元素内部的子元素的布局方式. 例如: flex, grid;

display 值

目前 display 支持很多的值.

.d {
  /* legacy values 
    我们经常使用的, 也是最为熟悉的
  */
  display: block;
  display: inline;
  display: inline-block;
  display: flex;
  display: inline-flex;
  display: grid;
  display: inline-grid;
  display: flow-root;

  /* box generation */
  display: none;
  display: contents;

  /* two-value syntax
    2值语法, 前一个是外部显示, 后一个是内部显示; 
    例如: flex 其实是 block flex
  */
  display: block flow;
  display: inline flow;
  display: inline flow-root;
  display: block flex;
  display: inline flex;
  display: block grid;
  display: inline grid;
  display: block flow-root;

  /* other values */
  display: table;
  display: table-row; /* all table elements have an equivalent CSS display value */
  display: list-item;

  /* Global values */
  display: inherit;
  display: initial;
  display: revert;
  display: unset;
}

元素的外部显示与内部显示

在盒模型中, 我们讲到元素可以看成一个个盒子.

盒子与盒子之间如何去排版, 去显示就是元素的外部显示;

盒子之内的元素如何去排版, 去显示就是元素的内部显示;

The outer type sets an element’s participation in flow layout; the inner type sets the layout of children.

外部显示 Outside

display 有 2 个值是有关外部显示的.

其实就是指的正常流 上最常用的 2 个盒模型.

  • block
  • inline

这两个值在页面中的效果, 已经在上文盒模型中有说明. 这里不赘述了.

内部显示 Inside

内部显示的值就相对多一些

  • flow: 元素内部的元素按照正常流的形式进行排版.
    • 如果外部是 inline, 则会参与 block 或者 inline 的 formatting context. 然后生成一个 inline 的盒子.否则, 生成一个 block 的盒子.
    • 根据其它属性, 例如 position, float 等, 可能会创建一个新的block formatting context (BFC)
  • flow-root: 元素生成一个 BFC 的 block 元素.
  • table: 元素的布局和<table>标签一样. 定义了一个 block box.
  • flex: 弹性布局自己的规则
  • grid: grid 布局自己的规则

block formatting context (BFC) 的定义, 可以自行了解一下.

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

inline-block

  • inline-block 生成一个 block 元素 box，它将与周围的内容一起流动，就好像它是一个内联框(行为非常像一个被替换的元素)。

相当于: inline flow-root. 也就是外部显示是 inline , 内部显示是 flow-root;

注意: flow-root 会创建一个新的 BFC.

参考

上一篇：CSS__transform应用于图标时候，没有生效


下一篇：noip模拟59(待补)