CSS框模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/tutucute0000/article/details/24941651

css包含框模型描述了文档树中元素产生的长方形包含框。下图来自与css specification，画出了框之间的关系

如上图所示，每一个框都有一个内容区域（如文本，图形等等）以及可选的环绕在周围的内边距、边框、外边距区域。width 和 height 属性指定的是内容区域的宽度和高度，元素框的总大小取决与内容区、内边距、边框、外边距的总和。内边距、边框和外边距既可以应用于一个元素的所有边，也可以应用于单独的边。值得注意的是，背景应用于由内容区和内边距、边框组成的区域。外边距区总是透明的。

1. 外边距margin

margin定义了外边距的宽度，既可以通过margin-top、margin-bottom、margin-left、margin-right单独赋值，也可以使用margin缩写四边边框的宽度。

缩写的margin可以设置1-4个值，赋值顺序依次为上、右、下、左（逆时针），如果缺少下外边距的值，则下外边距等于上外边距，如果缺少左外边距的值，则左外边距等于右外边距，如果缺少右外边距的值，则右外边距等于上外边距。所以不同个数的数值的赋值效果如下：

1个：四边都设置为该值
2个：上、下边设置为第一个数值，左、右边设置为第二个数值
3个：上边设置为第一个数值，左右边设置为第二个数值，下边设置为第三个数值
4个：按上、右、下、左分别赋值

外边距的值可以设置为绝对值（包括负值），也可以是百分比。如果为百分比的话，相对于的是该元素包含框的宽度。

2. 内边距padding

padding定义了内边距的宽度，既可以通过padding-top、padding-bottom、padding-left、padding-right单独赋值，也可以使用padding缩写四边边框的宽度。赋值规律同margin。

外边距的值可以设置为绝对值，也可以是百分比，但不允许使用负值。如果为百分比的话，相对于的是该元素包含框的宽度。

3. 边框border

border 定义元素边框的样式、宽度和颜色

border-style定义了边框的样式，如果不指定边框的样式，那么就不会有边框，宽度、颜色的设置也就没有了意义。可以通过border-top-style等分别设置四边的样式或者缩写为border-style。可选值有solid、dash等。
border-width定义了边框的宽度，可以通过border-top-width等分别设置四边的宽度或者缩写为border-width。可以赋给的值有thin、medium、thick或是具体的数值。
border-color定义了边框的颜色，可以通过border-top-color等分别设置四边的颜色或者缩写为border-color。

另外还可以使用的缩写有：

border-top、border-bottom、border-left、border-right：将某一边的样式、宽度、颜色写在一起，例如 border-top：thick solid red，只设置了上边框的样式。

border：将四边的样式、宽度、颜色设置为相同的值。例如，border：thick solid red，四边的框都是这样样式。

最后贴一个css specification中的例子，可以清楚的看到各个框、边距之间的关系。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: green; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: black;                /* text color is black */ 
        background: gray;            /* Content, padding will be gray */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is longer
           to illustrate wrapping.
    </UL>
  </BODY>
</HTML>