网页设计与制作教程第5章--CSS盒模型课件

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第5章 CSS盒模型5.1 盒模型简介盒模型简介盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成，如图5-1所示。对象的尺寸与边框等样式表属性的关系，如图5-2所示。5.2 边框、外边距与内边距5.2.1 边框1所有边框宽度（border-width）语法：border-width : medium | thin | thick | length2上边框宽度（border-top）语法：border-top :

2、border-width | border-style | border-color3右边框宽度（border-right）语法：border-right : border-width | border-style | border-color4下边框宽度（border-bottom）语法：border-bottom : border-width | border-style | border-color5左边框宽度（border-left）语法：border-left : border-width | border-style | border-color5.2 边框、外边距与内边距5.2.

3、1 边框6边框颜色（border-color）语法：border-color : color7边框样式（border-style）语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset5.2 边框、外边距与内边距5.2.2 外边距1上外边距（margin-top）语法：margin-top : length | auto2右外边距（margin-right）语法：margin-right : length | auto3下外边距（margin-bot

4、tom）语法：margin-bottom : length | auto4左外边距（margin-left）语法：margin-left : length | auto5外边距（margin）语法：margin : length | auto5.2 边框、外边距与内边距5.2.3 内边距内边距用于控制内容与边框之间的距离，padding属性定义元素内容与元素边框之间的空白区域。内边距包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距

5、也可以用padding一次性设置所有的对象间隙，格式也和margin相似。5.2 边框、外边距与内边距5.2.3 内边距【演练5-4】使用内边距（padding）属性设置内容与边框之间的距离，盒模型的布局如图5-9所示，本例文件5-4.html在浏览器中的显示效果如图5-10所示。5.3 盒模型的宽度与高度盒模型的宽度与高度1盒模型的宽度盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）2

6、盒模型的高度盒模型的高度=上外边距（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

7、.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，

8、分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2制作页面5.7 盒子的定位5.7.1 定位属性1定位方式（position）position属性可以选择4中不同类型的定位方式，语法如下：position : static | relative | absolute | fixed2左、右、上、下位置语法：left:auto | length right:auto | lengthtop:auto | lengthbottom:auto | length5.7

9、盒子的定位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 | number5.7 盒子的定位5.7.1 定位属性3宽度（width）语法：width:auto | length4高度（height）语法：heigh

10、t:auto | length5最小高度（min-height）语法：min-height:auto | length6可见性（visibility）语法：visibility:inherit | visible | collapse | hidden5.7 盒子的定位5.7.2 定位方式1静态定位静态定位是position属性的默认值，盒子按照标准流（包括浮动方式）进行布局，即该元素出现在文档的常规位置，不会重新定位。【演练5-9】静态定位示例。本例文件5-9.html在浏览器中的显示效果如图5-21所示。5.7 盒子的定位5.7.2 定位方式2相对定位使用相对定位的盒子，会相对于自身原本的

11、位置，通过偏移指定的距离，到达新的位置。【演练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 浮动浮动元素可以向左或向右

12、移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。语法：float : none | left |right【演练5-13】向右浮动的元素。5.8 浮动与清除浮动5.8.1 浮动【演练5-14】向左浮动的元素。使用上面的演练5-13继续讨论，只将“盒子1”向左浮动的页面布局如图5-29（a）所示，所有元素向左浮动后的结果如图5-29（b）所示。5.8 浮动与清除浮动5.8.1 浮动【演练5-15】父容器空间不够时的元素浮动。5.8 浮动与清除浮动5.8.2 清除浮动为了防止浮动溢出现象的出现而进行的CSS处理，就叫清除浮动，清除浮动即清除掉元素float属性。语法：clear : none | left |right | both【演练5-16】清除浮动示例。5.9 实训家具商城