盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*.class_list{*/
/*display: block;*/
/*width: 90%;*/
/*height: 300px;*/
/*margin: 200px auto;*/
/*background-color: aqua;*/
/*}*/
/*.class_fout{*/
/*font-size: 25px;*/
/*font: 25px "黑体";*/
/*line-height: 300px;*/
/*text-align: center;*/
/*}*/
.*{
padding: ;
margin: ;
}
.box{
width: 200px;
height: 200px;
padding: 100px;
/*border: 100px solid red;*/
border: 100px dotted red;
background-color: #;
} </style>
</head>
<body>
<!--<div class="class_list class_fout">这是一个测试界面</div>--> <div class="box">jfdhsakjdfhaskjdfhsakjdhskj</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
height: 200px;
width: 200px;
background-color: green;
/*设置上边框的宽度*/
border-top-width: 20px;
/*设置上边框的颜色*/
border-top-color: red;
/*设置上边框的样式*/ /*border-top-style: double;*/
/*border-top-style: solid;*/
border-top-style: dotted; /*设置下边框*/
border-bottom-color: yellowgreen;
border-bottom-width: 5px;
border-bottom-style: solid;
/*边框的样式可以合写*/
/*border-left: 宽度,样式,颜色;*/
border-left: 5px solid blue; 可以用一行设置上下左右的所有的样式 }
.box1{
background-color: #;
height: 200px;
width: 200px;
border: 5px solid blue;
} </style>
</head>
<body>
<div class="box"></div> <div class="box1"></div>
</body>
</html>