盒模型

image.png

盒模型是CSS中最重要的基础知识，所有HTML元素都可以视作方框。

在CSS中，谈论设计和布局中，会使用术语“盒模型”、“框模型”。

盒模型是包围HTML元素的框：

  • 外边距
  • 边框
  • 内边距
  • 实际内容

border

border属性允许指定边框的样式、宽度和颜色。

边框样式

border-style属性指定显示的边框类型：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style属性可以设置1到4个值（用于上下左右边框）。

边框宽度

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

宽度设置为指定大小(px、pt、cm、em)，也可以使用预定义值：thin、medium或thick。

特定边的宽度

border-width属性可以设置一到四个值的宽度。

分别用于上边框、右边框、下边框、左边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

边框颜色

border-color可以设置四个边框的颜色。

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如”red”
  • HEX - 指定十六进制颜色，比如”#ff0000”
  • RGB - 指定RGB值，比如rgb(255, 0, 0)
  • HSL - 指定HSL值，比如hsl(0, 100%, 50%)
  • transparent

边框各边

在CSS中，可以指定某条边：

1
2
3
4
5
6
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

此外，需要注意：

1
2
3
4
border-style: dotted solid double dashed; //上右下左，顺时针
border-style: dotted solid double;//上边框虚线、右和左边框实现、下边框双线
border-style: dotted solid;//上下边框虚线，左右边框实线
border-style: dotted;//四条边均为虚线

简写属性

border属性是以下各属性的简写：

  • border-width
  • border-style
  • border-color
1
2
3
p {
  border: 5px solid red;
}

圆角边框

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

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

margin

margin属性用于在任何边框外，为元素周围创建空间。

通过margin可以控制外边距。

margin属性

CSS可以为元素每一次指定外边距属性：

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

所有属性可以设置以下值：

auto - 浏览器来计算外边距（水平居中）

length - 以px、pt、cm等单位指定外边距

% - 指定以包含元素宽度的百分比

inherit - 从父元素继承外边框

简写属性

可以简写margin属性：

1
2
3
p {
  margin: 25px 50px 75px 100px; //上右下左
}

外边距合并

外边距合并指的是当两个垂直外边距相遇时合并成一个外边距。

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

padding

padding属性用于在任何定义的边界内的元素内容周围生成空间。

通过CSS，可以控制内边距。

padding属性

CSS可以为元素每一次指定内**边距属性**：

  • padding-top
  • padding-left
  • padding-right
  • padding-bottom

所有属性可以设置以下值：

length - 以px、pt、cm等单位指定外边距

% - 指定以包含元素宽度的百分比

inherit - 从父元素继承外边框

简写属性

padding属性可以简写。

1
2
3
div {
  padding: 25px 50px 75px 100px;    //上右下左
}

注意width

CSS width指定元素内容的宽度，会和padding边框宽度叠加。

如果不想叠加可以使用box-sizing属性。

元素的高度和宽度

height和width属性分别设置元素的高度和宽度。

height和width属性值不包括内边距、边框、外边距，设置的是元素内容。

height和width可以设置的值：

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