突破边界：HTML5&CSS3 盒模型的艺术与科学

[TOC] 盒模型补充

1. 盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

• content-box：盒子尺寸只包括内容区，不包括内边距和边框。
• border-box：盒子尺寸包括内容区、内边距和边框。

默认值：

• content-box

示例：

<div style="width: 100px; height: 100px; padding: 10px; border: 1px solid black;">
  内容
</div>

如果 box-sizing 设置为 content-box，那么该元素的实际宽度和高度分别为 100px 和 100px。如果 box-sizing 设置为 border-box，那么该元素的实际宽度和高度分别为 120px 和 120px。

2. 内边距

内边距是盒子内容区和边框之间的空间

可以使用 padding 属性来设置内边距

padding 属性可以设置一个值或四个值

一个值：

<div style="padding: 10px;">
  内容
</div>

四个值：

<div style="padding: 10px 20px 30px 40px;">
  内容
</div>

第一个值：上内边距

第二个值：右内边距

第三个值：下内边距

第四个值：左内边距

示例：

<div style="padding: 10px 20px 30px 40px;">
  内容
</div>

该元素的内边距分别为 10px、20px、30px 和 40px。

3. 边框

边框是盒子在页面中可见的边界

可以使用 border 属性来设置边框

border 属性可以设置一个值或三个值

一个值：

<div style="border: 1px solid black;">
  内容
</div>

三个值：

<div style="border: 1px solid black 2px solid red 3px solid green;">
  内容
</div>

第一个值：边框宽度

第二个值：边框样式

第三个值：边框颜色

示例：

<div style="border: 1px solid black 2px solid red 3px solid green;">
  内容
</div>

该元素的边框宽度分别为 1px、2px 和 3px，边框样式分别为 solid、solid 和 solid，边框颜色分别为 black、red 和 green。

4. 圆角

圆角是指盒子边框的圆角半径

可以使用 border-radius 属性来设置圆角

border-radius 属性可以设置一个值或四个值

一个值：

<div style="border-radius: 10px;">
  内容
</div>

四个值：

<div style="border-radius: 10px 20px 30px 40px;">
  内容
</div>

第一个值：左上角圆角半径

第二个值：右上角圆角半径

第三个值：右下角圆角半径

第四个值：左下角圆角半径

示例：

<div style="border-radius: 10px 20px 30px 40px;">
  内容
</div>

该元素的圆角半径分别为 10px、20px、30px 和 40px。

5. 盒子阴影

盒子阴影是指盒子在页面中可见的阴影

可以使用 box-shadow 属性来设置盒子阴影

box-shadow 属性可以设置一个值或多个值

一个值：

<div style="box-shadow: 10px 10px 5px 0px black;">
  内容
</div>

多个值：

<div style="box-shadow: 10px 10px 5px 0px black, 20px 20px 10px 0px red;">
  内容
</div>

第一个值：水平偏移

第二个值：垂直偏移

第三个值：模糊半径

第四个值：阴影颜色

第五个值：阴影扩展

示例：

<div style="box-shadow: 10px 10px 5px 0px black, 20px 20px 10px 0px red;">
  内容
</div>

该元素的阴影水平偏移为 10px，垂直偏移为 10px，模糊半径为 5px，阴影颜色为 black，阴影扩展为 0px。第二个阴影的水平偏移为 20px，垂直偏移为 20px，模糊半径为 10px，阴影颜色为 red，阴影扩展为 0px。

6. 转换

转换是指盒子在页面中的位置、大小和旋转角度

可以使用 transform 属性来设置转换

transform 属性可以设置一个值或多个值

一个值：

<div style="transform: translate(10px, 10px);">
  内容
</div>

多个值：

<div style="transform: translate(10px, 10px) scale(2) rotate(30deg);">
  内容
</div>

第一个值：水平位移

第二个值：垂直位移

第三个值：缩放比例

第四个值：旋转角度

示例：

<div style="transform: translate(10px, 10px) scale(2) rotate(30deg);">
  内容
</div>

该元素的水平位移为 10px，垂直位移为 10px，缩放比例为 2，旋转角度为 30deg。