盒模型 在 CSS 中
允许你定义 HTML 元素的大小和行为的 CSS 属性
新！我的 44 页电子书“CSS 在 44 分钟内”已发布！ 😃
#border-bottom-width
像 border-width 一样，但仅适用于底部边框。
默认值 border-bottom-width: 0;
删除底部边框。
border-bottom-width: 4px;
你可以使用像素值。
#border-left-width
像 border-width 一样，但仅适用于左侧边框。
默认值 border-left-width: 0;
删除左侧边框。
border-left-width: 4px;
你可以使用像素值。
#border-right-width
像 border-width 一样，但仅适用于右侧边框。
默认值 border-right-width: 0;
删除右侧边框。
border-right-width: 4px;
你可以使用像素值。
#border-top-width
像 border-width 一样，但仅适用于顶部边框。
默认值 border-top-width: 0;
删除顶部边框。
border-top-width: 4px;
你可以使用像素值。
#border-width
定义元素边框的宽度。
border-width: 1px;
将所有边框的宽度定义为 1px。
border-width: 2px 0;
将顶部和底部边框定义为 2px，左侧和右侧定义为 0。
#box-sizing
定义如何计算元素的宽度和高度：是否包括内边距和边框。
默认值 box-sizing: content-box;
元素的宽度和高度仅适用于元素的内容。
例如，此元素具有
border-width: 12pxpadding: 30pxwidth: 200px
总宽度为 24px + 60px + 200px = 284px。
内容具有定义的宽度。该盒子适应这些尺寸。
box-sizing: border-box;
元素的宽度和高度适用于元素的所有部分：内容、内边距和边框。
例如，此元素具有
border-width: 12pxpadding: 30pxwidth: 200px
总宽度为200px，无论如何。
该盒子具有定义的宽度。内容适应这些尺寸，最终为 200px - 60px - 24px = 116px。
#height
定义元素的高度。
默认值 height: auto;
元素将自动调整其高度以使内容能够正确显示。
height: 100px;
你可以使用数值，如像素、(r)em、百分比等。
如果内容不适合指定的 height，它将溢出。容器如何处理此溢出内容由 overflow 属性定义。
#line-height
定义单行文本的高度。
default line-height: normal;
恢复到浏览器的默认值。
recommended line-height: 1.6;
您可以使用无单位值：行高将相对于字体大小。
line-height: 30px;
你可以使用像素值。
line-height: 0.8em;
您可以使用em值：与无单位值类似，行高将相对于字体大小。
#margin-bottom
定义元素外部的空间，在底部。
default margin-bottom: 0;
移除底部的所有边距。
margin-bottom: 30px;
你可以使用像素值。
margin-bottom: 2em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
margin-bottom: 10%;
您可以使用百分比值。
百分比基于容器的宽度。
#margin-left
定义元素外部的空间，在左侧。
default margin-left: 0;
移除左侧的所有边距。
margin-left: 50px;
你可以使用像素值。
margin-left: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
margin-left: 30%;
您可以使用百分比值。
百分比基于容器的宽度。
margin-left: auto;
auto关键字将使左侧共享剩余空间。
当与margin-right: auto结合使用时，如果定义了固定宽度，它将居中元素。
#margin-right
定义元素外部的空间，在右侧。
default margin-right: 0;
移除右侧的所有边距。
margin-right: 50px;
你可以使用像素值。
margin-right: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
margin-right: 30%;
您可以使用百分比值。
百分比基于容器的宽度。
margin-right: auto;
auto关键字将使右侧共享剩余空间。
当与margin-left: auto结合使用时，如果定义了固定宽度，它将居中元素。
#margin-top
定义元素外部的空间，在顶部。
default margin-top: 0;
移除顶部的所有边距。
margin-top: 30px;
你可以使用像素值。
margin-top: 2em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
margin-top: 10%;
您可以使用百分比值。
百分比基于容器的宽度。
#margin
对于margin-top margin-right margin-bottom 和 margin-left 的简写属性。
default margin: 0;
移除所有边距。
margin: 30px;
当使用1个值时，边距设置为所有4个边。
margin: 30px 60px;
当使用2个值时
- 第一个值用于顶部/底部
- 第二个值用于右侧/左侧
要记住顺序，请考虑您未定义的值。
如果您输入2个值（顶部/右侧），您将省略设置底部和左侧。因为底部是顶部的垂直对应物，它将使用顶部的值。而因为左侧是右侧的水平对应物，它将使用右侧的值。
margin: 30px 60px 45px;
当使用3个值时
- 第一个值用于顶部
- 第二个值用于右侧/左侧
- 第三个值用于底部
要记住顺序，请考虑您未定义的值。
如果您输入3个值（顶部/右侧/底部），您将省略设置左侧。作为右侧的对应物，它将使用其值。
margin: 30px 60px 45px 85px;
当使用4个值时
- 第一个值用于顶部
- 第二个值用于右侧
- 第三个值用于底部
- 第四个值用于左侧
要记住顺序，从顶部开始，顺时针方向。
#max-height
定义元素可以达到的最大高度。
default max-height: none;
该元素在高度方面没有限制。
max-height: 2000px;
你可以使用数值，如像素、(r)em、百分比等。
如果最大高度大于元素的实际高度，则最大高度没有影响。
max-height: 100px;
如果内容不适合最大高度，它将溢出。容器将如何处理此溢出内容由overflow属性定义。
#max-width
定义元素可以达到的最大宽度。
default max-width: none;
该元素在宽度方面没有限制。
max-width: 2000px;
你可以使用数值，如像素、(r)em、百分比等。
如果最大宽度大于元素的实际宽度，则最大宽度没有影响。
max-width: 150px;
如果内容不适合最大宽度，它将自动更改元素的高度以适应内容的换行。
#min-height
定义元素的最小高度。
default min-height: 0;
该元素没有最小高度。
min-height: 200px;
你可以使用数值，如像素、(r)em、百分比等。
如果最小高度大于元素的实际高度，则将应用最小高度。
min-height: 5px;
如果最小高度小于元素的实际高度，则最小高度没有影响。
#min-width
定义元素的最小宽度。
default min-width: 0;
该元素没有最小宽度。
min-width: 300px;
你可以使用数值，如像素、(r)em、百分比等。
如果最小宽度大于元素的实际宽度，则将应用最小宽度。
min-width: 5px;
如果最小宽度小于元素的实际宽度，则最小宽度没有影响。
#padding-bottom
定义元素内部的底部空间。
默认 padding-bottom: 0;
移除底部任何填充。
padding-bottom: 50px;
你可以使用像素值。
padding-bottom: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
padding-bottom: 30%;
您可以使用百分比值。
百分比基于元素的宽度。
#padding-left
定义元素内部的左侧空间。
默认 padding-left: 0;
移除左侧任何填充。
padding-left: 50px;
你可以使用像素值。
padding-left: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
padding-left: 30%;
您可以使用百分比值。
百分比基于元素的宽度。
#padding-right
定义元素内部的右侧空间。
默认 padding-right: 0;
移除右侧任何填充。
padding-right: 50px;
你可以使用像素值。
padding-right: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
padding-right: 30%;
您可以使用百分比值。
百分比基于元素的宽度。
#padding-top
定义元素内部的顶部空间。
默认 padding-top: 0;
移除顶部任何填充。
padding-top: 50px;
你可以使用像素值。
padding-top: 7em;
您可以使用(r)em值。
该值相对于字体大小相对
- em：相对于元素的当前字体大小
- rem：相对于
<html>的根元素的字体大小
padding-top: 30%;
您可以使用百分比值。
百分比基于元素的宽度。
#padding
用于 padding-top padding-right padding-bottom 和 padding-left 的简写属性。
默认 padding: 0;
移除所有填充。
padding: 30px;
使用1个值时，将为所有 4 个边设置填充。
padding: 30px 60px;
当使用2个值时
- 第一个值用于顶部/底部
- 第二个值用于右侧/左侧
要记住顺序，请考虑您未定义的值。
如果您输入2个值（顶部/右侧），您将省略设置底部和左侧。因为底部是顶部的垂直对应物，它将使用顶部的值。而因为左侧是右侧的水平对应物，它将使用右侧的值。
padding: 30px 60px 45px;
当使用3个值时
- 第一个值用于顶部
- 第二个值用于右侧/左侧
- 第三个值用于底部
要记住顺序，请考虑您未定义的值。
如果您输入3个值（顶部/右侧/底部），您将省略设置左侧。作为右侧的对应物，它将使用其值。
padding: 30px 60px 45px 85px;
当使用4个值时
- 第一个值用于顶部
- 第二个值用于右侧
- 第三个值用于底部
- 第四个值用于左侧
要记住顺序，从顶部开始，顺时针方向。
#width
定义元素的宽度。
默认 width: auto;
元素将自动调整其宽度以允许其内容正确显示。
width: 240px;
你可以使用数值，如像素、(r)em、百分比等。
width: 50%;
如果您使用百分比，则该值相对于容器的宽度。