4.盒子模型
4.1、什么是盒子模型
margin:外边距
padding:内边距
border:边框
4.2、边框
1、边框的粗细
2、边框的样式
3、边框的颜色
4.3、外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用：居中元素-->
<style>
#box {
width: 300px;
border: 1px solid red;
padding: 0;
margin: 0 auto;
}
/*
顺时针旋转
margin:0; 上下左右
margin:0 1px; 上下和左右
margin:0 0 0 0; 和和和
*/
h2{
font-size:16px;
background-color: #3cbda6;
margin:0;
}
form{
background: #3cbda6;
}
input{
border:1px solid black;
}
div:nth-of-type(1){
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="表单提交的地址">
<div>
<span>用户:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子计算方式：元素有多大
margin+border+padding+内容宽度
4.4、圆角边框
border-radius：x x x x
左上 右上 右下 左下
border-radius:x x
主对角线 副对角线
border-radius:x
四个角