CSS——盒子模型及内外边距
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
什么是盒子模型（Box Model）
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
Border(边框)的使用
边框的属性
-
边框的粗细
-
边框的样式
-
边框的样色
border:2px solid red;
/*粗细，(solid)实线，颜色*/
/*(dashed)虚线*/
边框的测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框的使用</title>
<style>
#box{
width:300px;
border:2px solid red;
}
h2{
font-size:16px;
background-color:white;
color:red;
}
form{
background:green;
}
div:nth-of-type(1) input{
border:2px solid #FF0011
}
div:nth-of-type(2) input{
border:2px solid #cc00FF
}
div:nth-of-type(3) input{
border:2px dashed #FF00FF /*dashed虚线*/
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
边框的效果图（三个不同样式的边框）
外边距和内边距
Margin(外边距)的属性
Margin-top 上内边距
Margin-bottom 下内边距
Margin-left 左内边距
Margin-right 右内边距
margin的作用：让元素居中
居中的要求：1.块元素2. 有固定的宽度
Padding(内边距)的属性
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
/*padding:0; 内边距的上下左右都为0
padding:1,2;内边距的上下为1，左右为2
padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序
外边距同理
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距</title>
<style>
/*初始化操作*/
body,h2{
/*body总有一个默认的外边距margin=8
在初始化的时候通常将body，h1，ul，li，a等标签的margin设置为0
*/
margin:0;
padding:0;
/*padding:0; 内边距的上下左右都为0
padding:1,2;内边距的上下为1，左右为2
padding:0，1,2,3;内边距的上，左，下，右为0,1,2，3，按顺时针排序
*/
}
#box{
width:300px;
border:2px solid red;
margin:0 auto; /*margin的作用：让元素居中*/
}
h2{
font-size:16px;
background-color:green;
color:red;
}
form{
background:green;
}
input{
border:1px solid black;/*给三个文本框设置样式*/
}
div:nth-of-type(1){
padding:20px 10px;/*设置第一个文本的内边距*/
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
效果图
补充：盒子模型的长度=外边距+边框的长度+内边距+内容的长度