ID：52962503
大小：2.29 MB
页数：68页
时间：2020-04-03
4、。了解这个差异，将有助于制作兼容IE浏览器和FIREFOX浏览器的页面。在盒模型中，内容显示在高和宽所包含的区域。在宽、高定义的这个区域以外，将显示元素本身的背景（或者包含元素的父元素的背景），下面详细讲述相关内容。6.1.2背景与盒模型1．元素本身的背景元素本身的背景，出现在盒模型边框以内的部分，即内容部分和补白区域，都将显示背景（包括背景颜色和背景图片）。2．父元素背景父元素的背景总是处于子元素之后。如果子元素中没有定义背景颜色（也没有定义背景图片），则子元素内容部分会显示父元素的背景，子元素的边框将遮盖父元素的背景，子元素的边界部分将显示父元素的背景。6.2补白属性补白属性是紧连着宽
5、度和高度的属性，为元素设置了补白属性的同时，也增加了元素所占有的空间。下面详细讲解补白属性及其应用。6.2.1补白属性详解在CSS中，补白属性（即padding属性）是一个不能继承的属性。其具体的语法结构如下：padding:长度值
6、百分比值;一个使用padding元素的示例代码如下：.content{width:300px;height:50px;padding:20px;}·114·CSS标准网页布局开发指南
7、和高以外，将出现20个像素的空白区域。其应用于网页，效果如图6-4所示。图6-4使用padding属性的简单示例从图6-4中并不能看到补白属性所带来的效果。这是因为元素没有定义背景，所以就显示了页面的背景。为元素定义一个背景颜色，同时用一个没有定义补白属性的元素进行对照。其代码如下：.content{width:300px;height:50px;padding:20px;background:#cccccc;}/*定义元素的背景，目的是显示补白属性的效果*/.content2{/*定义一个大小相同元素作为对照*/width:300px;height:50px;background:#cc
8、cccc;}.line{/*定义空白元素进行分隔*/height:20px;width:100px;}
此文档下载收益归作者所有
