15.内外边距及div居中
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
</form>
</div>
</body>
</html>
css:
/*body总有一个默认的外边距margin:0 常见操作*/
/*eg:
h1,ul,li,a,body{
margin:0;
padding:0;
text-decoration:none;
}
*/
/*margin border padding :上右下左*/
#box{
width: 400px;
margin: 20px auto;
border-top: 2px solid red;
border-bottom:4px solid red ;
border-left: 3px solid red;
border-right: 5px solid red;
padding: 2px 3px 4px 5px;
}
h2{
font-size: 16px;
background-color: #53c48b;
line-height: 32px;
margin: 0;
}
form{
background: #9dcf3f;
}
/*border:粗细 颜色 样式*/
div:nth-of-type(1) input{
border: 3px red solid;
}
div:nth-of-type(2) input{
border: 3px red solid;
}
运行结果: