原创力文档- 1、本文档共35页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
HTML5+CSS3网页设计基础教程;;单元导读
盒模型是CSS样式中非常重要的一个知识点，掌握了盒模型的各种属性和设置，才能够游刃有余的控制好页面元素的位置和所占空间大小，从而更好的控制页面整体结构。;学习目标
掌握盒模型的基本概念；
掌握盒模型所占空间大小的计算方法；
掌握标准盒模型和IE盒模型的区别；;思政目标
要制作一个完美、规整的网页一定要注重细节，这些微小的细节离不开盒模型的设计，页面效果精益求精，追求完美和极致，反复改进、一丝不苟，使学生们通过对盒模型的掌握，提升自身对设计的专业性，加强敬业心，继承我们国家优良的传统工匠精神。;盒模型，又称框模型，顾名思义，就是一个盒子，生活中的盒子，可以用来装东西。假如我们有一件物品要放在盒子里，盒子本身会有一定的厚度和材质，为了使物品不被磕碰，还要在物品与盒子之间放上塑料泡沫以达到抗震的作用，如果有很多个盒子放在一起，盒子与盒子之间还可以保持一定的距离达到“通风”，如图6-1：;图6-1 盒子; 网页上的内容丰富多彩，有许多不同类型的元素，如：文章标题、图片、段落文本等等，要想把这些内容合理的布局在页面上，离不开盒模型的规划，页面上的盒模型我们可以理解为，所有的页面元素都可以使用盒子来管理，如图6-2。; 还有一些标签，如div ,可以容纳许多其它的内容，也同样看作是盒子，这个大盒子可以装下许多的小盒子，所有的盒子都占据着一定的页面空间，如图6-3：; 那么，我们的盒子所占据的空间怎样计算呢？影响盒子模型大小和占用空间的有五个重要的属性：宽width、高height、边框border、内边距padding、外边距margin，根据方向，还要进行仔细的划分，如图6-4：;宽width和高height决定盒子内部的空间有多大，盒子里的内容要显示在这个范围里面，如图6-5：; 边框就是盒子的厚度，在设定样式时还可以控制它的颜色和样式，如图6-6：;内边距是指内容与边框内侧的距离，如图6-7：;外边距是指外边框与其它盒子之间的距离，如图6-8。;margin有一种特殊情况，两个上下方向相邻的盒子垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合??的外边距中较大的那个边距值，如图6-9（需要注意的是：只有普通文档流中盒子的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并）。;图6-9 外边距合并;通过上述基本属性控制盒子的大小，也就影响到了网页布局，再结合盒子的背景色、背景图片属性，盒模型中各个属性、各种元素的层次如图6-10、图6-11：;图6-10 盒模型中各个属性、各种元素（1）;6.4 两种重要的盒模型;1.标准盒子模型：
盒子的宽、高决定内容的显示部分，而内边距和边框还要另外占据空间。盒子实际大小为width+padding+border，详细计算如图6-12。;图6-12 标准盒子模型;2.IE盒子模型：
盒子的宽、高包括了内边距和边框，也就是说内边距和边框不会再额外占据空间。盒子实际大小为width，如图6-13。;图6-13 IE盒子模型;任务1. 思考与计算——假如设定盒子div的宽度width为200px，内边距为30px，边框为25px，外边距是35px。
分别计算标准盒子模型和IE盒模型下盒子的实际大小;
如果将两个盒子按照普通文档流，一上一下按顺序垂直并列放在一起，在垂直方向上一共占多大空间？;任务分析
第1题：如图6-14、图6-15（标准盒模型、IE盒模型）：;第2题：如图6-16：;任务2. 制作标准盒子与IE盒子并比较分析，代码如图6-17：;效果如图6-18：;任务分析
内边距padding、外边距margin均为透明区域，是不可见的。
制作完成后，使用谷歌浏览器打开，在页面空白区域右键单击，选择【检查】，在页面右侧，会出现“开发者工具”（Developer Tools），在这里可以检查和调试代码，如图6-19：;图6-19 开发者工具;在布局的设计中，通常各个子元素的总占用空间不能超过父元素内部所能容纳的空间，以避免使用滚动条，标准盒子模型实际占据的空间要计算宽度+内边距+边框，计算起来很麻烦，开发难度大，因此，很多开发者会采用IE盒子模型，有时会写上这样一名代码
*｛
box-sizing: border-box;
｝
用以保证所有盒子的计算都统一使用IE盒模型，开发起来简单、直观。;任务3. 文字属性、背景属性及盒模型的综合运用—— 制作落叶故乡散文页面，效果如图6-20所示：;<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
文档评论（0）