一、什么是盒子模型
CSS盒子模型：CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。
它包括以下几个部分：
- margin：外边距
- border：边框
- padding：内边距
二、边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*border：粗细、样式、颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background: darkgreen;
line-height: 30px;
color: white;
}
form{
background: darkgreen;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:3px dashed pink;
}
div:nth-of-type(3) input{
border:1px dashed purple;
}
</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+border+padding+内容大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*border：粗细、样式、颜色*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto ;
}
h2{
font-size: 16px;
background: darkgreen;
line-height: 30px;
color: white;
margin:0 1px 2px 3px;
}
form{
background: darkgreen;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</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>四、圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
左上 右上 右下 左下 ，顺时针
圆圈：圆角 = 半径
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 25px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>五、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 10px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>