布局中的盒模型与 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>