通过盒模型，了解内边距、边框等概念
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>一切可见元素都是盒子</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: lightgreen;
/*设置内边距*/
/*padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;*/
/*简写*/
padding: 10px 20px 30px 40px;
/*如果左右边距都是30px，上下边距分别为10px 40px*/
padding: 10px 30px 40px;
/*如果左右边距为30px 上下为40px*/
padding: 40px 30px;
/*设置边框 上边框*/
/*border-top: 10px;
border-top-style: solid;
border-top-color: red;*/
/*简写*/
border-top: 10px solid red;
/*设置边框 右边框*/
/*border-right: 10px;
border-right-style: dashed;
border-right-color: blue;*/
/*简写*/
border-right: 10px dashed blue;
/*设置边框 下边框*/
/*border-bottom: 10px;
border-bottom-style: dotted;
border-bottom-color: yellow;*/
/*简写*/
border-bottom: 10px dotted yellow;
/*设置边框 左边框*/
/*border-left: 10px;
border-left-style: double;
border-left-color: pink;*/
/*简写*/
border-left: 10px double pink;
/*如果边框都一样*/
border: 10px solid red;
}
.box2{
height: inherit; /*继承父级*/
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
以上代码涉及知识点总结：
一.内边距padding,按上右下左设置.如padding:10px 20px 30px 40px;
二.如果padding左右为30px，上为10px，下为40px，写法padding:10px 30px 40px;
三.如果padding左右为30px，上下为40px，写法padding:30px 40px;
四.边框border写法border:大小 样式 颜色;如border:10px solid red;
五.继承父级:inherit