CSS框（盒）模型

CSS框（盒）模型

---

css框模型规定了元素处理元素内容，内边距，边框和外边距的方式。

---

css框模型概要

• 元素框的最内部分是实际内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的。
• 背景应用于由内容和内边距，边框组成的区域。
• 内边距，边框，外边距都是可选的，默认值是零。可以通过margin（外边距）和padding（内边距）设置为0来覆盖这些浏览器样式👇

* {
  margin: 0;
  padding: 0;
}

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

• 👆假设每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就要将内容的宽度设置为70像素。
• 内边距，边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
• 外边距可以是负值，而且在一般情况下都要使用负值的外边距。

---

css内边距

元素内边距（padding）的位置在元素边框和元素内容之间的空白区域。

padding

• padding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。

1. 当padding属性定义一个值时，规定元素四个边的内边距。
2. 当padding属性定义两个值时，按照上下和左右的顺序分别设置各边的内边距。
3. 当padding属性定义三个值时，按照上，左和右，下的顺序分别设置各边的内边距。
4. 当padding属性定义四个值时，按照上，右，下，左的顺序分别设置各边的内边距。

单边内边距

• 通过下面四个单独属性，分别设置上，右，下，左内边距：
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

内边距的百分比数值

• 前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的width计算的，这一点与外边距一样。所以，如果父元素的width改变，他们也会改变。
• 上下内边距与左右内边距一致；即上下内边距的百分比数会相对于父元素宽度设置，而不是相对于高度。

---

css边框

元素的边框（border）是围绕元素内容和内边距的一条或多条线。

css边框

• HTML中，我们使用表格来创建文本周围的边框，但是通过使用css边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
• 每个边框有三个方面：宽度，样式，以及颜色。

边框与背景

• css规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线边框），元素的背景应当出现在边框的可见部分之间。

边框的样式

• css的border-style属性定义了10个不同的非inherit样式，包括none。
• JavaScript语法👇

object.style.borderStyle="dotted double"

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于除表以外。对于表，hidden用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

定义多种样式

• 我们可以为一个边框定义多个样式，且border-style的值不能是none。

1. 当border-style属性定义一个值时，规定元素四个边的边框。
2. 当border-style属性定义两个值时，按照上下和左右的顺序分别设置各边的边框。
3. 当border-style属性定义三个值时，按照上，左和右，下的顺序分别设置各边的边框。
4. 当border-style属性定义四个值时，按照上，右，下，左的顺序分别设置各边的边框。

• 这与边框宽度的设置是相似的。

定义单边样式

• 通过下面四个单独属性分别设置上，右，下，左边框：
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

简写边框样式

p {
	border-style: solid; 
	border-left-style: none；
}

• 如果使用👆这种方式，必需把单边属性放在简写属性之后。因为如果把单边属性放在border-style之前，简写属性的值就会覆盖单边值。

边框的宽度

• 我们可以通过border-width属性为边框指定宽度。
• JavaScript语法👇

object.style.borderWidth="thin thick"

值	描述
length	允许您自定义边框的宽度px或em
thin	定义细的边框
medium	默认。定义中等的边框
thick	定义粗的边框
inherit	固定应该从父元素

定义单边宽度

• 我们可以为一个边框定义多个样式，且border-style的值不能是none，不允许指定负长度值。

1. 当border-width属性定义一个值时，规定元素四个边的边框宽度。
2. 当border-width属性定义两个值时，按照上下和左右的顺序分别设置各边的边框宽度。
3. 当border-width属性定义三个值时，按照上，左和右，下的顺序分别设置各边的边框宽度。
4. 当border-width属性定义四个值时，按照上，右，下，左的顺序分别设置各边的边框宽度。

• 这与边框样式的设置是相似的。
• 通过下面四个单独属性分别设置上，右，下，左边框宽度：
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

没有边框

• 如果希望显示某种边框，就必须设置边框样式。
• 如果把border-style设置为none

p {
	border-style: none; border-width: 50px;
}

• 上述例子中，尽管边框的宽度设置成50px，但是边框样式设置为none。在这种情况下，不仅边框的样式没有了，其宽度也变成了0。
• 因为border-style的默认值是none。所以，如果希望边框出现，就必须声明一个边框样式。

边框颜色

• 定义边框颜色非常简单。css使用border-color属性，它一次可以接受最多四个颜色值。且必须把border-style属性声明到border-color属性之前。

1. 当border-color属性定义一个值时，规定元素四个边的边框宽度。
2. 当border-color属性定义两个值时，按照上下和左右的顺序分别设置各边的边框宽度。
3. 当border-color属性定义三个值时，按照上，左和右，下的顺序分别设置各边的边框宽度。
4. 当border-color属性定义四个值时，按照上，右，下，左的顺序分别设置各边的边框宽度。

• 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。如果元素内没有任何文本，那么它的颜色就是其父元素的文本颜色（因为color可以继承）。这个父元素很可能是body，div或是table。

定义单边颜色

• 通过下面四个单独属性分别设置上，右，下，左边框颜色：
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

透明边框

• 刚刚提到，如果没有边框样式，就没有宽度。不过我们可以创建一个不可见的边框——transparent。
• 从某种意义上说，利用transparent，使用边框就像是额外的内边距一样；还有一个好处，就是能在你需要的时候使其可见。

---

css外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距最简单的方法就是使用margin属性，这个属性接受任何长度单位，百分数值甚至负值。

margin

• margin属性接受任何长度单位，可以是像素，英寸，毫米或em。
• margin可以设置为auto。
• margin可以设置一个百分数值。
  百分数值是相对于父元素width计算的。
• 与内边距的设置相同

1. 当margin属性定义一个值时，规定元素四个边的外边距。
2. 当margin属性定义两个值时，按照上下和左右的顺序分别设置各边的外边距。
3. 当margin属性定义三个值时，按照上，左和右，下的顺序分别设置各边的外边距。
4. 当margin属性定义四个值时，按照上，右，下，左的顺序分别设置各边的外边距。

值复制

在内边距，边框，外边距中都出现的属性定义一个值，两个值，三个值或四个值的情况叫值复制。

• 值复制规则
  1. 如果缺少左边元素的值，则使用右边元素的值
  2. 如果缺少下边元素的值，则使用上边元素的值
  3. 如果缺少右边元素的值，则使用上边元素的值
     

单边外边距

• 通过下面四个单独属性分别设置上，右，下，左外边距：
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

---

css外边距合并

外边距合并指的是，当两个垂直外边距相遇是，他们将形成一个外边距。
合并后的外边距的高度定于两个发生合并的外边距中高度中较大者。

• 当一个元素出现在另一个元素上边时，第一个元素的下外边距与第二个元素的上外边距会发生合并。👇
  
• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），他们的上和/或下边距也会发生合并。👇
  
• 假设有一个空元素，它有外边距，但是没有边框或填充。这种情况下，上外边距与下外边距就碰到了一起，他们会发生合并。👇
• 如果这个外边距遇到另一个元素的外边距，它还会发生合并。 👇
• 外边距合并看上去可能有一点奇怪，但实际上他是有意义的。以由多个段落组成的典型文本页面为例。👇
  
• 提示：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。