盒模型

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 - 从其父值继承。