CSS 的大小

CSS 的大小

CSS 宽度和高度 —width、height

CSS 通过height 和 width 属性来设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。
它设置的是元素内边距、边框以及外边距内的区域的高度或宽度

height 和 width 属性可设置如下值：

• auto - 默认。浏览器计算高度和宽度。
• length - 以 px、cm 等定义高度/宽度。
• % - 以包含块的百分比定义高度/宽度。
• initial - 将高度/宽度设置为默认值。
• inherit - 从其父值继承高度/宽度。

CSS 外边距—margin

• margin-top
• margin-right
• margin-bottom
• margin-left

所有外边距属性都可以设置以下值：

• auto - 浏览器来计算外边距
• length - 以 px、pt、cm 等单位指定外边距
• % - 指定以包含元素宽度的百分比计的外边距
• inherit - 指定应从父元素继承外边距

提示：允许负值。

margin的简写属性

• margin设置四个属性值：

margin: 25px 50px 75px 100px;

*上外边距是 25px
*右外边距是 50px
*下外边距是 75px
*左外边距是 100px

• margin设置三个属性值

margin: 25px 50px 75px;

*上外边距是 25px
*右、左外边距是 50px
*下外边距是 75px

• margin设置两个属性值

margin: 25px 50px;

*上、下外边距是 25px
*右、左外边距是 50px

• margin设置一个属性值

margin: 25px;

*上、下、右、左外边距都是 25px

auto 值

使用 margin: auto

可以使元素在其容器中水平居中。

该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

外边距合并

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

CSS 内边距—padding

与margin基本用法相同

提示：不允许负值。

内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。
内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

div 元素的宽度为 300px。
但是，div元素的实际宽度:
是 350px（300px + 左内边距 25px + 右内边距 25px）：

div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持为 300px，无论填充量如何，
可以使用 box-sizing 属性。
其会让元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

CSS 边框—border

• 边框样式
  border-style 属性指定要显示的边框类型。

• 边框宽度
  border-width 属性指定四个边框的宽度。

• 边框颜色
  border-color 属性用于设置四个边框的颜色。

简写边框属性

border 属性是以下各个边框属性的简写属性：

• border-width
• border-style（必需）
• border-color

p {
 border: 5px solid red;
}

还可以只为一个边指定所有单个边框属性：

border-left: 6px solid red;

圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}