DIV+CSS两种盒子模型(W3C盒子与IE盒子)
2015-06-01 10:46
609 查看
在辨析两种盒子模型之前,先简单说明一下什么叫盒子模型。
原理:
先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
特点:
每个盒子都有:边界、边框、填充、内容四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。(以上原理与特点摘于百度)
下面这幅图里面,分别是W3C盒子和IE盒子的模型:
大家肯定都能发现,这两种模型整体来说非常的相似。由内到外都是content,padding,border,margin。但是仔细看的话,虚线延长出来的部分,分别标注了height和width,但是在W3C中,虚线包围的部分只有content,而在IE中,虚线包围的部分是content+padding+border。这是最直观的不同,同时这也就是这两种模型的最大不同点。
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding
用一个例子来实现一下W3C盒子模型:
<html>
<head>
<title>盒子模型</title>
<style>
#box{
width:100px;
height:100px;
padding:40px;
border:solid 40px green;
margin:20px;
}
div{
font-size:30px;
color:red;
background-color:gray;
text-align:center;
}
</style>
</head>
<body>
<div id="box">
W3C盒子模型
</div>
</body>
</html>
复制代码
运行结果:
这张图只能看到内容和边框。看不到具体的分界线,也就不知道填充(padding)和内容(content)具体的排布。
这里我就顺便介绍一中调试工具,firefox浏览器里面的firebug,对于平时调试网页布局各方面的有很大的帮助。
调试界面就是这样了。鼠标选中<div>标签,图像就发生变化了,整体布局就很清晰了。(如下图)
这就很清晰了吧。同时也说明了W3C盒子包含了content,padding,border三部分。
IE盒子的就不写了,有需要的同学可以自己试试。目前大多的网页布局都是用W3C盒子,它的兼容性非常好,所以是不二之选。
原理:
先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。
特点:
每个盒子都有:边界、边框、填充、内容四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。(以上原理与特点摘于百度)
下面这幅图里面,分别是W3C盒子和IE盒子的模型:
大家肯定都能发现,这两种模型整体来说非常的相似。由内到外都是content,padding,border,margin。但是仔细看的话,虚线延长出来的部分,分别标注了height和width,但是在W3C中,虚线包围的部分只有content,而在IE中,虚线包围的部分是content+padding+border。这是最直观的不同,同时这也就是这两种模型的最大不同点。
W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分
IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 padding
用一个例子来实现一下W3C盒子模型:
<html>
<head>
<title>盒子模型</title>
<style>
#box{
width:100px;
height:100px;
padding:40px;
border:solid 40px green;
margin:20px;
}
div{
font-size:30px;
color:red;
background-color:gray;
text-align:center;
}
</style>
</head>
<body>
<div id="box">
W3C盒子模型
</div>
</body>
</html>
复制代码
运行结果:
这张图只能看到内容和边框。看不到具体的分界线,也就不知道填充(padding)和内容(content)具体的排布。
这里我就顺便介绍一中调试工具,firefox浏览器里面的firebug,对于平时调试网页布局各方面的有很大的帮助。
调试界面就是这样了。鼠标选中<div>标签,图像就发生变化了,整体布局就很清晰了。(如下图)
这就很清晰了吧。同时也说明了W3C盒子包含了content,padding,border三部分。
IE盒子的就不写了,有需要的同学可以自己试试。目前大多的网页布局都是用W3C盒子,它的兼容性非常好,所以是不二之选。
相关文章推荐
- CSS3 overflow属性默认为visible,父元素高度为0,如果子元素有内容高度不为0也会显示,需将overflow设为hidden
- css :before :after
- CSS两列布局
- CSS clip:rect矩形剪裁功能及一些应用介绍
- css hack处理
- css 伪类/元素
- CSS代码让Table产生固定表头
- 做带缩略图的轮播切换涉及到的知识点——水平垂直居中、css样式重置、滤镜背景透明效果等
- 高性能 CSS3 动画
- css3边框阴影效果
- CSS盒模型简单用法
- div 布局 (css)
- CSS+DIV网页样式与布局
- CSS3的filter
- (转)CSS字体大小: em与px、pt、百分比之间的对比
- 学点css之经验总结篇章
- HTMLl和CSS基本知识点
- QGraphicsView框架容易忽视的坐标问题-“画布”QgraphicsScene到底放在了哪儿?
- CSS定位
- css clear用法