<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型练习</title><style>.box {width: 200px;height: 200px;background-color: blueviolet;/* 实线边框 *//* border-style: solid; *//* 虚线边框 *//* border-style: dashed; *//* 点线边框 *//* border-style: dotted; *//* 边框宽度 *//* border-width: 10px; *//* 边框颜色 *//* border-color: black; *//* 边框圆角 */border-radius: 10px;/* 取消四个边框 *//* border: none; *//* 上边框 *//* border-top: 10px solid red; *//* 左边框 *//* border-left: 10px solid red; *//* 右边框 *//* border-right: 10px solid red; *//* 下边框 *//* border-bottom: 10px solid red; *//* 简单写法 *//* border: 10px solid red; *//* 上下左右都是20像素内边距 *//* padding: 20px; *//* 上下是10,左右是20的内边距 *//* padding: 10px 20px; *//* 上10,左右20,下30 *//* padding: 10px 20px 30px; *//* 顺时针 10 20 30 40 *//* padding: 10px 20px 30px 40px; *//* 让块级盒子水平居中对齐 *//* margin-left: auto;margin-right: auto; *//* margin: 0 auto; *//* margin: auto; *//* 让块级盒子垂直居中对齐 *//* margin-top: auto;margin-bottom: auto; *//* 文字 行内元素 行内块元素水平居中 *//* text-align: center; *//* 块级盒子水平居中 左右margin改为auto *//* margin: 10px auto; */}</style>
</head>
<body><div class="box">哈哈哈哈</div></body>
</html>