1、CSS的盒子模型
- height：高度
- width：宽度
- padding：内边距
- margin：外边距
- border：边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
{
margin: ;
padding: ;
}
.box{
width: px;
height: px;
padding: px;
border: px solid #54acf3;
margin: px;
color: #fff;
background: #2196F3;
}
</style>
</head>
<body>
<div class="box">
在此可以填充内容
</div>
</body>
</html>
显示结果如下：
通过改变width、height、padding、margin的值改变显示结果，还可以设置margin-left、margin-right等值，每一个值下面都是一串的设置，通过调试可以发现整个图形的现实是有上、下、左、右不同的块组成的，可以对不同的块进行剪切设置，使用起来比较方便。
调试情况如下：
可以清晰的看到调试出来的盒子模型每个值的设置情况。
CSS可以用ie、和google浏览器进行预览和调试，但是调试的过程中chrome浏览器的颜色可以在图中的小方块处直接选择，但是ie浏览器需要手动设置，而且用chrome设置其他值时按回车可以直接进入下一行，但是ie浏览器不能直接回车进入下一行，对于初学者来说，用chrome浏览器进行调试比较方便。前端的学习需要在不同的浏览器进行调试，稍微熟练的话可以多加练习。