目录
css盒子模型
有四个属性
| 属性 | 描述 |
|---|---|
| margin | 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 |
| padding | 用于控制内容与边框之间的距离。 |
| Border | 围绕在内边距和内容外的边框。 |
| Content | 盒子的内容，显示文本和图像。 |
如图
margin属性
用于控制将元素与元素之间的距离，达到视觉上的效果
首先是没有修改前的情况
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 200px;
width: 200px;
border: black 1px solid
}
.b{
height: 200px;
width: 200px;
border: blue 1px solid
}
</style>
</head>
<body>
<div class="a">123</div>
<div class="b">456</div>
</body>
</html>
如图
然后进行修改
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 10px;
}
.a{
height: 200px;
width: 200px;
border: black 1px solid
}
.b{
height: 200px;
width: 200px;
border: blue 1px solid
}
</style>
</head>
<body>
<div class="a">123</div>
<div class="b">456</div>
</body>
</html>
效果如下
然后就是margin的其它用法
如何用margin来控制其上下左右的距离
| 属性 | 描述 |
|---|---|
| margin-top | 用于设置上边框 |
| margin-right | 用于设置右边框 |
| margin-bottom | 用于设置下边框 |
| margin-left | 用于设置左边框 |
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 200px;
width: 200px;
border: black 1px solid;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
.b{
height: 200px;
width: 200px;
border: blue 1px solid
}
</style>
</head>
<body>
<div class="a">123</div>
<div class="b">456</div>
</body>
</html>
然后就是css盒子的显示
然后就是效果图
margin的缩写
是按照一个顺序来的，上右下左(顺时针)。
缩写格式如下
margin: 5px 10px 15px 20px;
第一5px代表上边框距离为5px，第二个10px代表右边框距离为10px，第三个15px代表下边框距离为15px，第四个20px代表左边框距离为20px。
实例代码如下
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 200px;
width: 200px;
border: black 1px solid;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}
.b{
height: 200px;
width: 200px;
border: blue 1px solid
}
</style>
</head>
<body>
<div class="a">123</div>
<div class="b">456</div>
</body>
</html>
效果如图
常见的一种情况居中：
<!--居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
height: 200px;
width: 200px;
border: black 1px solid;
margin: 0 auto
}
</style>
</head>
<body>
<div class="a">123</div>
</body>
</html>
效果如图
padding属性
用于控制内容与边框之间的距离（就是在两者之间进行填充），也可以理解为将内容在边框内的位置进行移动。
首先它如何进行上右下左的移动
| 属性 | 描述 |
|---|---|
| padding-top | 用于设置元素内容区上方的内边距 |
| padding-right | 用于设置元素内容区右侧的内边距 |
| padding-bottom | 用于设置元素内容区下方的内边距 |
| padding-left | 用于设置元素内容区左侧的内边距 |
下面就具体实现一下这个
现在我有一个需求就是将内容在边框的正中央显示
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 400px;
border: orange solid 2px;
padding-top: 295px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 339px;
}
</style>
</head>
<body>
<div>居中显示</div>
</body>
</html>
效果如图
但是注意一下虽然我的要求实现了但是我的边框却变大了，具体原因是此属性是起到填充的作用，这个缘故边框才变大了这么多。
然后就是简写的方式
padding: 5px 10px 15px 20px;
第一个5表示给上方的内边距填充5个像素，第二个10表示给右侧的内边距填充10个像素，第三个15表示给下方的内边距填充15个像素，第四个20表示给左侧的内边距填充20个像素。
实例代码
<!--简写的情况-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 400px;
border: orange solid 2px;
padding: 295px 10px 10px 339px;
}
</style>
</head>
<body>
<div>居中显示</div>
</body>
</html>
效果如下