写给自己：笔记在代码注释中，把上面的图案记下来，才能学好盒子模型。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS盒子模型</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #00FFFF;
/* 设置border值 */
/* border-top-color: crimson;
/* border-top-width: 10px; */
/* 虚线：dashed；实线：solid；点线：dotted */
/* border-top-style: ; */
/* 简化如下 */
/*
border-top:10px solid darkblue;
border-left: 10px dashed cornflowerblue;
border-right:10px dotted darkmagenta;
border-bottom: 10px solid greenyellow; */
/* 再次简化如下 */
border: 10px solid cornflowerblue;
/* 设置pading值 */
/* padding-top: 20px;
padding-left: 40px;
padding-right: 80px;
padding-bottom: 100px;
*/
/* pading简化如下 */
/* pading设置从top顺时针开始 */
/* 设置四个值 ：分别是上面 右面 下面 左面*/
/* padding:20px 80px 100px 40px; */
/* 设置三个值 ：分别时上面 左右 下面 */
/* padding: 20px 100px 100px; */
/* 设置两个值 ：分别设置上下 左右 */
/* padding: 100px 80px; */
/* 设置一个值：直接设置四个边 */
padding: 20px;
/* 设置margin :和padding的设置方法是一样的*/
margin: 200px;
}
</style>
</head>
<body>
<div class="box">
today is good today is good today is good
today is good today is good today is good
today is good today is good today is good
today is good today is good today is good
</div>
</body>
</html>
``
