从CSS角度来看,页面上每个元素都是一个盒子,不管是块元素还是内敛元素等。而这个盒子由四个部分组成。内容区,补白,边框,边界,下面来介绍下这四种元素。
1 内容
每个元素都是以某些内容开始的,比如文本或图像,这部分内容被放置在一个大小正好能包含它的盒子里。
2 补白(padding)
任何盒子在内容区周围都能有一层补白。补白是可选的,所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白,补白是透明的,本身没有颜色或修饰。
3 边框(border)
元素周围可以有边框,并且是可选的。边框包围着补白,因为他是围绕内容的一条线,所以视觉上将内容和同一页上的一起元素分隔开来。边框可以设置宽度,颜色和样式。
4 边界(margin)
边界也是可选的,包围着边框。有了边界,就可以在同一页上的元素之间添加空间。如果两个盒子相邻,边界就相当于他们之间的空间。跟补白一样,边界也是透明的,本身没有
颜色或修饰。
图示