今天小编跟大家讲解下有关CSS网页布局的核心内容:CSS盒模型 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS网页布局的核心内容:CSS盒模型 的相关资料，希望小伙伴们看了有所帮助。
本节的内容非常重要 因为盒模型是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-bottom11.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。来源：爱蒂网
