1. 边界 edge
The perimeter of each of the four areas (content, padding, border, and margin) is called
an "edge", so each box has four edges:
-- copy fromCSS 2.1 Specification P99
杰哥译: 四个区域(content, padding, border 和 margin)的四周被称为边界. 所以每个盒子有四种边界
译者注
四种边界明确的定义了盒子类型, 这里这两种类型需要特别关注
- 内容盒
content-box: 由content edge围成 - 边框盒
border-box: 由border edge围成
在CSS3中提出了box-sizing属性, 可以改变宽高计算的依据
2. 尺寸
The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width'p. 154 or 'height'p. 161 property set, whether the box contains text or other boxes, whether the box is a table, etc.
-- copy fromCSS2.1 Specification P99
杰哥译: 一个盒子内容区的尺寸-内容的宽度和内容的调试-取决于如下情况
- 元素生成的盒子是否设置了宽高属性
- 这个盒子是否包含文本或者其他盒子
- 盒子是否是
table表格类型
译者注
这里说的是否设置了宽高属性, 具体指有没有显式的声明.
宽高是永远有值的(存疑待考). 没有显式设置时由浏览器自动计算, 值为auto
3. 背景覆盖的范围
The background style of the content, padding, and border areas of a box is specified by the 'background'p. 209 property of the generating element. Margin backgrounds are always transparent.
-- copy fromCSS2.1 Specification P100
杰哥译: content, padding, border区域的背景样式由backgroud属性指定. 而margin的背景永远是透明的
