层叠样式表 CSS 深入学习(三) Box Model 盒模型

我个人认为,彻底深入的学习 CSS 需要非常清晰透彻的理解 CSS 的四大核心要点即: 盒模型、文档流、浮动、定位。为防止一些同学在个人理解时可能走的一些弯路,这里将分别从这几个核心要点谈起,今天首先需要讲述的便是 CSS 的首要核心要点:CSS Box Model 盒模型。

首先我们来看 CSS 盒模型的两个示意图(点击小图查看大图):

css-box-model

层叠样式表盒模型主要由这些元素组成:margin(边界、外补丁)border(边框)padding(填充、内补丁)height(高)width(宽)从上面的示意图也很容易看出这些元素及属性分别具体的含义。

值得说明的是如果你的页面没有做 DOCTYPE 声明时,标准浏览器将使用标准盒模型解析元素盒子,而 IE 浏览器将使用 IE 的盒模型解析元素盒子,这两种盒模型最大的区别就是对于盒子 width 和 height 的属性值定义:另外对于标准盒模型来说 height 的值即是内容 content 的高度 width 的值即是 content 的宽度,而对于微软 IE 浏览器的盒模型来说 width 的值将包括 border padding 及 content 的宽度总和,高 height 的值也同样包括了 border padding 及 content 的高度总和。

解决这种问题的方法就是在网页文件的头部使用 DOCTYPE 声明的,目前建议采用 XHTML 宽松型标准,即在网页源码中 <html> 标签之前加入以下声明:






这段 DOCTYPE 将告诉浏览器使用标准的 W3C 盒模型来渲染网页代码,如果少了这句麻烦就大了,就等着不停的调整浏览器兼容性吧。现在了解了盒模型几个属性直接的关系之后,想要任意调整网页里面各个盒子的大小及间距就变得非常容易了。其中 margin padding border 均可以在属性名称后面添加 -top -right -bottom -left 等值来分别指定不同方向上的数值,但我个人建议使用缩写即“属性:上 右 下 左; 属性:上 左右 下; 属性:上下 左右;”几种缩写方法,具体如何缩写不在今天讨论范围内。

另外一个需要注意的盒模型兼容问题就是关于背景(BackGround)其中 IE6 和 IE7 的背景属性并不能包括边框(Border)部分,而 IE8 及其他标准浏览器的背景部分则包含边框部分,这点问题需要在边框(border)和背景(background)同时出现的时候特别注意一下。

为了你的页面代码能足够强壮,最好还是加上这句 DOCTYPE 声明,以告诉浏览器使用标准的盒模型来渲染网页代码,但需要补充的是该 DOCTYPE 仅支持 IE6 及更高版本的 IE 浏览器,对于 IE5 无论是否声明 DOCTYPE 浏览器将都是以 IE 盒模型来渲染页面的,但考虑到 IE5 及旧版 IE 的市场份额可以忽略,本文将不考虑此种情况,如果实在需要兼容 IE5 浏览器,这里建议在同一个盒子上不要同时存在 padding border 和 width height 的属性值,可在外层或内层再嵌套一个盒子来分别做出 padding border 和 width height 的值。

层叠样式表 CSS 深入学习(三) Box Model 盒模型》有1个想法

  1. joda

    这个说的很实用哦!

    anyLiv:我昨天有看你的站,做的不错哦!很漂亮!

评论已关闭。