4、盒子模型
4.1、什么是盒子模型
margin:外边距
padding:内边距
border:边框
4.2、边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin:0,常见操作*/
/* h1,ul,li,a,body {
margin:0;
padding:0;
text-decoration: none;
}*/
/*border:粗细,样式,颜色*/
#box {
width:300px;
border: 1px solid red;
}
h2 {
font-size: 16px;
background-color: #11800e;
line-height: 30px;
color: wheat;
}
form {
background: #24D4FD;
}
div:nth-of-type(1) input {
border: 3px solid black;
}
div:nth-of-type(2) input {
border: 4px dashed #80342a;
}
div:nth-of-type(3) input {
border: 5px solid #B721FF;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</form>
</div>
</div>
</body>
</html>
彩蛋
1.修改百度一下外边距
修改前
1)css:
2)盒子模型
修改后:
1)css
2)盒子模型: