盒子模型
什么是盒子
margin : 外边框
border : 边框
padding : 内边框
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../盒子模型/style.css">
</head>
<body>
<div id="box">
<h2>用户登录</h2>
<form action="" method="post">
<div>
<span>用户名</span>
<input type="text" name="user" placeholder="用户名">
</div>
<div>
<span>密码</span>
<input type="password" name="pwd" placeholder="请输入密码">
</div>
</form>
</div>
</body>
</html>
css:
/*body总有一个默认的外边框margin : 0,定义初始值 */
body h2{
margin: 0;
padding: 0;
}
#box{
width: 250px;
height: 65px;
border: 2px solid seagreen;
}
form{
background: burlywood;
}
h2{
font-size: 16px;
color: #ce3939;
}
div:nth-of-type(1) input{
border: 1px solid #000000;
}
div:nth-of-type(2) input{
border: 1px dashed #000000;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。