如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之CSS样式中的盒子模型以及其四个属性应用

网站建设之CSS样式中的盒子模型以及其四个属性应用

时间:2017/8/29 20:40:47 标签:

SS中有个重要的模型就是盒子模型,它不是一个真实的盒子,而是一种用在网页设计领域的思维模型,通常情况下,这个盒子有外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性,依次由外往内。这里我们在网上搜索了一个典型的示意图供大家参照,如下图所示:
  
每个方向都有各自的属性值,图示里面的属性值都是一样的,所以看上去宽度都是一样的,方便理解即可,在实际应用中,div的高度和宽度是指content的宽度和高度,这个是默认的,不需要单独去定义,另外3个属性是需要逐个去定义的,理解的时候,我们可以看成是4个不同大小的盒子按照大小顺序依次装在里面,当然,是小的装在大的里面。这么理解有个好处就是计算实际盒子占了网页多大区域的时候不会出错,比如,整个大盒子的高度应该4个高度之和,height+padding(上下)+border(上下)+margin(上下),大盒子的宽度应该是width+padding(左右)+border(左右)+margin(左右),而且这里是padding、border和margin都是有两条边的,实际计算的时候都要加上去。

为了进一步加深理解,这里举一个盒子模型的案例,完整测试代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
width:300px;
height:150px;
background-color:#FFFF00;
padding:15px;
border:#FF0000 solid 30px;
margin:45px;}

</style>
</head>

<body>
<div>
0513web DEMO
</div>
</body>
</html>
  
案例中的div被限定在宽度300px,高度150px的范围,内边距,边框,外边距依次为15px,30px,45px,而且依次标注了出来,这样理解就非常清晰,大盒子套小盒子,一层套一层,用最原始的思维去理解,今后在应用中就得心应手,如果大家对盒子模型有什么疑问,都可以跟帖留言。

上一篇:网站建设之用div+css创建“0513web”的logo和导航部分
下一篇:没有资料