关于css盒模型

aiyou110

浏览: 30874 次
性别:
来自: 北京

最近访客更多访客>>

rainnguy

diggywang

ln12341234

MarineQiu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。其中最重要的是css的content其他的几个元素都是围绕着内容的。

css的盒模型就好比是包装好的包裹。content就是你购买好的东西，border就是盒子本身。为了保证物品的安全，增加的缓冲带就是padding。边界就好比说，包裹与包裹之间的距离。

这里还要介绍一下，上图是一个符合W3C标准的盒模型，content的宽和高就是元素本身的宽和高。大部分的浏览器都符合这样的一个标准，IE却有着不一样的处理方式，如下图：

那么怎么解决这种跨浏览器之间的兼容性呢？

其实很简单，只需要加上DOCTYPE的声明就可以，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。在文档部分声明了使用的是W3C标准，即使在ie下，也会执行W3C的标准。

css盒模型的好处：

1、实现结构和表现的分离。举个例子来说明这个问题吧：

<style type="text/css">
<!--
      #photoList img{height:80;width:100;margin:5px auto;}
-->
</style> 
<div id="photoList">
<img src="01.jpg" /><img src="02.jpg" />
<img src="03.jpg" /><img src="04.jpg" />
<img src="05.jpg" />
</div>

如果不使用css的代码进行操作的话：

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />

通过这个例子可以明显感受到css带来的好处，这样可以减少body的压力。同时会减少代码量，压缩那些重复的代码。

2、css的盒模型使得html代码更加的语义化

举一个典型的页面排版的例子：就是把整个页面切分成几个较大的盒子，然后再将其他的盒子放入这些盒子中。保证页面整个布局的整齐性，也方便代码的管理维护。

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

查看图片附件

分享到：

javascript 正则表达式笔记 | 5种常见网页自动跳转方法

2013-04-19 14:12
浏览 945
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论