在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
所有的元素可以说是盒子模型,但是针对不同的元素,盒子模型中对应的属性在元素设置相应值时的显示效果不一定相同,接下来针对盒子模型中的padding属性,我们来看下span,div,p,h,a这四种元素在设置相同的padding值时的显示效果:
html原码
<html>
<head>
<meta charset="UTF-8">
<title>不同元素的padding效果测试</title>
<link rel="stylesheet" type="text/css" href="test_.css"/>
</head>
<body>
<div id="box">
<div class="bin">
<span class="span">这是span的padding测试</span>
</div>
<div class="bin">
<div class="div">这是div的padding测试</div>
</div>
<div class="bin">
<p class="p">这是p的padding测试</p>
</div>
<div class="bin">
<h4 class="h">这是h的padding测试</div>
<div class="bin">
<a class="a" href="#">这是a的padding测试</a>
</div>
</div>
</body>
</html>
css原码
#box {
border:2px solid #FF0000;
}
#box .bin {
padding: 0px 0px;
border: 3px solid #FFA500;
text-align: center;
margin: 50px 0px;
}
#box .bin .span{
padding: 20px 20px;
background: #00BFFF;
}
#box .bin .div{
padding: 20px 20px;
background: #00BFFF;
}
#box .bin .p{
padding: 20px 20px;
background: #00BFFF;
}
#box .bin .h{
padding: 20px 20px;
background: #00BFFF;
}
#box .bin .a{
padding: 20px 20px;
background: #00BFFF;
}
为了更好体现padding属性对不同字段内容展示的影响,所有的元素都放到一个div区块中,并对其中的内容进行了居中,这样在设置元素的padding属性值时,效果更直观和便于比较;
显示结果:
得出的结论:
1.span中padding属性值并不能影响span元素的所占区间大小,但是padding作为元素盒子模型边界内的效果,依然能够设置与span相同的背景效果,并且该效果能够覆盖其他元素的显示效果;
2.div作为区域块,padding的属性值能够非常直接的显示到div区块的平面布局上,padding的属性值能够影响div的所占区间大小;
3.p作为段落标签,padding的属性值同样能够直接影响到p段落的平面布局,padding的属性值能够影响p的所占空间大小;
4.作为标题标签,padding的属性值同样能够直接影响到h段落的平面布局,padding的属性值能够影响h的所占空间大小;
5.的显示效果同span效果类似,padding属性值并不能影响a元素的所占区间大小,但作为元素盒子模型边界内的效果,依然能够设置与a相同的背景效果,并且该效果能够覆盖其他元素的显示效果;
行内元素诸如span,a这些元素在盒子模型padding效果的演示中,体现出padding属性值并不能对它们真正的空间大小产生影响,但是针对显示效果依然能够体现出来,也就是显示效果跟元素平面空间排版并不是一致的,我们在进行html页面的设计过程中,要充分意识到这一点,更好的加以利用,设计出更优美的页面.