CSS学习-----框模型

框模型图示：

解释：元素的最内部分是实际内容

      直接包围内容的是内边距

      内边距的边缘是边框

      边框外是外边距 （外边框默认是透明的，不会遮盖其后的任何元素）。

注意：背景应用与内部内容、内边距和边框组成的区域。

很多浏览器会自动设置内外边距，所以需要自己将内外边距设置为0，来覆盖浏览器的样式。

*(在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。）

注意：内边距、外边距和边框可以应用与一个元素的所有边，亦可以应用与单独的边。

      外边距可以是负值，而且在很多时候都要使用负值的外边距。

重要：值复制

      规则如下：

          如果缺少左边的值，则使用右边的值。

          如果缺少下边的值，则使用上边的值。

          如果缺少右边的值，则使用上边的值。

padding：用来设置内边距，不允许使用负值。

         值可以是百分数：百分数值是相对于其父元素的 width 计算的（都是相对于宽度来计算）

        注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

用来设置内边距的属性有：

    padding

    padding-top

    padding-right

    padding-bottom

    padding-left

border:用来设置边框，这是一个简写属性，赋值时，应该一次为：宽度，样式，颜色

       border-width；border-style；border-color

       可以单独设置某一边，于是可以用border-left简写属性来设置左边边框。

            同理有分属性：border-left-width等

border-style：

border-width：

    只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

border-color：

margin：设置外边距，这个属性接受任何长度单位、百分数值甚至负值。还可以使用auto。

        块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。

        行内元素的的左右外边距不会合并。

        浮动元素的外边距也不会合并。

 重点：外边距合并

       外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

       合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

       当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上外边距或下外边距也会发生合并。

       外边距甚至可以与自身发生合并。当是一个空元素时。

     上述空元素遇到另一个元素的外边距还会继续发生合并