需要说明的是，font-weight、font-variant、font-style这3个属性的顺序是可以改变的，但font-size、font-family必须按指定的顺序出现，如果顺序不对或缺少一个，那么整条样式定义可能不起作用。
（2）设置图像边框需要使用border-image属性，说明该属性各参数的意义，并在不同的浏览器中调试显示结果。
CSS3增加的border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。使用border-image属性，浏览器在显示图像边框时，自动将用到的图像分割成9部分进行处理，不需要用户再考虑边框与内容的适应问题。
border-image属性的第一个参数需要指明边框图像的地址，接着4个参数是浏览器将边框图像分割时的上右下左四个边距，最后一个参数是边框宽度。例如：
border-image:url(images/borderimage.png) 5 10 15 20/25px; -moz-border-image:url(images/borderimage.png) 5 10 15 20/25px; -webkit-border-image:url(images/borderimage.png) 5 10 15 20/25px;
（3）比较word-wrap属性与word-break属性的区别，并通过示例加以验证。
word-wrap 是CSS3新增加的属性，该属性允许超过容器的长单词换行到下一行，它的取值为normal和break-word，默认值为normal，表示只在允许的断字点换行，break-word表示在长单词或 URL 地址内部进行换行。
word-break 是CSS3新加的属性，用来处理如何自动换行。它的取值为normal、break-all和keep-all。默认值为normal，表示使用浏览器默认的换行规则，break-all表示允许在单词内换行，keep-all表示只能在半角空格或连字符处换行。
（4）本章中介绍的各种CSS属性既有CSS2以前的属性，也有CSS3新增的属性，列举出CSS3新增属性，说明其释义。
word-break ，用来处理如何自动换行。
word-wrap，该属性允许超过容器的长单词换行到下一行。 border-radius，可以设计各种类型的圆角边框。
border-image属性，该属性指定一个图像文件作为边框，边框的长或宽会随着网页元素承载内容的多少自动调整。
max-width和max-height分别用来设置图片宽度最大值和高度最大值。
2．操作题
（1）用CSS设计如图14-24所示的页面，要求如下。
① 设置背景background-attachment、background-image、background-repeat、background-position等属性；
② 设置图片的border、width、height等属性；
③ 为控制图片位置，可将图片置于
标记或标记中。
![]()
第十五章
1．简答题
（1）什么是CSS盒模型概念，如何计算其宽度？
盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。
盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分，如图15-1所示。盒子的实际大小为这几部分之和，盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
（2）CSS3新增哪些与盒相关的属性？简述其各自功能。
①宽度和高度，定义内容的大小属性；如果盒子里信息过多，超出width和height属性限定的大小，盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法格式如下：
width: auto | length; height: auto | length;
overflow: auto | visible | hidden | scroll; ②边界（margin）是盒模型与其他盒模型之间的距离，使用margin属性定义，其语法格式如下。
margin: auto | length;
③填充（padding）用来设置内容和盒子边框之间的距离，可用padding属性设置，其语法格式如下。
padding: length;
④边框（border）是盒模型中介于填充（padding）和边界（margin）之间的分界线，可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色，也可以直接使用border属性后加3个对应值，用空格隔开进行设置。
（3）说明下列border-style属性值的含义：solid、outset、ridge、dotted。 边框样式用border-style属性描述，其值可取的关键字如下。 none：无边框，默认值
hidden：隐藏边框
dashed：点划线构成的虚线边框 dotted：点构成的虚线边框 solid：实线边框 double：双实线边框
groove：根据color值，显示3D凹槽边框 ridge：根据color值，显示3D凸槽边框 inset：根据color值，显示3D凹边边框 outset：根据color值，显示3D凸边边框
（4）简述绝对定位的设置效果。
设置position属性的值为absolute时即为绝对定位，是盒子相对其具有position属性设置的父对象进行定位。如果父对象无position属性设置，盒子以浏览窗口为参照绝对定位。绝对定位的元素浮于页面之上，不占用原页面空间，后续元素不受其影响，填充其原有位置。
（5）简述CSS的定位属性position的值的含义。
使用position属性可以精确控制盒子的位置，其语法格式如下。position: static |relative | absolute | fixed
static：静态定位，默认的定位方式，盒子按照HTML规则定位，定义top、left、bottom、right无意义。
absolute：绝对定位，通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置，不占用原页面空间。
relative：相对定位，通过top、left、bottom、right等属性值定位元素相对其原本应显示位置的偏移位置，占用原位置空间。
fixed：固定定位，通过top、left、bottom、right等属性值定位盒子相对浏览器窗口的偏移位置。
2．操作题
（1）设置盒模型，实现图15-30所示效果。
height: 20px; width: 150px;
background-color: #EFEFEF; margin: 10px; } .p1 {
padding: 20px;
margin: 60px;
border-style:outset; border-width:10px; border-color:#0F0 ; }
（2）设计实现购物网站商品橱窗展示，效果参考图15-31。
图15-30 盒模型浏览效果 图15-31 购物网站商品橱窗展示浏览效果
body{
font-size:12px;
} .e{ float:left; margin:2px; }
.img{ /*内层虚线框*/
border: thin dotted #999; }
.b{ /*图标识*/ margin:5px;
clear:left; }
（3）请参考本章案例完成如下页面的设计。
font-size:12px;
background-color:#CCC;
text-align: center; }
#header{
margin:5px auto; background:#FFC;
width:80%; /*自适应页面大小*/ height:60px; }
#main{ padding-top:10px;
line-height:150%;
margin:5px auto;
background: #D0FFFF;
width:80%; /*自适应页面大小*/ height:300px; text-align:left; }
#footer{
margin:5px auto; background:#FFC;
width:80%; /*自适应页面大小*/ height:30px; }
.h{ font-size:32px;
padding-top:10px; margin:5px; }
.img1{ /*第一种环绕方式*/ float:right; margin:10px; padding:5px;/**/ } .img2{ /*第二种环绕方式*/ float:left; margin:10px; padding:5px/**/ }
span{ /*实现首字下沉*/ float:left;
font-size:36px; font-family:黑体; padding:10px 0px; }