目录
一、盒子模型知识
1、什么是盒子模型
我们把一个元素看成一个矩形，而这个矩形的位置和内容我们可以根据自己所想在浏览器上随意布局，简要理解为，浏览器上各个部分都是一块一块儿盒子模型组成，如图
2、盒子模型要素
（1）内容（content）
鼠标可以选中的部分，多用于文字填充，是标签内容存放的位置，也可以嵌套其它盒子，总而言之就是可以写东西的地方
（2）内边距（padding）
盒子边框与内容的距离，我们可以以此限定容器与内容的间隔（类似于，快递包装和快递物品，他们并不是紧紧相贴，存在一定距离）
（3）边界（border）
盒子边框，可以设置各种属性
（4）外边距（margin）
盒子边框与外部的距离。通常，我们认知的块元素占据了浏览器整整一行，我们新建块元素时，会被挤到下一行，便是因为外边距的原因。外边距限定了元素与元素之间的距离，同时也可以限定当前元素在浏览器中的位置
二、各元素设置（常见设置）
注意：以下元素设置的例子均依据以下例子标签（两个同级标签div，一个为类box1，一个为类box2，box1中包含一个类为inner的div子标签）
<div class="box1">
<div class="inner">
</div>
</div>
<div class="box2"></div>1、内容（content）
（1）background-color
此属性用于设定内容的背景颜色，不会对其它要素造成影响
（2）width和height
不加修饰的宽度和高度仅对内容生效，不会对其它要素造成影响，会对盒子大小造成影响（相当于在修改盒子的肚子大小）
（3）标签内字符
此类字符只可能出现在内容部分，例如
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolor minus laboriosam impedit tenetur eligendi nobis obcaecati, neque cumque odio sed porro natus aut est quo debitis laudantium alias! Itaque!
</div>2、内边距（padding）
内边距常见有四个属性，可对上下左右的边距进行设置，但不同数量的参数输入会对效果造成影响
（1）四个参数分别设置
.box1{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}（2）参数同时设置（简化设置，用空格隔开）
四参数同时设置（含义表示：上 右 下 左）
.box1{
padding: 20px 20px 20px 20px;
}三参数同时设置（含义表示：上 左右 下）
.box1{
padding: 20px 20px 20px;
}二参数同时设置（含义表示：上下 左右）
.box1{
padding: 20px 20px;
}一参数设置（含义表示：上右下左）
.box1{
padding: 20px;
}3、边界（border，以下三参数必须设置，虽然有默认值）
（1）border边框（与padding类似），例如
.box1{
border-top: 10px;
border-right: 10px;
border-bottom: 10px;
border-left: 10px;
}（2）border-color
.box1{
border-color: #bfa;
}（3）border-style
常见有几种（更多款式自己查阅）
solid-实线
double-双实线
dotted-实心点虚线
.box1{
border-style: dotted;
}（4）简易样式设置（空格隔开，不区分顺序）
.box1{
border: 10px solid red;
}4、外边距（margin）
设置方式与padding相同，可简易设置
三、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style>
.box1{
background-color: #bfa;
width: 200px;
height: 200px;
border: 10px solid red;
padding: 20px 20px 20px 20px;
margin: 100px 100px 100px 100px;
}
.inner{
color: white;
width: 100%;
height: 100%;
background-color: black;
}
.box2{
background-color: #bfa;
width: 200px;
height: 200px;
border: 10px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim dolor minus laboriosam impedit tenetur eligendi nobis obcaecati, neque cumque odio sed porro natus aut est quo debitis laudantium alias! Itaque!
</div>
</div>
<div class="box2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, magni ab! Itaque autem possimus deleniti velit tempora. Id optio eius fugit illo officiis odio tempore voluptates eaque molestias vitae? Harum?</div>
</body>
</html>