通过在牛客网答题总结的前端考题（一）HTML+CSS

HTML&CSS

1. 选择器的优先级：

• 在属性后使用！important
  
• 作为style属性下载元素的内联样式：权重1000
• id选择器：权重100
• 类选择器、伪类、属性选择器：10
• 通配符选择器：无权重

2. disabled指当input元素加载时禁用此元素，input内容不变。readonly规定输入字段为只读，input内容会随表单提交。

3. bootatrap屏幕大小界定：

超小屏	小屏	中屏	大屏
<768px	>=768px	>=992px	>=1200px
.col-xs-	.col-sm-	.col-md-	.col-lg-

4. 块级元素：

特点：

• 每个块级元素都从新的一行开始，并且其后的元素另起一行
• 元素的高度、宽度、行高以及顶和底边距都可设置
• 元素的宽度在不设置的情况下，是它本身父容器的100%
• <div>, <p>, <hx>, <ol>, <ul>, <dl>, <table>, <address>, <blockquote>, <form>

内联元素特点：float会将其转化为块级元素

• 和其他元素在一行上
• 元素的高度、宽度及顶部和边距不可设置
• 元素的宽度就是它包含的文字或图片的高度，不可改变
• 常见内联元素：<a>, <b>, <span>, <i>, <em>, <strong>, <var>, <cite> <code>

内联块状元素：

• 和其他元素在一行
• 元素的高、宽、行高、底边距可设置
• <img>, <input>, <label>, <button>

5. 超链接CSS排列顺序

a:link{}    a:visited{}   a:hover{}    a:active{}

6. 浏览器内核引擎

• Trident：IE
• Gecko： Firefox
• Webkit：Safari， Google， Chrome，遨游3，猎豹，Opera
• Presto： Opera mini

7. 主流浏览器私有属性前缀：

• mozilla：-moz
• webkit：-webkit
• opera：-o
• trident：-ms

8. 样式属性的继承：

• 不可继承：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

9. 浏览器端存储技术：

• cookie：随着每次HTTP请求头信息一起发送，增加网络流量，能存储数据容量有限。
• userData：IE浏览器下存储数据
• sessionStorage：FF浏览器，仅限窗口级别，IE不支持
• localStorage：web storage互联网存储规范中的一部分。

10. 盒子模型组成部分：margin、padding、border、content

• IE：content包含border、padding， （宽度包括border、padding）
• W3C：content不包括其他部分

11. iframe的使用场景：

• 典型系统结构，左边功能树，右侧常见的table或表单等，为单独功能，单独分离出来
• ajax上传文件
• 加载别的网站内容、流量分析
• 在上传图片时，不用flash实现无刷新
• 跨域访问可以用到iframe，使用iframe请求不同域名下的资源

12. 清除浮动的几种方法及优缺点：

• 使用空标签清除浮动，clear: both;能清楚任意标签，增加无意义标签
• 使用overflow:auto;空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom：1，用于兼容
• 使用伪元素清除浮动（非IE）