<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
/* 5、元素边距样式初始化 */
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
/* 1、边距border */
/* border属性:border-width,border-style,border-color */
border: 1px solid black;
/* 2、margin外边距 */
/* margin四个值：上右下左，两个值：上下左右 */
margin: 100px 50px 100px 50px;
margin: 100px 50px;
/* 3、padding内边距，跟margin设置一样 */
padding: 100px 50px 100px 50px;
padding: 100px 50px;
/* 4、box-sizing设置盒子显示形式 */
/* 默认情况是content-box,元素实际宽高为：(width+padding+border) */
/* 另一个border-box，元素实际宽高为：width */
box-sizing: content-box;
/* 6、容器垂直居中 */
padding: 100px;
margin: 0px auto;
}
.box ul li {
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<h3>列表</h3>
<ul>
<li>用户名</li>
<li>密码</li>
<li>状态</li>
</ul>
</div>
</body>
</html>
