作家
登录

CSS网页布局的核心内容:CSS盒模型

作者: 来源:www.28hudong.com 2012-11-19 22:38:05 阅读 我要评论

本节的内容非常重要,因为盒模型是CSS定位布局的核心内容。从前面章节中,读者学习了布局网页基本方法,只需利用p元素和列表元素,即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作,读者并不理解布局的原理,常常在布局页面的过程中遇到无法理解的问题 CSS盒模型 本节的内容非常重要,因为盒模型是CSS定位布局的核心内容。从前面章节中,读者学习了布局网页基本方法,只需利用p元素和列表元素,即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作,读者并不理解布局的原理,常常在布局页面的过程中遇到无法理解的问题,需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后,读者将拥有较完善的布局观,基本可做到在代码编写前就“胸有成竹”。 11.3.1 什么是CSS盒模型 XHTML中大部分的元素(特别是块状元素)都可以看做一个盒子,而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的,当某个块状元素被CSS设置了浮动属性,这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题,而这么多盒子摆在一起,最需要关注的是盒子尺寸计算、是否流动等要素。 为什么要把XHTML元素作为盒模型来研究呢?因为XHTML元素的特性和一个盒子非常相似,如图11.18所示。 图11.18 盒模型示意图 大多数XHTML元素的结构都类似于图11.18所示,除了包含的内容(文本或图片)外,还有内边距、边框和外边距一层层的包裹。读者在布局网页和定位XHTML元素时要充分地考虑到这些要素,才可以更自如地摆弄这些盒子。 外边距属性即CSS的margin属性,CSS中可拆分为margin-top(顶部外边距)、margin-bottom(底部外边距)、margin-left(左边外边距)和margin-right(右边外边距)。CSS的边框属性(border)和内边距属性(padding)同样可拆分为4边。在Web标准中,CSS的width属性即为盒子所包含内容的宽度,而整个盒子的实际宽度即为: 盒子宽度=padding-left border-left margin-left width padding-right border- right margin-right 相应地,CSS的height属性即为盒子所包含内容的高度,而整个盒子的实际高度即为: 盒子高度=margin-top border-top padding-top height padding-bottom border -bottom margin-bottom 11.3.2 外边距的控制 在CSS中,margin属性可以统一设置,也可以上下左右分开设置。在D:web目录下创建网页文件(XHTML1.0),命名为box_margin.htm,编写box_margin.htm文件代码如代码11.17所示。 代码11.17 外边距设置:box_margin.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>外边距设置</title> <style type="text/css"> *{margin: 0px;} #all{width:400px; height:300px; margin:0px auto; background-color:#ccc;} #a,#b,#c,#d,#e{width:150px; height:50px; text-align:center; line-height:50px; background-color:#fff;} #a{margin-left:5px; margin-bottom:20px;} #b{margin-left:5px; margin-right:5px; margin-top:6px; float:left;} #c{margin-bottom:5px;} #e{margin-left:5px; margin-top:15px;} </style> </head> <body> <p id="all"> <p id="a">a盒子</p> <p id="b">b盒子</p> <p id="c">c盒子</p> <p id="d">d盒子</p> <p id="e">e盒子</p> </p> </body> </html> 为了更方便看到p的表现,笔者给外部p设置了浅灰色背景色,并给内部p设置了白色背景色。在浏览器地址栏输入http://localhost/box_margin.htm,浏览效果如图11.19所示。这个示例非常典型,特别是b盒子、c盒子和d盒子之间的关系,笔者作关系图如图11.20所示。 图11.19 外边距设置 图11.20 外边距关系图 由于b盒子设置了向左浮动,所以紧随其后的c盒子自然“流”上来,和b盒子并列同一行,如图11.20所示,b盒子的高度为: height margin-top=56(像素) 而c盒子的高度为: height margin-bottom=55(像素) 可见,在这一行中c盒子下面留有1像素的空隙,正是d盒子利用这1像素的空间“流”上来,所以b盒子、c盒子和d盒子存在于同一行。 — 说明:读者可以尝试把b盒子的顶部边距设置为5像素,这时b盒子和c盒子高度一致。d盒子无法“流”上来,d盒子将自动换行,位于b盒子下面。 11.3.3 边框的样式设置 边框(border)作为盒模型的组成部分之一,其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸,还影响到盒子的外观。边框(border)属性的值有3种,边框尺寸(像素)、边框类型和边框颜色(十六进制)。在D:web目录下创建网页文件(XHTML1.0),命名为box_border.htm,编写box_border.htm文件代码如代码11.18所示。 代码11.18 边框样式设置:box_border.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>边框样式设置</title> <style type="text/css"> * {margin: 0px;} #all{width:400px; height:270px; margin:0px auto; background-color:#ccc;} #a,#b,#c,#d,#e,#f,#g{width:160px; height:50px; text-align:center; line-height:50px; background-color:#eee;} #a{width:380px; margin:5px; border:1px solid #333;} #b{border:20px solid #333; float:left;} #c{margin-left:5px; border:20px groove #f00;} #d{margin-left:5px; border:2px dashed #000; float:left;} #e{margin-left:5px; border:2px dotted #000; float:left;} #f{margin:5px; border-left:2px solid #fff; border-top:2px solid #fff; border-right:2px solid #333; border-bottom:2px solid #333; float:left;} #g{margin-top:5px; border-top:2px groove #333;} </style> </head> <body> <p id="all"> <p id="a">a盒子</p> <p id="b">b盒子(solid类型)</p> <p id="c">c盒子(groove类型)</p> <p id="d">d盒子(dashed类型)</p> <p id="e">e盒子(dotted类型)</p> <p id="f">f盒子</p> <p id="g">g盒子</p> </p> </body> </html> 为了更方便看到p的表现,笔者给外部p设置了#ccc背景色,并给内部p设置了#eee背景色。在浏览器地址栏输入http://localhost/box_border.htm,浏览效果如图11.21所示。 图11.21 边框样式设置 这个例子使XHTML对象看起来更像个盒子了,只是边框只是盒子包装中的一层,最外层的包装是不可见的外边距。边框的宽度计算非常重要,如果读者定位元素要充分考虑边框宽度,如图11.21所示,边框的常用设置方法为: border:宽度类型 颜色; 这是4条边框统一的设置方法,如果要分开设置4条边框,将border改为border-top(顶部边框)、border-bottom(底部边框)、border-left(左边框)和border-right(右边框)。而修改“类型”可以修改成不同样子的边框线条,常用的为solid(实线)、dashed(虚线)、dotted(点状线)、groove(立体线)、double(双线)、outset(浮雕线)等,读者可以一一尝试。 11.3.4 内边距的设置 内边距(padding)类似于HTML中表格单元格的填充属性,即盒子边框和内容之间的距离。内边距(padding)和外边距(margin)很相似,都是不可见的盒子组成部分,只不过内边距(padding)和外边距(margin)之间夹着边框。在D:web目录下创建网页文件(XHTML1.0),命名为box_padding.htm,编写box_padding.htm文件代码如代码11.19所示。 代码11.19 内边距的设置:box_padding.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>内边距的设置</title> <style type="text/css"> * {margin: 0px;} #all{width:360px; height:300px; margin:0px auto; padding:25px; background-color:#ccc;} #a,#b,#c,#d,#e,#f,#g{width:160px; height:50px; border:1px solid #000; background-color:#eee;} p{width:80px; height:30px; padding-top:15px; background-color:#cc9;} #a{padding-left:50px;} #b{padding-top:50px;} #c{padding-right:50px;} #d{padding-bottom:50px;} </style> </head> <body> <p id="all"> <p id="a"> <p>a盒子</p> </p> <p id="b"> <p>b盒子</p> </p> <p id="c"> <p>c盒子</p> </p> <p id="d"> <p>d盒子</p> </p> </p> </body> </html> 为了更方便看到p的表现,笔者给外部p设置了#ccc背景色,并给内部p设置了#eee背景色,而p元素设置了#cc9背景色。在浏览器地址栏输入http://localhost/box_padding.htm,浏览效果如图11.22所示。 图11.22 内边距的设置 11.3.5 盒模型兼容问题 微软的IE 6.0以后的版本在浏览器内嵌了两种表现模式:标准模式和兼容模式。在标准模式中,浏览器根据W3C所定的规范来显示页面;而在兼容模式中,页面将以IE 5.0,甚至IE 4.0的显示页面的方式来表现,使以前的网页也能正常显示。这两种模式最大的问题就是盒模式的兼容问题,但是,IE在兼容模式下运行的盒模式依然在最新版本的IE 7.0保留着,一旦页面使用兼容模式浏览,IE 7.0将变成跟IE 5.0一样不兼容Web标准。 不仅IE浏览器,其他浏览器都有类似的多种解析模式,如Opera浏览器、FireFox浏览器等。使用浏览器不同的模式通过不同的DTD(文档类型声明)来实现,在早期的HTML页面制作中,html声明部分直接使用的: <html></html> 这样的页面在浏览器中浏览时会使用兼容模式,如果HTML页面使用以下DTD声明。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 或: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 前者代表HTML 4.0的严格类型的文档类型声明,后者代表XHTML的文档类型声明,这2种DTD将使浏览器使用标准模式。 — 说明:虽然IE 6.0和IE 7.0浏览器对Web标准没有实现完全兼容,但相对于以前的版本,IE标准化程度提高了很多。所以读者制作标准页面,应使用XHTML的DTD。

  推荐阅读

  CSS实例:创建有图标的网站导航菜单

在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单。在我看来,菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读,不用考虑应用程序如何读>>>详细阅读


本文标题:CSS网页布局的核心内容:CSS盒模型

地址:http://www.17bianji.com/kaifa2/CSS/16940.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)