`
aiyou110
  • 浏览: 30056 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

关于css盒模型

    博客分类：
  • css
 
阅读更多

       什么是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>

 

 

 


 

 

  • 大小: 132.3 KB
  • 大小: 128.5 KB
分享到：
| 5种常见网页自动跳转方法
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics