CSS中box（盒模式）的分析

本篇用box的图例，对CSS中box（盒模式）的分析，为学习CSS的读者建立了清楚的模型。

W3C定义的盒模式如下:

width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时，IE6中box左右的margin会加倍
左面的inner的左面margin明显大于5px。
这时候，定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。

上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。

因此，外层css要定义overflow属性，内层最后要加上clear属性。
居中问题
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
#outer {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。

赞 (0)

相关推荐

  • CSS中box（盒模式）的分析

    CSS中box（盒模式）的分析

    本篇用box的图例,对CSS中box(盒模式)的分析,为学习CSS的读者建立了清楚的模型. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会填充padding和content部分.但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同.左右Margin加倍的问题当box为float时,IE6中box左右的margin会加倍 左面的inner的左面margin明显大于5px.这时候,定义

  • C#中的TemplateMethod模式问题分析

    一个真实的故事 大学的时候就开过一门课程,讲设计模式,可是大学生没什么编程实践经验,在大学里面听设计模式的感觉,就像听天书.听着都有道理,可是完全领会不到其中的奥妙,大抵原因就在于没有走过弯路,没有吃过设计不当的亏.古人云,"操千曲而后晓声,观千剑而后识器",诚不欺我. 博主在之前的某个项目中,设计出了一些工具类,像属性窗口,错误提示窗口,还有一个窗口管理类管理它们,当时我实现工具保存时候的代码是这样的: class WindowManager { private List<IT

  • Python编程中的反模式实例分析

    本文实例讲述了Python编程中的反模式.分享给大家供大家参考.具体分析如下: Python是时下最热门的编程语言之一了.简洁而富有表达力的语法,两三行代码往往就能解决十来行C代码才能解决的问题:丰富的标准库和第三方库,大大节约了开发时间,使它成为那些对性能没有严苛要求的开发任务的首选:强大而活跃的社区,齐全的文档,也使很多编程的初学者选择了它作为自己的第一门编程语言.甚至有国外的报道称,Python已经成为了美国顶尖大学里最受欢迎的编程入门教学语言. 要学好一门编程语言实属不易,在初学阶段,就

  • js正则表达式中的单行模式与多行模式实例分析

    本文实例分析了js正则表达式中的单行模式与多行模式.分享给大家供大家参考.具体如下: js正则表达式是不支持单行模式的.也就是说,不能把某段内容(有换行),采用模式修正符来处理,使整段内容当成一行来处理. 正则多行替换,需要添加/mg模式增强符. <html> <head> <script type="text/javascript"> //正则替换链接,链接有换行 function t1(){ var con = document.getEleme

  • php中注册器模式类用法实例分析

    本文实例讲述了php中注册器模式类用法.分享给大家供大家参考,具体如下: 注册器读写类 Registry.class.php <?php /** * 注册器读写类 */ class Registry extends ArrayObject { /** * Registry实例 * * @var object */ private static $_instance = null; /** * 取得Registry实例 * * @note 单件模式 * * @return object */ pu

  • 理解javascript中的MVC模式

    理解javascript中的MVC模式

    MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程序的业务逻辑相关的数据以及对数据处理的方法.模型有对数据直接访问的权利.模型不依赖 "视图" 和 "控制器", 也就是说 模型它不关心页面如何显示及如何被操作. 视图:视图层最主要的是监听模型层上的数据改变,并且实时的更新html页面.当然也包括一些事件的注册或者ajax请求操作(发布事件),都是放在视图

  • 深入理解Android中的建造者模式

    深入理解Android中的建造者模式

    前言 在Android开发过程中,我发现很多安卓源代码里应用了设计模式,比较常用的有适配器模式(各种adapter),建造者模式(Alert Dialog的构建)等等.虽然我们对大多数设计模式都有所了解,但是在应用设计模式的这个方面,感觉很多人在这方面有所不足.所以这篇文章我们一起深入的理解Android中的建造者模式. 建造者模式(Builder Pattern)也叫生成器模式,其定义如下: separate the construction of a complex object from

  • 深入解析C#设计模式编程中对建造者模式的运用

    深入解析C#设计模式编程中对建造者模式的运用

    示例 我们先来以这样一个场景引入:  在电脑城装机总有这样的经历.我们到了店里,先会有一个销售人员来询问你希望装的机器是怎么样的配置,他会给你一些建议,最终会形成一张装机单.和客户确定了装机配置以后,他会把这张单字交给提货的人,由他来准备这些配件,准备完成后交给装机技术人员.技术人员会把这些配件装成一个整机交给客户. 不管是什么电脑,它总是由CPU.内存.主板.硬盘以及显卡等部件构成的,并且装机的过程总是固定的: 把主板固定在机箱中 把CPU安装到主板上 把内存安装到主板上 把硬盘连接到主板上

  • CSS的inherit与auto使用分析

    通常是一个很小的数值,经过层层放大歪曲后,整个布局就走形了.CSS是一门很简单的语言,易学易用,但也最容易出垃圾代码.这是没有深入研究这门语言所致.本人认为,CSS是由以下三大块构成的:默认值,继承系统与加权系统.默认值,也就是浏览器在用户没有设置属性的情况下,默认指定的属性.CSS框架基本都有一个叫reset.css 的文件,就是对其进行重设,消除各浏览器的差异的.继承系统就是下面要重点讨论的东西.加权系统,也就是优先级的问题,不在本文的讨论范畴,不说了.另,这三个东西都面临着IE Bug的侵

  • CSS中Float（浮动）相关技巧文章

    Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的

随机推荐