CSS 框模型

CSS 框模型

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

• element : 元素。
• padding : 内边距，也有资料将其翻译为填充。
• border : 边框
• margin : 外边距，也有资料将其翻译为空白或空白边。
• 二，单边内边距属性

• 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

• 1padding-

• 2toppadding-

• 3rightpadding

• 4bottompadding-left

• 百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

• CSS 内边距属性

  属性	描述
  padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
  padding-bottom	设置元素的下内边距。
  padding-left	设置元素的左内边距。
  padding-right	设置元素的右内边距。
  padding-top	设置元素的上内边距。

• 定义单边样式

  如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

  • CSS 边框属性

    属性	描述
    border	简写属性，用于把针对四个边的属性设置在一个声明。
    border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
    border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
    border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
    border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
    border-bottom-color	设置元素的下边框的颜色。
    border-bottom-style	设置元素的下边框的样式。
    border-bottom-width	设置元素的下边框的宽度。
    border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
    border-left-color	设置元素的左边框的颜色。
    border-left-style	设置元素的左边框的样式。
    border-left-width	设置元素的左边框的宽度。
    border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
    border-right-color	设置元素的右边框的颜色。
    border-right-style	设置元素的右边框的样式。
    border-right-width	设置元素的右边框的宽度。
    border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
    border-top-color	设置元素的上边框的颜色。
    border-top-style	设置元素的上边框的样式。
    border-top-width	设置元素的上边框的宽度。