什么是盒模型

## CSS 盒模型

### 1、概述

CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）

所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）



### 2、内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。

元素的内容及子元素默认从内容区域开始排列。

#### 2.1、width

- 作用：设置宽度

- 取值

- auto默认值。浏览器可计算出实际的宽度。

- px

- 百分比

#### 2.2、height

- 作用：设置高度

- 取值

- auto默认值。浏览器可计算出实际的宽度。

- px

- 百分比

### 3、边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。

#### 3.1、border-width边框宽度

- 作用

设置所有边框宽度，或者单独地为各边边框设置宽度。

- 取值

- 长度值

- 不允许指定负长度值。

- 语法

- 空格隔开1-4个值

- 1个值 设置所有边框宽度

- 2个值 设置上下、左右

- 3个值 设置上、左右、下

- 4个值 设置上、右、下、左

#### 3.2、border-style边框样式

- 作用

设置标签所有边框的样式，或者单独地为各边设置边框样式。

- 取值

- none 定义无边框。

- dotted 定义点状边框。

- dashed 定义虚线。

- solid 定义实线。

- double 定义双线。双线的 宽度等于 border-width 的值。

- 其他（了解——掌握以上5个即可）


- 语法

- 1个值 设置所有边框

- 2个值 设置上下、左右

- 3个值 设置上、左右、下

- 4个值 设置上、右、下、左

- 注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0。

#### 3.3、border-color边框颜色

- 作用

设置所有边框颜色，或者单独地为各边边框设置颜色。

- 取值

- 颜色的名称，如 `red`

- RGB 值， 如 `rgb(255,0,0)`

- 16进制值，如 `#ff0000`

- 语法

- 1个值 设置所有边框

- 2个值 设置上下、左右

- 3个值 设置上、左右、下

- 4个值 设置上、右、下、左

#### 3.4、边框实例

```css

.box{

width:100px;

height:100px;

/* 边框 宽度 上下 左右 */

/* border-width:1px 10px*/

/* 边框 样式 */

/* border-style:solid dashed double; */

/* 边框 颜色 上 右 下 左 */

border-color:red blue green yellow;

}

```

#### 3.5、简写

**定义四个边**

语法：border:样式 宽度 颜色；

```css

.box{

width:100px;

height:100px;

/* 四个边简写 */

border:10px solid red;

}

```

**单个方向定义**

说明：每个边框都可以设置样式宽度颜色。

语法：border-方向：宽度 样式 颜色；

**拆分语法**

- border-方向-width

- border-方向-color

- border-方向-style

```css

.box{

/* 单个边简写 */

border-left:10px solid red;

border-right:10px solid green;

border-top:10px solid pink;

/* border-bottom:10px solid red; */

/* 单个边拆分的写法 */

border-bottom-width:10px;

border-bottom-style:solid;

border-bottom-color:yellow;

}

```

**注意:**

- 边框会影响盒子实际大小

- 边框样式、边框宽度、边框颜色无书写顺序要求

### 4、内边距 padding

CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。

padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

#### 4.1、单个方向设置

- padding-bottom 设置标签的下内边距

- padding-left 设置标签的左内边距

- padding-right 设置标签的右内边距

- padding-top 设置标签的上内边距

#### 4.2、取值

- px

- 默认值0

- 百分比

- 不可使用负值

```css

.box{

width:200px;

background-color:red;

padding-left:10px;

padding-right:20px;

padding-top:30px;

padding-bottom:40px;

}

```

#### 4.3、简写

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

- 语法：padding：1-4个值 【空格隔开】

- 规则：

- 1个值：表示【四个方向】的内边距值

- 2个值：分别表示【上下，左右】的内边距值

- 3个值：分别表示【上，左右，下】的内边距值

- 4个值：分别表示【上，右，下、左】的内边距值

```css

.box{

width:200px;

background-color:red;

padding:10px 20px 30px 40px;

}

```

### 5、外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

#### 5.1、单个方向定义

- margin-bottom 设置下内边距

- margin-left 设置左内边距

- margin-right 设置右内边距

- margin-top 设置上内边距

```css

.box{

width:200px;

background-color:red;

margin-left:10px;

margin-right:20px;

margin-top:30px;

margin-bottom:40px;

}

```

#### 5.2、简写

- 语法：空格隔开

- 取值：1-4个规则与padding值一致

- 取值

- px

- auto浏览器自动计算

- 允许使用负值

```css

.box{

width:200px;

background-color:red;

margin:10px 20px 30px 40px;

}

```

#### 5.3、外边距应用

外边距实现已知宽度的块级盒子水平居中。

```css

.box{

width:200px;

/*

margin-left:auto;

margin-right:auto;

*/

margin:0 auto;

}

```

### 图片下间隙问题

*图片下间隙出现的原因： 父元素没有设置高度，由图片撑开，就是有间隙*

*方法：*

*1、给img的父元素设置高度，高度和图片的高一致；*

*2、给img的父元素设置font-size：0；或者 line-height：0；*

*3、给img标签转换为块级标签 display：block;*

*4、为img标签设置垂直对齐方式 img{vertical-align：不为默认值 baseline}*

### vertical-align 属性详解

#### 1、作用

- 作用1：回顾表格处的应用

- 作用2：定义行内元素的基线相对于该元素所在行的基线的垂直对齐

#### 2、常用的值

- baseline 默认。标签放置在父标签的基线上

- top 把标签的顶端与行中最高标签的顶端对齐

- middle 把此标签放置在父标签的中部

- bottom 把标签的顶端与行中最低的标签的顶端对齐

#### 3、典型应用

- 图片与图片垂直方向的对齐（行内块与行内块）

- 图片与文字垂直方向的对齐