网页设计与制作教程(HTMLCSSJavaScript)第2版第5章CSS盒模型

网页设计与制作教程（HTML+CSS+JavaScript）第2版第5章CSS盒模型机械工业出版社5.1盒模型简介盒模型简介盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，如图5-1所示。对象的尺寸与边框等样式表属性的关系，如图5-2所示。机械工业出版社5.2边框、外边距与内边距5.2.1边框6．边框颜色（border-color）语法：border-color:color7．边框样式（border-style）语法：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset机械工业出版社5.2边框、外边距与内边距5.2.3内边距内边距用于控制内容与边框之间的距离，padding属性定义元素内容与元素边框之间的空白区域。内边距包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似。机械工业出版社5.3盒模型的宽度与高度盒模型的宽度与高度1．盒模型的宽度盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）2．盒模型的高度盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）机械工业出版社5.4块级元素与行级元素宽度和高度的区别块级元素与行级元素【演练5-5】块级元素与行级元素宽度和高度的区别，本例文件5-5.html在浏览器中的显示效果如图5-11所示。机械工业出版社5.5盒子的margin叠加问题5.5.1水平margin叠加这里来看两个行级元素并排的情况，如图5-13所示。机械工业出版社5.5盒子的margin叠加问题5.5.2垂直margin叠加1．两个元素垂直相遇时叠加当两个元素垂直相遇时，如图5-15所示。2．两个元素包含时叠加假设两个元素没有内边距和边框，且一个元素包含另一个元素，它们的上外边距或下外边距也会发生叠加合并，如图5-16所示。机械工业出版社5.6盒模型综合案例——制作光影世界高端外景局部页面光影世界高端外景局部页面【演练5-8】使用盒模型技术制作光影世界高端外景局部页面，页面的布局效果如图5-19所示，本例文件5-8.html在浏览器中的显示效果如图5-20所示。机械工业出版社5.6盒模型综合案例——制作光影世界高端外景局部页面光影世界高端外景局部页面1．前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2．制作页面机械工业出版社5.7盒子的定位5.7.1定位属性1．定位方式（position）position属性可以选择4中不同类型的定位方式，语法如下：position:static|relative|absolute|fixed2．左、右、上、下位置语法：left:auto|lengthright:auto|lengthtop:auto|lengthbottom:auto|length机械工业出版社5.7盒子的定位5.7.1定位属性3．宽度（width）语法：width:auto|length4．高度（height）语法：height:auto|length5．最小高度（min-height）语法：min-height:auto|length6．可见性（visibility）语法：visibility:inherit|visible|collapse|hidden7．层叠顺序z-index语法：z-index:auto|number机械工业出版社5.7盒子的定位5.7.1定位属性3．宽度（width）语法：width:auto|length4．高度（height）语法：height:auto|length5．最小高度（min-height）语法：min-height:auto|length6．可见性（visibility）语法：visibility:inherit|visible|collapse|hidden机械工业出版社5.7盒子的定位5.7.2定位方式1．静态定位静态定位是position属性的默认值，盒子按照标准流（包括浮动方式）进行布局，即该元素出现在文档的常规位置，不会重新定位。【演练5-9】静态定位示例。本例文件5-9.html在浏览器中的显示效果如图5-21所示。机械工业出版社5.7盒子的定位5.7.2定位方式2．相对定位使用相对定位的盒子，会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。【演练5-10】相对定位示例。本例文件5-10.html在浏览器中的显示效果如图5-22所示。机械工业出版社5.7盒子的定位5.7.2定位方式3．绝对定位使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。【演练5-11】绝对定位示例。机械工业出版社5.7盒子的定位5.7.2定位方式4．固定定位固定定位（position:fixed;）是相对于视窗固定的，就算页面文档发生了滚动，它也会一直呆在相同的地方。【演练5-12】固定定位示例。机械工业出版社5.8浮动与清除浮动5.8.1浮动【演练