与

一样，作为容器可以容纳各种html元素，但它是一个行内元素，在它的前后不会换行。

15、解释盒子模型的float属性。

float属性默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。

16、解释盒子模型的display属性。

display属性用于确定盒子的类型。display属性设为inline，即为“行内”；设为block，即为“块级”；设为none，即为“无”，也就是隐藏盒子。

17、圆角框主要有哪几种制作方法？

两背景图像法、四图像不固定宽度圆角框、五图像二维滑动门圆角框。

18、使用CSS主要有哪几种布局方式？

两列布局、三列布局、多列布局。

19、CSS布局方法与表格布局方法相比，有哪些优势？

（1）页面载入更快；（2）降低网站流量费用；（3）易于修改；

（4）视觉一致（5）更易于被搜索引擎找到。

20、使用CSS布局的网页应实现哪些要求？

（1）宽度使用多列布局，并保证页头和页脚正确显示；

（2）可以指定列宽度固定，其余列宽度自适应；

（3）在html中，个列可以任意顺序排列，最终效果都正确显示。

三、案例分析题

1、解释以下CSS样式的含义。

table{

}

td,th{

}

将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。

设置单元格和表头部分的样式：内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#666

2、解释以下CSS样式的含义。

form{

border:1px dotted #AAAAAA;

padding:3px 6px 3px 6px;

margin:0px;

font:14px Arial;

}

select{

width:80px;

background-color:#ADD8E6;

}

padding: 5px;

border: 2px solid #EEE;

border-bottom-color: #666;

border-right-color: #666;

border: 1px #333 solid;

font: 12px arial;

width: 500px

设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：3px

6px 3px 6px，外边距为0px，字体为14px大小的Arial字体。

设置选择框宽度为80px，背景颜色为#ADD8E6

3、解释以下CSS样式的含义。

input{

color:#00008B;

}

{

background-color:#ADD8E6;

padding:1px 2px 1px 2px;

}

设置input标签中字体颜色为#00008B；

input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px

4、解释以下CSS样式的含义。

.rounded {

background: url(images-notebook/) top left no-repeat;

}

.rounded h2 {

background: url(images-notebook/) top right no-repeat;

padding:20px 20px 10px;

margin:0;

}

定义类选择器.rounded：背景图像为，从左上角开始，不平铺

定义后代选择器.rounded h2：背景图像为，从右上角开始，不平铺；内上、左右、下边距分别是20px 20px 10px，外边距为0

5、画出一个1-（（1-2）+1）-1的布局结构示意图。

6、画出一个1-（（1+（3-1-2））-1的布局结构示意图。

7、解释以下CSS样式的含义。

#header,#pagefooter,#container{

margin:0 auto;

width:85%;

}

#content{

position:absolute;

width: 300px;

}

设置id属性为header、pagefooter、container的div层上下外边框为0，左右外边框为auto，宽度为相对于父元素宽度的85%

设置id属性为content的div层为绝对定位，宽度为固定宽度300px

8、解释以下CSS样式的含义。

A:link { COLOR: #3333cc; TEXT-DECORATION: none }

A:visited {

A:active {

A:hover {

COLOR: #990099; TEXT-DECORATION: none }

COLOR: #ff0000; TEXT-DECORATION: underline }

COLOR: #3333cc; TEXT-DECORATION: underline }

设置超链接样式：

未操作时：颜色为#3333cc，无下划线；

单击过后：颜色为#990099，无下划线；

单击时：颜色为# ff0000，有下划线；

悬停时：颜色为# 3333cc，有下划线；

9、写出下列要求的CSS样式表

（1）设置页面背景图像为login_，并且背景图像垂直平铺。

（2）使用类选择器，设置按钮的样式，按钮背景图像：login_；字体颜色：#FFFFFFF；字体大小：14px；字体粗细：bold；按钮的边界、边框和填充均为0px。

body{

background-image:url(img/login_);

background-repeat:repeat-y; }

.picButton{

background-image:url(img/login_);

color:#FFFFFF;

font-size: 14px;

font-weight:bold;

margin: 0px;

border:0px;

padding: 0px; }

10、写出下列要求的CSS样式表

（1）使用标签样式，设置字体颜色：#2A1FFF；字体大小：14px。内容与边框之间的距离：5px。

（2）使用超链接伪类：不带下划线；颜色：#333333；鼠标悬停在超链接上方时，显示下划线；颜色：#FF5500。

td {

color: #2A1FFF;

font-size: 14px;

padding:5px;

}

A{

color:#333333;

text-decoration:none;

}

A:hover

{

color:#FF5500;

text-decoration:underline;

}