CSS易错题总结（更新中）

1、CSS 指的是？

Cascading Style Sheets

2、在 HTML 文档中，引用外部样式表的正确位置是？

<head>部分

3、请判断以下说法是否正确：如需定义元素内容与边框间的空间，可使用 padding 属性，并可使用负值？

错误。（margin可以，padding不行）

4、如何产生带有正方形项目的列表？

正确答案：list-style-type: square

5、下列哪个不属于id与class之间的区别：

正确：id在文档中只能使用一次，而class可以多次使用

正确：id比class具有更高的样式优先级

正确：一个元素只能有一个id属性值，却可以拥有多个class属性值

错误：在class中可以定义:hover伪类，在id中不能定义

解释：在样式表定义一个样式的时候，可以定义id也可以定义class。

1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

2、id一个页面只可以使用一次；class可以多次引用。

3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

6、在不考虑H5的情况下,下列哪些值是可以作为标签的type属性的属性值。（）

a. text

b. submit

c. button

d. date

答案：abc

以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

7、CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。

内联元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

8、innerHTML、innerText、outerHTML

例子：<div id="test"><span style="color:red">test1</span>test2</div>

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red"> test1 </span> test2 </div>

8、标准盒子模型和IE盒子模型

IE盒子模型和标准盒子模型都是由四个部分组成的：margin,border,padding,content这四个部分！！！

不同的是在标准盒子模型中content是一个独立的部分不包含其他部分！！但是在IE盒子模型中content包含了border,padding,是一个总体的概念！！

9、css中clear的作用？

clear : none | left | right | both.

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

10、

11、form表单中input元素的readonly与disabled属性：

disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交

readonly规定输入字段为只读。input内容会随着表单提交。

无论设置readonly还是disabled，通过js脚本都能更改input的value

12、DHTML

DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

包括：

①动态内容(DynamicContent)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

动态排版样式(Dynamic Style Sheets)：W3C的CSS样式表提供了设定HTML标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

13、置换元素

他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。

他们的性质同设置了display:inline-block的元素一致。

14、css属性overflow属性

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

15、下面哪个属性不会让 div 脱离文档流（normal flow）？答案c

position: absolute;

position: fixed;

position: relative;

float: left;

css的定位机制有三种，分别是1：文档流，2：浮动（float），3定位（position）

文档流的意义就是按照HTML里面的写法就是从上到下，从左到右的排版布局;

A：position: absolute;

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；都绝对定位了，肯定脱离了文档流。。

B:position: fixed;

生成绝对定位的元素，相对于浏览器窗口进行定位;相对于浏览器了，也和正常顺序排下来没什么关系。。

C:position: relative;

生成相对定位的元素，相对于其正常位置进行定位。生成相对定位，也就是说还在原本的上下左右之间，上下左右的元素都不变，so这个没有能脱离文档流。。就这个了

D:float: left;都浮动出去了，还上哪保持原位置去

16、要运用css3动画，你需要运用@keyframes规则 animation属性

17、display: none 和 visibility:hidden

display: none；不为被隐藏的对象保留其物理空间；

visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

总结：

display:none改变了dom的结构，所以产生了reflow visibility:hidden没有改变dom结构，触发repaint