【挑战翻译W3C标准】--盒模型

杰哥课堂
240 阅读2分钟

1. 什么是盒模型

到底什么是盒模型, 这里引用两段权威的描述

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model
-- copy from CSS2.1 Specification P98

杰哥译: CSS盒模型描述了由元素生成的矩形盒子和根据视觉格式化模型(visual formatting model)定义的布局

哪些元素呢? 在文档树(document tree)里的元素

CSS assumes that every element generates one or more rectangular boxes called element boxes

-- copy from CSS Definitive Guide 3rd P158

杰哥译: CSS假设每个元素会生成一个或多个矩形盒子, 称为元素盒

译者注:

  1. 根据上下文, every element这里指的是HTML元素.
  2. 例如, li元素会生成两个矩形盒, 主盒和附盒(小圆点)
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

图片.png

2. 为什么提出盒模型

CSS除了设置样式(颜色, 字体, 背景)外

另一个最主要的作用是布局

那么, 什么是布局呢? 如何理解布局, 又如何实现布局呢?

布局: 控制元素在页面中显示(摆放)的位置

布局涉及两个方面

  • 大小
  • 位置

为了解决布局问题, CSS提出了盒模型理论

即每个元素都会生成一个或多个矩形盒子

通过控制盒子的大小和位置进而实现布局

3. 盒模型的组成

盒模型的核心是内容区(content area), 然后从内向外依次是

  • padding: 填充
  • border: 边框
  • margin: 外边距

通过下面这图可以直观的了解

-- copy from CSS2.1 Specification P99

Each element box has a content area at its core. The content area is surrounded by optional amounts of padding, borders, and margins. These
items are considered optional because they could all be set to a width of zero
-- copy from CSS Definitive Guide 3rd P158

杰哥译: 每个元素盒的核心都包含一个内容区(content area). 内容区(content area)被一些可选项, 如padding``border``margin包裹. 这些项之所以被认为是可选的, 是因为它们都可以被设置为0

杰哥的理解

这里有必要说一下我个人的理解. 从这两段描述, 我想可以推出一个结论.

每个元素盒(element box)都应该至少包含内容区(content area), 内容区由宽高组成

那么是不是可以理解为宽高必然有值

而宽高具体是多少, 如何计算呢? 这是一个非常大的话题. 我们会单独用一章来讨论

视频讲解: 【杰哥课堂】挑战翻译W3C标准-盒模型

avatar
文章
阅读
粉丝