1. CSS 宽度、高度

CSS 尺寸属性指的就是元素的宽度和高度属性。CSS 中提供了 width、height``、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度

1.1 `width`

通过 width 属性可以设置元素内容区的宽度，属性的可选值如下：

值	描述
auto	`默认值`，浏览器自动计算元素的实际宽度
length	使用具体数值配合 `px`、cm 等单位来定义宽度
`%`	定义`基于父元素宽度`百分比的宽度
`inherit`	从父元素继承 width 属性的值

提示：对于<img>标签来说，若仅指定 width 属性，那么它的 height 属性将根据原图片尺寸进行等比例缩放。

一般情况下 width 属性需要与 height 属性配合使用来同时定义元素的宽度和高度，因为某些元素没有默认的宽度或高度（或者宽度与高度默认为 0px），若不定义宽度或高度而且元素中又没有内容（子元素、文本等）时，这个元素的宽度或高度就会被设置为 0px，从外表看起来就像被压缩成了一条线。

【示例】使用 width 属性设置元素的宽度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        margin-top: 5px;
        margin-bottom: 5px;
      }
      div.box-one {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
      }
      span {
        border: 1px solid red;
        background: #ccc;
      }
      div.box-two {
        border: 1px solid black;
        background: #cff;
        width: 200px;
      }
      img.img-one {
        width: 100px;
      }
      img.img-two {
        width: 160px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <div class="box-one"></div>
    <span></span>
    <div class="box-two">width 属性</div>
    <img src="./css.png" class="img-one" />
    <img src="./css.png" class="img-two" />
  </body>
</html>

运行结果如下图所示：

图：width 属性演示

1.2. `height`

height 属性用来定义元素内容区的高度，属性的可选值如下：

值	描述
auto	`默认值`，浏览器自动计算元素的实际高度
length	使用具体数值配合 `px`、cm 等单位来定义高度
`%`	定义基于父元素高度百分比的高度
`inherit`	从父元素继承 width 属性的值

提示：无论是 width 属性还是 height 属性，它们的值都不能设置为负数。

默认情况下，浏览器会将某些元素的宽度设置为 100%，例如<div>、<p>，而元素的高度则是根据元素中的内容来确定的，所以有些情况下您不必为元素设置固定的宽度或高度。

【示例】使用 width 和 height 属性设置元素的宽度和高度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
        width: 300px;
        height: 100px;
      }
      p {
        border: 1px solid green;
        background: #ccc;
        width: 150px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <p></p>
  </body>
</html>

运行结果如下图所示：

图：height 属性演示

1.3. `max-width` 和 `max-height`

max-width 和 max-height 属性分别用来设置元素内容区的最大宽度和最大高度。当定义了 max-width 和 max-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会小于等于 max-width 和 max-height 属性的值。max-width 和 max-height 属性的可选值如下：

值	描述
none	`默认值`，表示对元素的最大宽度或高度没有限制
length	使用具体数值配合 `px`、cm 等单位来定义元素的最大宽度或高度
`%`	定义基于父元素宽度和高度百分比的最大宽度或高度
`inherit`	从父元素继承 max-width 或 max-height 属性的值

以 max-width 属性为例：（max-height 属性的特性与之相似）

当 max-width 属性的值小于 width 属性时，width 属性的值会被重新定义为与 max-width 属性相同的值；
当 max-width 属性的值大于 width 时，max-width 属性将会被忽略；
当 max-width 属性的值小于 min-width 时，max-width 属性将会被忽略。

【示例】使用 max-width 和 max-height 属性设置元素的最大宽度和高度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
        max-width: 280px;
        max-height: 200px;
        width: 300px;
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div>
      max-width: 280px;<br />
      max-height: 200px;<br />
      width: 300px;<br />
      height: 180px;
    </div>
  </body>
</html>

运行结果如下图所示：

图：max-width 和 max-height 属性演示

1.4. `min-width` 和 `min-height`

min-width 和 min-height 属性用来设置元素内容区的最小宽度和最小高度，当定义了 min-width 和 min-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会大于等于 min-width 和 min-height 属性的值。min-width 和 min-height 属性的可选值如下：

值	描述
length	使用具体数值配合 `px`、cm 等单位来定义元素的最小宽度或高度，默认值取决于浏览器
`%`	定义基于父元素宽度和高度百分比的最小宽度或高度
inherit	从父元素继承 min-width 和 min-height 属性的值

以 min-width 属性为例：（min-height 属性的特性与之相似）

当 min-width 属性的值小于 width 时，min-width 属性将会被忽略；
当 min-width 属性的值大于 width 时，min-width 属性的值将被重新定义为与 min-width 属性相同的值；
当 min-width 属性的值大于 max-width 时，max-width 属性将会被忽略。

【示例】使用 min-width 和 min-height 属性设置元素的最小宽度和高度：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
        min-width: 280px;
        min-height: 200px;
        width: 300px;
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div>
      min-width: 280px;<br />
      min-height: 200px;<br />
      width: 300px;<br />
      height: 180px;
    </div>
  </body>
</html>

运行结果如下图所示：

图：min-width 和 min-height 属性演示

2. 外边距（margin）

元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，外边距区域不受 background 属性的影响，始终是透明的。

2.1 为元素设置外边距

默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML 元素设置默认的外边距，例如<p>元素。可以使用下面的属性来为 HTML 元素设置外边距：

margin-top：设置元素上方的外边距；
margin-bottom：设置元素下方的外边距；
margin-right：设置元素右侧的外边距；
margin-left：设置元素左侧的外边距；
margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

上述外边距属性的可选值如下表所示：

值	描述
auto	由浏览器计算外边距的尺寸
length	使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸，可以为负值，默认值为 0px
%	定义基于父元素的宽度百分比的外边距，可以为负值
inherit	从父元素继承外边距属性的值

【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.box-one {
        border: 1px solid red;
        display: inline-block; /*将元素转换为行内元素*/
      }
      div.box-two {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
        width: 200px;
        height: 80px;
        margin-top: 10px;
        margin-right: 1em;
        margin-left: 1cm;
      }
      div.box-three {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid #ccc;
        background: #ccc;
        width: 180px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 1em;
        margin-right: 10px;
        margin-left: 1cm;
      }
    </style>
  </head>
  <body>
    <div class="box-one">
      <div class="box-two">
        margin-top: 10px;<br />
        margin-right: 1em;<br />
        margin-left: 1cm;
      </div>
      <div class="box-three">
        margin-top: 10px;<br />
        margin-bottom: 1em;<br />
        margin-right: 10px;<br />
        margin-left: 1cm;
      </div>
    </div>
  </body>
</html>

运行结果如下图所示：

图：margin-top、margin-bottom、margin-right、margin-left 属性演示

这里需要特别说明一下 margin 属性，与其它几个属性不同，margin 属性可以接受 1~4 个参数（参数之间使用空格分隔）：

如果提供四个参数，那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距；
如果提供三个参数，那么第一个参数会作用在元素上方的外边距，第二个参数会作用在元素左右两侧的外边距，第三个参数则作用在元素下方的外边距；
如果提供两个参数，那么第一个参数会作用在元素上方和下方的外边距，第二个参数会作用在元素的左右两侧的外边距；
如果只提供一个参数，那么这个值将同时作用于元素上下左右四个方向的外边距。

【示例】使用 margin 属性为元素设置外边距：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.box-one {
        border: 1px solid red;
        display: inline-block; /*将元素转换为行内元素*/
      }
      div.box-two {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid black;
        background: #cff;
        width: 200px;
        height: 100px;
        margin: 10px 1em;
      }
      div.box-three {
        /*为了能更直观的看出效果，这里为元素设置上边框和背景色*/
        border: 1px solid #ccc;
        background: #ccc;
        width: 150px;
        height: 50px;
        margin: 10px 0px 1ex 1em;
      }
    </style>
  </head>
  <body>
    <div class="box-one">
      <div class="box-two">margin: 10px 1em;</div>
      <div class="box-three">margin: 10px 0px 1ex 1em;</div>
    </div>
  </body>
</html>

运行结果如下图所示：

图：margin 属性演示

2.2 外边距折叠

外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。关于外边距折叠有以下几点需要注意：

margin 折叠只发生在块级元素上；
浮动元素的外边距不会与任何外边距发生折叠；
设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
绝对定位元素的外边距不与任何外边距发生折叠；
根元素（例如<body>）的外边距不与其它任何外边距发生折叠。

1) 在相邻的两个兄弟元素之间：

如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为两个外边距中较大的那个；
如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为两个外边距中较小的那个；
如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

相邻兄弟元素之间的外边距折叠

图：相邻兄弟元素之间的外边距折叠

2) 在父元素与其子元素之间：（注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素）

如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个；
如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个；
如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

父元素与其子元素之间的外边距折叠

图：父元素与其子元素之间的外边距折叠

3. 内边距（`padding`）

内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响。您可以通过下面的属性来设置元素内边距的尺寸：

padding-top：设置元素内容区上方的内边距；
padding-right：设置元素内容区右侧的内边距；
padding-bottom：设置元素内容区下方的内边距；
padding-left：设置元素内容区左侧的内边距；
padding：内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距。

上述属性的可选值如下表所示：

值	说明
length	使用具体数值配合 px、cm 等单位来定义元素内边距的尺寸，不能为负值，默认值为 0px
%	定义基于父元素的宽度百分比的内边距，不能为负值
inherit	从父元素继承内边距属性的值

3.1 定义各个方向上的内边距

可以使用 padding-top、padding-bottom、padding-left 和 padding-right 属性来分别设置元素上下左右四个方向上的内边距。

【示例】分别定义元素上下左右四个方向上的内边距：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding-top: 10px;
        padding-bottom: 2em;
        padding-left: 1cm;
        padding-right: 3ex;
        border: 1px solid red;
        background: #cfc;
      }
    </style>
  </head>
  <body>
    <div>
      padding-top: 10px;<br />
      padding-bottom: 2em;<br />
      padding-left: 1cm;<br />
      padding-right: 3ex;
    </div>
  </body>
</html>

运行结果如下图所示：

图：padding-top、padding-bottom、padding-left、padding-right 属性演示

3.2 内边距简写形式

padding 属性是其余四个属性的简写形式，在实际开发中我们使用最多的也是这个简写属性。与 margin 属性相似，paddiing 属性同样可以接受 1~4 个参数（参数之间使用空格分隔）：

如果提供四个参数，那么将按照上、右、下、左的顺序依次设置元素四个方向上的内边距；
如果提供三个参数，那么第一个参数将用来设置元素上方的内边距，第二个参数将用来设置元素左、右两个方向上的内边距，第三个参数将用来设置元素下方的内边距；
如果提供两个参数，那么第一个参数将用来设置元素上、下两个方向上的内边距，第二个参数用来设置元素左、右两个方向上的内边距；
如果只提供一个参数，那么这个参数将同时作用于元素四个方向上的外边距。

【示例】使用 padding 属性为元素设置内边距：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 10px 3ex 2em 1cm;
        border: 1px solid red;
        background: #cfc;
      }
    </style>
  </head>
  <body>
    <div>
      padding: 10px 3ex 2em 1cm;
    </div>
  </body>
</html>

运行结果如下图所示：

图：padding 属性演示

15. CSS宽度、高度、内边距、外边距

1. CSS 宽度、高度

1.1 width

1.2. height

1.3. max-width 和 max-height

1.4. min-width 和 min-height

2. 外边距（margin）

2.1 为元素设置外边距

2.2 外边距折叠

1) 在相邻的两个兄弟元素之间：

2) 在父元素与其子元素之间：（注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素）

3. 内边距（padding）

3.1 定义各个方向上的内边距

3.2 内边距简写形式

1.1 `width`

1.2. `height`

1.3. `max-width` 和 `max-height`

1.4. `min-width` 和 `min-height`

3. 内边距（`padding`）