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

Posted 2021-08-21 老张在线敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有关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.BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC
中的两个相邻的盒子在垂直方向发生 margin 重叠的问题 BFC
是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

5.CSS 中 link 和@import 的区别是：

Link 属于 html 标签，而@import 是 CSS 中提供的在页面加载的时候，link 会同时被加载，

而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS @import 只有在 ie5 以上才可以被识别，

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

6.px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。 em 得值不是固定的，并且 em
会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,
10px=0.625em

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时，将采用怪异模式解析计算