目录
一、盒子模型的几个关键词
内容(content)、填充(padding通俗讲就是内边距)、边框(border)、边界(margin通俗讲就是外边距)。
用图片来演示一下
简单用画图工具演示一下就是
二、盒子有尺寸，用CSS写法为宽度（width）和高度（height）
定义盒子的宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
运行结果
注意：只有块元素才可以设置宽度和高度，行内元素无法设置宽度和高度。
三、盒子有边框，用CSS写法为上下左右边框（border）
3.1边框线型 border-style
参数：
none : 无边框 dotted : 点线边框 dashed : 虚线边框 solid : 实线边框 double : 双线边框
3.2边框颜色
检索或设置对象的边框颜色。
语法：
border-color : color
3.3边框的复合属性
语法：
border : border-style||border-width|| border-color
例如我要设置 p标签的边框为： 线型实线 ， 宽度20px ， 颜色为红色
p { border: solid 20px red; }
3.4单独控制上下左右边框
3.4.1上边框 border-top
检索或设置对象的上边框。这是一个复合属性。
语法：
border-top: border-style||border-width||border-color
例如我要设置 p标签的上边框为： 线型实线 ，宽度20px ， 颜色为红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border-top: solid 20px red;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
运行效果
3.4.2下边框 border-bottom
检索或设置对象的下边框。这是一个复合属性。
语法：
border-bottom :border-style||border-width||border-color
比如我要设置 p标签的下边框为： 宽度2px ， 线型实线 ， 颜色为红色 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border-bottom: 20px solid red;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
运行效果
3.4.3左边框border-left
3.4.4右边框border-right
左边框 border-left、右边框 border-right同上
四、盒子有内边距，用CSS写法为上下左右内边距（padding）
4.1padding的复合属性
检索或设置对象四边的内边距，换句话说，也就是边框与内容之间的距离。
语法：
padding :length
例如我要边框与内容之间的距离为50px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
border: 20px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div id="box1">
Hello, I am box1
</div>
</body>
</html>
运行效果
注意：
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
4.2单独控制上下左右边框
4.2.1上边内边距 padding-top
检索或设置对象的上边内边距。
语法：
padding-top :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 300px;
border: solid 20px red;
padding-top: 100px;
}
</style>
</head>
<body>
<div id="box1">
Hello, my padding-top is 50px
</div>
</body>
</html>
运行结果
4.2.2底边内边距 padding-bottom
检索或设置对象的下边内边距。
语法：
padding-right:length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
border: solid 20px red;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="box1">
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
Hello, my padding-bottom is 100px
</div>
</body>
</html>
运行结果
4.2.3左边内边距 padding-left
4.2.4右边内边距 padding-right
左边内边距padding-left、右边内边距padding-right同上
五、盒子有外边距，用CSS写法为外边距（margin）
5.1margin的复合属性
检索或设置对象四边的外边距。
语法：
margin:length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
</body>
</html>
运行结果
注意：
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
外边距在不同浏览器的效果会有很大不同，建议尽量少用。
5.2单独控制上下左右边框
5.2.1上边外边距 margin-top
检索或设置对象的上边外边距。
语法：
margin-top :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
</body>
</html>
运行结果
5.2.2下边外边距 margin-bottom
检索或设置对象的下边外边距。
语法：
margin-bottom :length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 350px;
height: 200px;
border: solid 20px red;
padding: 2px;
margin-bottom: 50px;
}
#box2{
width: 350px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
I didn't say anything. I just walked away.
You're the light, you're the night
You're the color of my blood
You're the cure, you're the pain
You're the only thing I wanna touch
Never knew that it could mean so much, so much
You're the fear, I don't care
'Cause I've never been so high
Follow me to the dark
Let me take you past our satellites
</div>
<div id="box2">
</div>
</body>
</html>
运行结果
5.2.3左边外边距 margin-left
5.2.4左边外边距 margin-left
左边外边距 margin-left、左边外边距 margin-left同上
六、盒子模型实例
要把页面布局好，需要注意：
- 页面由很多个盒子，从上往下堆积。外层的这些盒子是独立的。
- 我们布局的时候，外层的盒子最好不要设置浮动，也不要设置为绝对定位。
- 盒子一般不设置高度，它的高度一般由内容来撑高。
- 每个外层的盒子需要设置宽度（这个宽度叫版心），并且要将这些盒子在水平方向居中。
- 把每个模块外层的容器设置为相对定位。可以作为里面每个元素定位的参考。
- 把外层容器设置为相对定位之后，它也不会脱离标准流，不会影响布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
background-color: green;
width: 1200px;
margin: 0 auto;
margin-bottom: 4px;
}
#box1{
width: 200px;
height: 300px;
border:solid 20px red;
padding-left: 100px;
}
#box2{
width:100px;
height: 100px;
background-color: seagreen;
cursor: move;
/* display: none; *//*元素隐藏后，不占位置*/
/*visibility: hidden;*/ /*这种隐藏也会占着位置*/
/*opacity: 0;*/ /*通过设置不透明度去隐藏一个元素，元素隐藏后，位置还占着*/
}
#box3{
width:100px;
height: 100px;
background-color:darkgoldenrod;
cursor: move;
}
</style>
</head>
<body>
<div class="wrapper">
1
</div>
<div class="wrapper">
2
</div>
<div class="wrapper">
3
</div>
<div class="wrapper">
4
</div>
<div class="wrapper">
5
</div>
<div class="wrapper">
6
</div>
<div id="box1">
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
附加：如何隐藏一个元素？
七、如何隐藏一个元素
看上面的代码和注释就知道了！把注释去掉，拿去运行运行！希望可以帮到你哈哈哈
