茶余饭后的甜点

一、选择题

1.主流网站实现精灵图技术主要依靠CSS的（）属性

选项 A.background-position;B.background-color ;C.color; D.font;

答案 A

答案说明 实现精灵图技术主要是靠background-position控制背景图像的显示位置实现的

2.使用精灵图技术可以（）

选项 A. 提高网站效率，减少用户请求图片的数量;

B. 提升网站的SEO排名;

C. 提升网站的访问人数;

D.不确定;

答案 A

答案说明 使用精灵图技术可以有效减少用户请求图片的数量，减少请求图片上的资源消耗

3.通过CSS中的（）属性可以控制精灵图在元素中的显示位置

选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;

答案 C

答案说明 通过background-position属性可以设置背景图片在元素中的显示位置

4.CSS中（）属性主要用于控制精灵图在页面元素中的显示位置

选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;

答案 C

答案说明 通过background-position属性可以设置背景图片在元素中的显示位置

5.精灵图技术主要是通过CSS中的（）属性对精灵图背景图片进行操作

选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;

答案 C

答案说明 通过background-position属性可以设置背景图片在元素中的显示位置

6.CSS中的（）属性可以用来操作精灵图在元素中的显示位置

选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;

答案 C

答案说明 通过background-position属性可以设置背景图片在元素中的显示位置

7.通过设置CSS中的（）属性，可以设置元素在页面中水平居中对齐。

选项 A.text-align:center ;B.margin:0 auto;C.background-position:center; D.不确定;

答案 B

答案说明 设置一个元素在页面中水平居中对齐的CSS是:margin:0 auto

8.通过设置CSS中的（）属性，可以设置页面中的图片垂直居中

选项 A.vertical-align:middle;B.margin:0 auto;C.background-position:center; D.不确定;

答案 A

答案说明 CSS设置图片在页面中垂直居中的CSS属性是：vertical-align:middle

9.页面中版心元素一般要水平居中对齐，需要对版心元素设置CSS（）

选项 A.vertical-align:middle;B.margin:0 auto;C.background-position:center; D.不确定;

答案 B

答案说明 设置一个元素在页面中水平居中对齐的CSS是:margin:0 auto

10.如果需要设置某个元素透明，应该使用CSS的（）属性

选项 A.opacity ;B.color ;C.background-position; D.不确定;

答案 A

答案说明 CSS设置透明度的属性是:opacity

11.下列选项中哪个CSS属性隐藏元素后不会占页面空间（）

选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;

答案 C

答案说明 Display:none隐藏的元素由于被释放了空间，所以隐藏后不会占据页面位置

12.以下哪种隐藏元素方式，元素隐藏后会占用页面位置（）

选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;

答案 D

答案说明 Visibility:hidden设置元素隐藏后会在页面中保留该元素的位置

13.下列哪个CSS属性设置后会在页面上完全隐藏元素（）

选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;

答案 C

答案说明 Display:none隐藏的元素由于被释放了空间，所以隐藏后不会占据页面位置，达到完全隐藏元素的目的

14.对页面上一个元素设置CSS样式display:none以后，该元素将（）

选项 A.从页面上彻底隐藏;

B.从页面上隐藏但会保留位置;

C.该元素不会完全隐藏;

D.不确定;

答案 A

15.CSS属性Overflow:hidden主要用于（）

选项 A.设置元素内容超出部分显示滚动条;

B.设置元素内容超出部分自动显示滚动条;

C.设置元素内容超出部分隐藏;

D.不确定;

答案 C

答案说明 设置元素内容超出部分隐藏的CSS属性是overflow:hidden

二、填空题

1.网页中的”精灵图”技术(CSS”雪碧技术”)主要是通过CSS的___________属性实现的。

答案background-position

答案说明雪碧技术主要是通过background-position控制背景图片在元素中显示位置实现的

2. CSS中的_____________属性可以用来控制背景图片在元素中的显示位置

答案background-position

答案说明background-position属性是CSS中专门用来控制背景图像在元素中的显示位置的

3.使用CSS雪碧/精灵图技术可以有效降低页面_____________数量

答案请求

答案说明由于精灵图中集合了页面很多的小图像，有效减少了页面图片的数量，从而降低用户请求页面时候发出的请求数量

4.页面中使用的“精灵图”技术主要是通过CSS__________属性对元素中的背景图像显示进行控制。

答案background-position

答案说明雪碧技术主要是通过background-position控制背景图片在元素中显示位置实现的

5.现在主流网站中使用的”精灵图”技术，主要是依靠CSS中__________属性实现的。

答案background-position

答案说明精灵图主要依赖CSS中的background-position属性实现的

6. CSS中可以通过设置_________属性使元素透明

答案opacity

答案说明CSS3中设置元素透明属性为opacity

7.如果需要设置一个元素的不透明度为50%，CSS属性应该设置为__________

答案Opacity:0.5

答案说明设置透明度属性为Opacity:0.5

8.如果希望设置元素溢出内容隐藏需要设置CSS的__________属性为__________

答案(1)overflow

(2)hidden

答案说明设置页面中超出元素内容的隐藏需要设置该元素的overflow属性为hidden

9.如果要隐藏页面上的某个元素，可以通过设置CSS中的________或________属性实现

答案(1)display

(2)visiblity

答案说明通过对页面上某个元素设置display属性或设置visiblity属性都可以实现隐藏该元素的效果

10.如果要隐藏页面上的某个元素，并且该元素隐藏后不能占据页面位置，要设置CSS的属性为_________

答案display:none

答案说明在页面中设置了display:none的元素会被隐藏且不占据页面位置

11.如果需要隐藏页面上的某个元素，但需要保留该元素在页面上占据的位置，需要设置的CSS属性为__________

答案visibility:hidden;

答案说明如果使用visibility:hidden;隐藏页面中的某个元素，那么该元素在隐藏后会依旧占据页面位置

12.在对页面中某一个元素设置了visibility:hidden;后，那么该元素在页面中不可见但_____________

答案占据空间

答案说明如果使用visibility:hidden;隐藏页面中的某个元素，那么该元素在隐藏后会依旧占据页面位置

13.如果需要使用滚动条来显示元素溢出的内容需要设置overflow属性值为__________

答案scroll

答案说明当overflow属性设置为scroll时，元素溢出内容会以滚动条方式显示在元素内部

三、简答题

1.请简述display:none和visibility:hidden的用途及区别

答案两者都用于隐藏页面元素

visiblity:hidden :隐藏的元素在页面保留位置;

display:none :元素隐藏后不再占据页面位置;

答案说明两者都是用于隐藏元素，但区别在于一个是完全隐藏，另一个会保留元素在页面的位置

2.如果要将一个div的不透明度设置为50%，请写出对应的CSS代码

答案div{

opacity:0.5;

}

答案说明可以通过设置opacity属性设置元素的不透明度

3.请简述精灵图技术的好处及主要使用的CSS属性

答案使用精灵图可以有效减少页面的请求数量，主要是通过减少对小图片的请求次数。通过background-position完成对背景图像显示位置的控制达到页面需要的显示效果。

答案说明精灵图技术是目前应用比较广泛的一种技术，对网站性能优化提升比较明显。

4.精灵图技术主要是依靠CSS的什么属性实现的？

答案主要是通过background－position属性实现的

答案说明通过background-position完成对背景图像显示位置的控制达到页面需要的显示效果。