【学习笔记】网页制作测试题

各题目的解题思路和所涉及的知识点理解：

1.B CSS属性：box-sizing:border-box 还有content-box（默认值） 。。。

2.D CSS selector 优先级判定 【延伸阅读】 http://blog.csdn.net/christine95/article/details/47313405

四个选项比较 ul li p .p           10+1+1+1 ul li .li p          1+10+1+1 ul li:first-child p  1+?+1 .ul li .p            10+1+10

思路：选择器优先级 选择器的分类-ID选择器，类选择器，标签名选择器，伪元素选择器

3.A CSS属性：float，属性值分别为left,right 的情况 以及CSS选择器：关系选择器-相邻选择器 E+F紧邻在E元素之后的F元素，F与E元素必须是同级元素。（IE6不支持）

4.D HTML语义化 使用了div没有强调语义

5.A 表单元素 time label-option-input

6.A CSS属性定义了多个重复的， 先定义了   padding-top:A，后padding:B， 最终合并为 padding: A B B;

7.D CSS属性：定位position relative/absolute 父元素是相对定位，宽度是100px，内边距10px，边框宽度2px 子元素是嵌套在父元素里， 默认情况下（即不设置任何的样式时）子元素是距父元素的top和left分别是10px，子元素的内容背景宽度只有内容的宽度 一旦设置了right:0后，子元素的内容背景宽度是占满了父元素的右边宽度。 left:0，子元素的内容背景占满了左边的宽度。

父元素100px，减去边框2px*2，子元素96px（原理是什么？）

8.B CSS属性padding的属性值： 内边距的百分比数值。 百分数值是相对于其父元素的width计算的， 所以，如果父元素的width改变，它们也会改变。

注意：上下内边距与左右内边距一致； 即上下内边距的百分数会相对于父元素宽度设置， 而不是相对于高度。

CSS框模型 元素框的最内部分是实际的内容，直接包围内容的是内边距。 内边距呈现了元素的背景。内边距的边缘是边框。 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

【背景】应用于由内容和内边距、边框组成的区域。 。。。。。。。

9.C 选项的playing不属于语法值。 CSS3属性animation语法。 animation-name: myfirst;(keyframename) animation-duration: 5s; (0-time） animation-timing-function: linear;(linear,ease默认,ease-in,ease-out,cubic-bezier(n,n,n,n)) animation-delay: 2s;(0-time) animation-iteration-count: infinite;(n-1默认-infinite) animation-direction: alternate;(normal默认-alternate) animation-play-state: running;(paused running默认) animation-fill-mode:none;(none默认 forwards backwards both)

animation: myfirst 5s linear 2s infinite alternate;

动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 【0% 是动画的开始，100% 是动画的完成。】

10.B CSS3属性transform，可以实现转换。 包括2D和3D。需要通过调用各种方法来实现相应的转换。 有 (1)元素从当前位置移动，translate() (2)元素顺时针旋转给定的角度，rotate()允许负值，元素将逆时针旋转。 (3)元素的尺寸增加或减少， scale()

11. BCD CSS属性，其值可缩写的有，其缩写顺序的考察 background、font、border、margin 缩写的优点是比单个属性书写要简单，要少写很多代码。

【background】 background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; 在CSS2.1里，background属性的简写方式包含五种属性值，从CSS3开始，又增加了3个新的属性值，加起来一共8个。 需要注意的是里面的/，它和font以及border-radius里简写方式使用的/用法相似。 /可以在支持这种写法的浏览器里在background-position后面接着写background-size。

【font】 .fisher{ font-style:italic; font-variant:small-caps; font-weight:700; font-size:12px; line-height:24px; font-family:"Microsoft YaHei"; } 简写如下： .fisher{ font:italic small-caps 700 12px/24px "Microsoft YaHei"; }

说明: -简写为一行的时候，font-size和line-height直接一样要用斜杠，不能分开写； -没有赋值的属性，会自动使用默认值；

【margin】 margin: 20px;/*上下左右均为20px*/ 1个值 maigin:10px 20px   /*上下为10px  左右为20px*/ 2个值 margin: 0px auto;/*上下边距为0px 左右居中显示*/ maigin:50px 80px 30px  /*上为50px  左右为80px  下为30px*/ 3个值 margin: 10px 20px 30px 40px;/*顺时针顺序：上右下左*/ 4个值

【border】 border、padding的属性值与margin类似，都是顺时针方向 border: 5px solid rebeccapurple;/*顺序可以改变*/ 【border-radius】盒子的弧度： border-radius: 0 20px 0 20px;/*顺时针方向：左上角开始*/ border-radius: 50%;

12.AB Photoshop的工具使用情况。 矩形选框工具：可设置为“添加到选区”、“从选区中减去” 魔棒工具：可设置取样“容差” 吸管工具：可设置取样大小 切片工具：可选择文字的内阴影，颜色叠加等效果 横排文字工具：可设置文字的内阴影，颜色叠加等效果

13.BD CSS选择器 B【相邻兄弟选择器】（Adjacent sibling selector） 可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟 如果需要选择紧接在另一个元素后的元素， 而且二者有相同的父元素， 可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落p的上边距， 可以这样写： h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落， h1 和 p 元素拥有共同的父元素”。

D【后代选择器（descendant selector）】 又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}

语法解释 在后代选择器中，规则左边的选择器一端包括两个 或多个用空格分隔的选择器。 选择器之间的空格是一种结合符（combinator）。 每个空格结合符可以解释为“... 在 ... 找到”、 “... 作为 ... 的一部分”、“... 作为 ... 的后代”， 但是要求必须从右向左读选择器。 因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。 如果要从左向右读选择器，可以换成以下说法： “包含 em 的所有 h1 会把以下样式应用到该 em”。

14.ABD CSS选择器:first-of-type E:first-of-type { sRules }  要使该属性生效，E元素必须是某个元素的子元素. CSS属性 overflow overflow 属性规定当内容溢出元素框时发生的事情。 visible | hidden | scroll | auto | inherit

visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。 请使用 "display" 属性来创建不占据页面空间的不可见元素。 visible | hidden | collapse | inherit

ul>li 选择子元素 如果您不希望选择任意的后代元素， 而是希望缩小范围，只选择某个元素的子元素， 请使用子元素选择器（Child selector）。 如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

height:auto 默认。浏览器会计算出实际的高度。

line-height:nomal 默认。设置合理的行间距。

display:none 表示此元素不会被显示。 display 属性规定元素应该生成的框的类型。

flex:none 表示与 0 0 auto 相同。 flex 属性用于设置或检索弹性盒模型对象的子元素 如何分配空间。

15.AD CSS属性display display 属性规定元素应该生成的框的类型。 值 inline-block，行内块元素 block，此元素将显示为块级元素，此元素前后会带有换行符。 inline，默认。此元素会被显示为内联元素，元素前后没有换行符。

16.√ HTML中，英文空格的实体是 

17.× 一个元素设置了top:10px后，它会在原来的位置上向下偏移10px top: 需要搭配position使用

18.× 绝对定位的参照物是其父亲 绝对定位是“相对于”最近的已定位祖先元素， 如果不存在已定位的祖先元素， 那么“相对于”最初的包含块。

19.√ <!-- /XXX -->符合HTML注释语法

20.√ animation动画默认只播放一次 animation animation-iteration-count 规定动画被播放的次数。默认是 1。

21.√ CSS属性绝对定位 position:absolute 绝对定位元素的默认宽度是其参照物的宽度

22.矩形选框工具 如果要将图片尺寸减小到指定区域的话， 可以先用矩形选框工具选择所需区域， 再选择图像菜单下的“裁剪”，来减小画布。

23.36px，从父元素继承line-height属性的值。 CSS属性line-height设置行间的距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半， 分别加到一个文本行内容的顶部和底部。 可以包含这些内容的最小框就是行框。

值%，基于当前字体尺寸的百分比行间距。

inherit，规定应该从父元素继承line-height属性的值。

24. text-indent CSS属性overflow: 属性规定当内容溢出元素框时发生的事情。 值hidden：内容会被修剪，并且其余内容是不可见的。 overflow:hidden;text-indent:-2000px;

已知HTML结构<div class="a">Hello World</div> 如果希望文字在网页中不可见。

25.blue CSS选择器的优先级:last-child 例：.parent p:last-child{color:blue;} 指定属于其父元素parent的 最后一个子元素的p元素的背景色

26.no-repeat CSS属性background-repeat 使背景图不平铺 .bg{background-image:url(xxx.png); background-repeat:no-repeat;} 【背景重复】 如果需要在页面上对背景图像进行平铺， 可以使用 background-repeat 属性。

background-repeat 属性 设置是否及如何重复背景图像。 默认地，背景图像在水平和垂直方向上重复。

repeat-x 和 repeat-y 分别导致图像只在水平 或垂直方向上重复， no-repeat 则不允许图像在任何方向上平铺。 默认地，背景图像将从一个元素的左上角开始。

27.for label元素的属性for：HTML5中的新属性， 规定label绑定到哪个表单元素。

当用户点击label时，能聚焦到input， <label     "username">用户名：</label> <input name="username" id="username"> label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。 如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时， 浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。

28.method form元素的属性method:HTML5中的新属性。 值有get、post，规定用于发送form-data的HTTP方法。 定义表单的提交方式， <form method="post"></form>