目录
一、盒子模型的几个关键词
内容(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>
附加:如何隐藏一个元素?
七、如何隐藏一个元素
看上面的代码和注释就知道了!把注释去掉,拿去运行运行!希望可以帮到你哈哈哈