1. 简介
- 元素在页面中显示成一个方块，类似一个盒子
- 把元素叫做盒子，设置对应的样式分别为
- 盒子的边框(border)
- 盒子内的内容和边框之间的间距(padding)
- 盒子与盒子之间的间距(margin)
盒子真实尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
2. 增大内容和边框的距离但不改变盒子的尺寸的方法
box-sizing：content-box | border-box
3. 少废话，上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
*{
width: 100px;
height: 100px;
}
.box1{
background: #a7ab86;
border: 10px solid;
padding: 20px;
}
.box2, .box3, .box4{
background: #b8d3ca;
}
.box3{
padding: 20px;
box-sizing: border-box; /* 改变间距但不改变盒子大小 */
}
.box4{
padding: 20px;
border: 10px solid red;
box-sizing: border-box;
}
