有关html，css的实用知识总结（二）

1. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？

1.id 选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）

• 可继承： font-size font-family color, UL LI DL DD DT;
• 不可继承 ：border padding margin width height ;
• 优先级就近原则，样式定义最近者为准;
• 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比 内联优先级高

2. 前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html 表示层 CSS 行为层 js

3.html 语义化是什么？

1. 当页面样式加载失败的时候能够让页面呈现出清晰的结构

2. 有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）

3. 便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析

4.什么是css sprite（精灵图）?

精灵图又叫雪碧图，是一种网页图片处理方式
其实就是将网页中的一些背景图片整合到一个图片文件中在利用css中的background-image/repeat/position进行背景图处理
优点：加载网页图片时，减少服务器的请求次数，从而提高页面的加载速度
缺点：耗费内存，影响浏览器的缩放功能，维护比较麻烦

5.为什么有的时候位移使用c3中的translate而不用定位？

因为translate是transfrom中的值，更改不会触发重绘和重排，但是会触发合成，而定位会触发回流，因此translate效率更高，可以使动画更加流畅

link 是 html标签，不存在浏览器兼容性问题 Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

6.为什么要初始化css

因为浏览器的兼容性问题，不同的浏览器标签的默认值是不一样的，如果没有对css文件进行初始化往往会出现不同浏览器之间的页面差异显示

7.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优 化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。 如果图片为 css 图片，可以使用
CSSsprite，SVGsprite，Iconfont、Base64 等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致

8. 哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width heigh

9. 标准盒模型和怪异盒模型的区别

标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。标准模式下总宽度=width+margin（左右）+padding（左右）border（左右）；怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）。标准模式下如果定义的DOCTYPE缺失，则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算

10.HTML 与 XHTML——二者有什么区别？

1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 "–"