本节重点
- 元素分类
- display
- 盒模型的介绍
- 盒模型的常用属性
1.元素分类
在讲解css盒模型和布局之前，我们需要提前知道一些知识，为了后续的知识点做储备。在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素。
html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构。那么这么多标签，显然是比较没有规律的，那么这节课我们就来对这些常用的标签进行分类。了解了每类标签的特点之后，我们才能更好的对网站进行布局。
常用的块状元素有：
<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>
常用的内联元素有
<a>、<span>、<i>、<em>、<strong>、<label>
常见的内联块状元素有
<input>、<img>
那么把网页中常用的标签进行分类之后，那么这三类标签分别有什么特点呢？
| 标签类别 | 特点 |
|---|---|
| 块状元素 | 1.独自占据整一行 2.可以设置宽高 |
| 内联元素 | 1.所有的内联元素在一行内显示 2.不可以设置宽高 |
| 行内块元素 | 1.在一行内显示 2.可以设置宽高 |
注意：标签分类的特点是对现有的HTML常用标签进行分类，那么这些特点在后面的学习过程中我们还可以通过display属性进行强制修改规则。
2.盒模型的介绍
所谓盒子模型，在css中，”css model“这一术语是用来设计和布局时使用。那么所有的HTML元素可以看作盒子。css的盒模型本质上是一个盒子，来表示周围的HTML元素，它包括：边距、边框、填充和实际内容。
举个例子，比如今年中秋节有个好几年没见的老同学，来看我。一个大礼盒，我打开一看呢？哎呀我去，就一个月饼。如图所示
那么如果我们把这里礼盒看作网页中的一个元素，比如div。
我们会观察如下特点：
- 五仁就可以看作这个div的内容，这个内容可以看作是文本、图片或者是另一个标签元素，它应该有宽度和高度。
- 把月饼盒到月饼之间距离称为盒子模型的内填充，在样式表中叫做padding。
- 再继续看下图
一个盒子到另一个盒子的距离我们称为盒子模型的外边距，在样式表中叫做margin
4.再继续看
红色区域将盒子包括起来的，我们在盒子模型中称为边框，在样式表中叫border。
那么在css中盒模型又是怎样的呢？下图所示。那么下节课咱们就一一的讲解每个属性的用法。
3.盒模型的常用属性
上节课我们介绍完盒模型，那么我们知道在盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。
内容的宽高
需要注意的是，盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的，css定义的宽(width)和高(height),指的是盒子内部物体所占据的宽高，在css中指的是填充以里的内容范围。
举例说明：我想有一个200px*200px范围的div盒子，背景颜色是红色的。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容的宽高</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果展示：
那么如何能查看该盒模型的大小呢？很简单，在页面上右击审查元素，或者快捷键F12。打开控制台。查看效果：
盒模型的效果图：
内边距
内边距表示的是盒子的边框到内容之间的距离。
代码如下：
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
}
明显发现盒子的整体宽度变大了，也就是说设置了padding之后，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。
padding的设置
padding有四个方向，分别描述四个方向的padding。
- 单个属性分别设置不同方向的padding
padding-top:10px;
padding-right:3px;
padding-bottom:50px;
padding-left:70px;
效果展示：
- 综合属性，多个属性用空格隔开。
/*上 右 下 左 四个方向*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
分别演示，看相应的效果。
边框
盒子模型的边框，在样式表中称为border。我们知道呢，我们用的手机，都会有手机壳。手机壳的样式、颜色、薄厚程度等都是这个壳的形态。同样呢，盒模型的边框也有三要素：粗细 线性样式 颜色。
举例说明，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border的使用</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/*1像素实线且红色的边框*/
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
按照三要素书写border
border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代码相当于一句代码：border:3px solid red;*/
/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/
/*上下5px 左右10px*/
border-width:5px 10px;
/*上：实现 右：点状 下：双线 左：虚线*/
border-style: solid dotted double dashed;
/*上：红色 左右：绿色 下：黄色*/
border-color: red green yellow;
效果展示：
按照方向划分
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句，相当于 bordr: 10px solid red;
另外还可以简写方式：
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
清除默认边框
清除某些标签默认的边框，我们使用border:none;或者border:0;
比如，input输入框它有默认的边框，如果我们想制作好看的输入框的话，首先先得把默认的清除掉，然后我们再按照需求来更改，并且我们会发现焦点选中输入框的时候有一条蓝色的外线。那么我们也需要将它清除 ,使用属性outline:none;。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border默认清除</title>
<style type="text/css">
input{
border: none;
outline: none;
border:1px solid red;
}
</style>
</head>
<body>
<input type="text" name="">
</body>
</html>
外边距
在盒子模型中称为外边距，样式表中叫margin。表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。
水平方向的外边距
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向外边距</title>
<style type="text/css">
.box_l{
background-color: green;
margin-right: 20px;
}
.box_r{
background-color: red;
margin-left: 30px;
}
</style>
</head>
<body>
<span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
</html>
效果展示：
垂直方向外边距
盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“外边距合并”的现象。
看个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直方向上外边距合并</title>
<style type="text/css">
.father{
width: 400px;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果展示：
如果给红色的盒子设置margin-bottom:30px;
效果显示：
如果给绿色的盒子设置margin-top:50px;
效果显示：
这就属于，外边距合并现象。
什么是外边距合并呢？在有些文献中说这种现象叫塌陷问题。只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin之后，那么以较大者为准。
在网页排版中，外边距合并的问题也会时常出现，我们如何避免出现这种问题呢？
很简单，我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可。没必要去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失。
