CSS盒子模型

盒子模型

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。

边框（border）

border 可以设置元素边框。边框有三个组成：border-width、border-style、border-color

1
2
3
4
5
6
7
8
9
10
11
12
13
/*
属性可连写
border-width：定义边框粗细，单位 px
border-style：边框样式
border-color：边框颜色
*/
border: border-width || border-style || border-color;

/* 简写 */
border: 5px solid pink;

/* 分开写 分别指定上下左右*/
border-top: 1px solid red;

表格的细线边框

border-collapse 属性控制浏览器绘制 表格边框 的方式。它控制相邻单元格的边框（合并相邻边框）。

1
2
/* 表示将相邻边框合并在一起 */
border-collapse: collapse;

边框会影响盒子实际大小

边框会额外增加盒子的实际大小

内边距（padding）

padding 属性设置内边距，即 边框与内容之间的距离。

  • padding-left: 左内边距
  • padding-right: 右内边距
  • padding-top: 上内边距
  • padding-bottotm: 下内边距

简写

1
2
3
4
5
6
7
8
9
10
/*
- 1 个值：上下左右
- 2 个值：上下，左右
- 3 个值：上，左右，下
- 4 个值：上，右，下，左，顺时针
*/
padding: 5px;
padding: 5px 10px;
padding: 5px 10px 20px;
padding: 5px 10px 20px 30px;

padding 会影响盒子实际大小

当盒子已经有了宽度和高度，再指定内边距(前提)，会撑大盒子。要保证盒子和效果图一样大，则让 width/height-多出来的内边距大小即可。

当给盒子指定了 padding 值以后，发生了两件事情：

  1. 内容和边框有了距离，增加内边距
  2. padding 值 影响了盒子实际大小

外边距（margin）

margin 属性用于设置外边距，即 控制盒子与盒子之间的距离。

  • margin-left: 左外边距
  • margin-right: 右外边距
  • margin-top: 上外边距
  • margin-bottotm: 下外边距

简写，同padding

1
2
3
4
5
6
7
8
9
10
/*
- 1 个值：上下左右
- 2 个值：上下，左右
- 3 个值：上，左右，下
- 4 个值：上，右，下，左，顺时针
*/
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 20px;
margin: 5px 10px 20px 30px;

水平居中

外边距可以让块级盒子（块级元素） 水平居中，但是必须满足两个条件：

  1. 盒子 必须指定宽度（width）
  2. 盒子 左右 的外边距都设置为 auto
1
2
3
4
.header {
  width: 960px;
  margin: 0 auto;  /* 最常用 */ 
}

使 行内元素或行内块元素 水平居中

1
text-align: center;

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

  1. 为父元素定义上边框
  2. 为父元素定义上内边距
  3. 为父元素添加 overflow:hidden

清除内外边距

网页元素很多都带有默认内外边距，而且不同浏览器默认的也不一致，因此在布局前，要先清除网页元素的内外边距。

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

圆角边框

border-radius 属性用于设置元素的外边框圆角。

1
border-radius: length;
  • 参数可以为 数值 或 百分比
  • 正方形 变 圆，将数值修改为高度或者宽度的一般即可 或 border-radius: 50%;
  • 圆角矩形，将数值设置为 height 的一半就可以做
  • 简写规律 同padding和margin
  • 可分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

盒子阴影，使用 box-shadow 属性。

1
bxo-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离（影子的虚实）
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，将外部阴影改为内部阴影（默认是外部阴影）

注意：

  1. 默认是外阴影，但是 不可以写这个单词（outset）
  2. 盒子阴影 不占空间，不会影响其他盒子排列

文字阴影

text-shadow 属性设置文本阴影。

1
text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需，水平阴影位置。允许负值。
v-shadow 必须，垂直阴影。允许负值。
blur 可选，模糊距离。
color 可选，阴影颜色。