Html&css刷题知识记录

为了打好基础，就去牛客刷题了….
发现很多题还是考的很细的，平时没有注意到的题考了我一脸懵逼，所以记录一下那些不熟悉的，不知道的，弄混的，记错的题目即解析，回头再回来复习~

---

1.在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？


2.下面哪些是HTML5 新增的表单元素？

datalist 元素规定输入域的选项列表。
keygen 元素的作用是提供一种验证用户的可靠方法。keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。（目前支持性很差）
output 元素用于不同类型的输出
3.iframe的使用场景有？

iframe可用在以下几个场景中：
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4： 在上传图片时，不用flash实现无刷新。
5： 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

4.可继承的样式属性包括（）

css中，边框，盒子模型，背景属性属于不可继承属性 字体，文本样式属性属于可继承属性

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。
5.

AB visiblity:看不见，摸的着. display:看不见，摸不着. display是dom级别的，可以渲染和重绘。 visiblity不是dom级别的，不能重绘，只能渲染

6.关于栅格系统，以下说法正确的是
会有自动的padding样式
会有自动的margin样式
其字体默认为14px
其box-sizing默认为border-box

栅格系统有自动的padding,无自动margin,默认字体14px,box-sizing默认为border-box

7.下列关于比较Ajax与Flash的优缺点，相关描述正确的是？
Ajax的优势在意在于开放性，易用性及易于开发
Flash的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源
Ajax最主要的批评就是它可能破坏浏览器的后退功能
flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间
正确答案: A B C D
1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。
2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
3.Ajax的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。
4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题

8.请选出用于标题的标签

MDZZ…只有h1到h6

9.下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？
声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示
DOCTYPE不存在或格式不正确会导致文档以标准模式呈现
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

文档类型
DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。
浏览器模式
浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
DOCTYPE 切换
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

10.关于下列CSS选择器：ID选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是：（）

11.当margin-top、padding-top的值是百分比时，分别是如何计算的？

可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

CSS权威指南中的解释：

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。
12.
13.
这个题……很坑，还好看的仔细
首先span不是块级元素，是不支持宽高的，但是style中有了个float：left；就使得span变成了块级元素支持宽高，height:100%;即为，200，宽度由内容撑开。
但是内容中的 i 是绝对定位，脱离了文档流，所以不占父级空间，所以span的width=0
14.

置换元素的意思是 展现不是由CSS来控制的元素。这些外部元素的展现不依赖于CSS规范
15.

答案是4444
每个li标签的onclick事件执行时，本身onclick绑定的function的作用域中没有变量i，i为undefined,则解析引擎会寻找父级作用域，发现父级作用域中有i，且for循环绑定事件结束后，i已经赋值为4，所以每个li标签的onclick事件执行时，alert的都是父作用域中的i，也就是4。这是作用域的问题。

16.

17.
1.常见的块级元素(自动换行， 可设置高宽 )有：
div,h1-h6,p,pre,ul,ol,li,form,table,label等
2。常见的行内元素（无法自动换行，无法设置宽高）有：
a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
3.常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：
(button,input，textarea,select), img等
4.label元素不会是浏览器默认的行块级元素， 实践出真知
input默认情况下可以设置可设置高宽，不会自动换行。但是label并没有变化（为了看的更加明显，所以给label加了边框）。
手动设置label的display属性为inline-block，才能实现可设置高宽，不会自动换行的效果。

18.

19.下面有关CSS中link和@import的区别，描述错误的是？

20.下列哪个操作是W3C标准定义的阻止事件向父容器传递：

DOM中的事件对象：（符合W3C标准）
preventDefault() 取消事件默认行为
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
stopPropagation() 取消事件冒泡对当前节点无影响。
IE中的事件对象：
cancelBubble() 取消事件冒泡
returnValue() 取消事件默认行为

21.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

22.

23.