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