HTML+CSS阶段性习题知识点讲解

一、选择题：

1.在css选择器中的权重：

        ！important > style属性 > id选择器 > 类、伪类、结构伪类、属性选择器 > 标签、伪元素选择器 >  通配符选择器 >  继承的样式

     （1）css选择器权重越大优先级越高

• 内联样式表的权重值最高，值为1000。
• id选择器的权重值为100。
• class选择器的权值为10。
• 类型（元素）选择器的优先级为1。
• 通配符选择器的优先级为0。

2.HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

        getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

        详细教程可参考：HTML 画布 | 菜鸟教程

3.（1）display：none：会将元素隐藏并且不占据空间，会导致重排和重绘

                *重排一定会重绘,而重绘不一定会引起重排*

     （2）visibility：hidden     :只会导致重绘

     （3）opacity：0      ：占有空间，并且可以发生点击事件

	display:none	visibility:hidden	opacity:0
是否占用空间	否	是	是
是否可以发生点击事件	否	否	是
是否可以被子元素继承	否	是	是
是否可以进行DOM事件监听	否	否	是

4. （1）em：是一个相对单位，是相对于当前对象内文本的font-size，如果当前文本字体尺寸没有          设置，则响度昂与游览器默认字体尺寸即1em=16px

        特点：em的值不是固定的；

                   em会继承父元素的字体大小

     （2）rem：是一个相对单位，是相对于HTML根元素

                特点：rem为元素设定字体大小的时候，是相对于根元素进行计算的

                          当我们改变根元素下的字体大小时，子元素的大小都会改变

                          通过rem既可以做到只修改根元素就可以成比例调整所有字体

     （3）二者区别：

1. rem是相对于根元素进行计算，而em是相对于当前元素或父元素的字体大小。
2. rem不仅可以设置字体的大小，还支持元素宽、高等属性。
3. em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系

        （4）题目解析：

                .parent的font-size：根据根元素没有设置，默认为16px，即1rem=16px，则.parent的font-size为32px；B正确

                .parent的width：根据.parent的font-size为32px；则width（20em） = 32px * 20 = 640px；A错误

                .child的font-size：根据em会继承父元素的字体大小；则.child的font-size（2em）= 2 * 32px=64px；C错误

                .child的width：20rem = 20 *16px = 320px；D正确

5.word-spacing：属性增加或减少单词间的空白（只可用于英文（单词之间））

   letter-spacing：属性增加或减少字符间的空白（可用于中文，也可用于英文（这是增加每个字母之间））

6.css样式可以继承的有：

        opacity、font-size、color、word-spacing、letter-spacing、font-family、text-indent、text-align、text-transform、line-height、visibility、cursor等等