什么是盒子模型
margin: 外边距
padding: 内边距
border: 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body总有一个默认的外边距 margin,所以有需要就要先设置为0 */
/*body{*/
/* !* *!*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/* border: 粗细 样式(实线虚线) 颜色 */
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto; /* 外边距的妙用 居中元素 */
}
</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>
https://www.bilibili.com/video/BV1YJ411a7dy?p=14
https://www.bilibili.com/video/BV1YJ411a7dy?p=15