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

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

2、边框宽度（border-width）语法：语法：border-width:medium|thin|thick|length2上边框宽度（上边框宽度（border-top）语法：语法：border-top:border-width|border-style|border-color3右边框宽度（右边框宽度（border-right）语法：语法：border-right:border-width|border-style|border-color4下边框宽度（下边框宽度（border-bottom）语法：语法：border-bottom:border-width|border-style|bord

3、er-color5左边框宽度（左边框宽度（border-left）语法：语法：border-left:border-width|border-style|border-color5.2 边框、外边距与内边距边框、外边距与内边距5.2.1 边框6边框颜色（边框颜色（border-color）语法：语法：border-color:color7边框样式（边框样式（border-style）语法：语法：border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset5.2 边框、外边距与内边距边框、外边距与内边距

4、5.2.2 外边距1上外边距（上外边距（margin-top）语法：语法：margin-top:length|auto2右外边距（右外边距（margin-right）语法：语法：margin-right:length|auto3下外边距（下外边距（margin-bottom）语法：语法：margin-bottom:length|auto4左外边距（左外边距（margin-left）语法：语法：margin-left:length|auto5外边距（外边距（margin）语法：语法：margin:length|auto5.2 边框、外边距与内边距边框、外边距与内边距5.2.3 内边距内边距用于控

5、制内容与边框之间的距离，内边距用于控制内容与边框之间的距离，padding属性定义元素内容与元属性定义元素内容与元素边框之间的空白区域。内边距包括了素边框之间的空白区域。内边距包括了4项属性：项属性：padding-top（上内边距）、（上内边距）、padding-right（右内边距）、（右内边距）、padding-bottom（下内边距）、（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和一次性设置所有的对象间隙，格式也和mar

6、gin相似。相似。5.2 边框、外边距与内边距边框、外边距与内边距5.2.3 内边距【演练【演练5-4】使用内边距（】使用内边距（padding）属性设置内容与边框之间的距离，）属性设置内容与边框之间的距离，盒模型的布局如图盒模型的布局如图5-9所示，本例文件所示，本例文件5-4.html在浏览器中的显示效果如图在浏览器中的显示效果如图5-10所示。所示。5.3 盒模型的宽度与高度盒模型的宽度与高度盒模型的宽度与高度1盒模型的宽度盒模型的宽度盒模型的宽度盒模型的宽度=左外边距（左外边距（margin-left）+左边框（左边框（border-left）+左内边左内边距（距（padding-le

7、ft）+内容宽度（内容宽度（width）+右内边距（右内边距（padding-right）+右边右边框（框（border-right）+右外边距（右外边距（margin-right）2盒模型的高度盒模型的高度盒模型的高度盒模型的高度=上外边距（上外边距（margin-top）+上边框（上边框（border-top）+上内边上内边距（距（padding-top）+内容高度（内容高度（height）+下内边距（下内边距（padding-bottom）+下边框（下边框（border-bottom）+下外边距（下外边距（margin-bottom）5.4 块级元素与行级元素宽度和高度的区别块级元素与行

8、级元素宽度和高度的区别块级元素与行级元素【演练【演练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所示。所

9、示。2两个元素包含时叠加两个元素包含时叠加假设两个元素没有内边距和边框，且一个元素包含另一个元素，它们的假设两个元素没有内边距和边框，且一个元素包含另一个元素，它们的上外边距或下外边距也会发生叠加合并，如图上外边距或下外边距也会发生叠加合并，如图5-16所示。所示。5.6 盒模型综合案例盒模型综合案例制作光影世界高端外景局部页面制作光影世界高端外景局部页面光影世界高端外景局部页面【演练【演练5-8】使用盒模型技术制作光影世界高端外景局部页面，页面的布】使用盒模型技术制作光影世界高端外景局部页面，页面的布局效果如图局效果如图5-19所示，本例文件所示，本例文件5-8.html在浏览器中的显示效果

10、如图在浏览器中的显示效果如图5-20所示。所示。5.6 盒模型综合案例盒模型综合案例制作光影世界高端外景局部页面制作光影世界高端外景局部页面光影世界高端外景局部页面1前期准备前期准备（1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹下创建文件夹images和和css，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹css下新建一个名为下新建一个名为style.css的样式表文件。的样式

11、表文件。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 盒子的定位盒子的定位5.7.1 定位属性3宽度（宽度（width）语法：语法：width:auto|lengt

12、h4高度（高度（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）语法：语法：height:auto|length5最小高

13、度（最小高度（min-height）语法：语法：min-height:auto|length6可见性（可见性（visibility）语法：语法：visibility:inherit|visible|collapse|hidden5.7 盒子的定位盒子的定位5.7.2 定位方式1静态定位静态定位静态定位是静态定位是position属性的默认值，盒子按照标准流（包括浮动方式）进属性的默认值，盒子按照标准流（包括浮动方式）进行布局，即该元素出现在文档的常规位置，不会重新定位。行布局，即该元素出现在文档的常规位置，不会重新定位。【演练【演练5-9】静态定位示例。本例文件】静态定位示例。本例文件5-9.

14、html在浏览器中的显示效果如在浏览器中的显示效果如图图5-21所示。所示。5.7 盒子的定位盒子的定位5.7.2 定位方式2相对定位相对定位使用相对定位的盒子，会相对于自身原本的位置，通过偏移指定的距离，使用相对定位的盒子，会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。到达新的位置。【演练【演练5-10】相对定位示例。本例文件】相对定位示例。本例文件5-10.html在浏览器中的显示效果在浏览器中的显示效果如图如图5-22所示。所示。5.7 盒子的定位盒子的定位5.7.2 定位方式3绝对定位绝对定位使用绝对定位的盒子以它的使用绝对定位的盒子以它的“最近最近”的一个的一个“已经定位

15、已经定位”的的“祖先元素祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。行定位。【演练【演练5-11】绝对定位示例。】绝对定位示例。5.7 盒子的定位盒子的定位5.7.2 定位方式4固定定位固定定位固定定位（固定定位（position:fixed;）是相对于视窗固定的，就算页面文档发生了）是相对于视窗固定的，就算页面文档发生了滚动，它也会一直呆在相同的地方。滚动，它也会一直呆在相同的地方。【演练【演练5-12】固定定位示例。】固定定位示例。5.8 浮动与清除浮动浮动与清除浮动5.8.1 浮动浮

16、动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距浮动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。边缘或另一个浮动元素的外边距边缘为止。语法：语法：float:none|left|right【演练【演练5-13】向右浮动的元素。】向右浮动的元素。5.8 浮动与清除浮动浮动与清除浮动5.8.1 浮动【演练【演练5-14】向左浮动的元素。使用上面的演练】向左浮动的元素。使用上面的演练5-13继续讨论，只将继续讨论，只将“盒盒子子1”向左浮动的页面布局如图向左浮动的页面布局如图5-29（a）所示，所有元素向左浮动后的结果）所示，所有元素向

17、左浮动后的结果如图如图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 实训实训家具商城登录页面整体布局家具商城登录页面整体布局家具商

18、城登录页面整体布局【实训】家具商城登录页面整体布局，本例文件【实训】家具商城登录页面整体布局，本例文件5-17.html在未使用盒子在未使用盒子浮动前的布局效果如图浮动前的布局效果如图5-32所示，使用盒子浮动后的布局效果如图所示，使用盒子浮动后的布局效果如图5-33所示。所示。习题习题5习题51使用相对定位的方法制作如图使用相对定位的方法制作如图5-34所示的页面布局。所示的页面布局。2使用盒模型技术制作如图使用盒模型技术制作如图5-35所示的家具商城首页产品特色的局部页所示的家具商城首页产品特色的局部页面。面。3盒模型技术制作如图盒模型技术制作如图5-36所示的家具商城结算页面的局部信息。所示的家具商城结算页面的局部信息。