书接上文本前端基础自检html&&css🚀🚀🚀上，继续检阅对css和HTML的认识。
HTML5的离线储存怎么使用，它的工作原理是什么？
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
浏览器乱码的原因是什么？有什么解决方法？
原因：浏览器出现乱码的主要原因是字符编码不匹配，也就是说浏览器解码网页内容使用的编码格式和网页实际的编码格式不一样。就比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这种情况下浏览器打开就会出现乱码。或者HTTP 响应头未指定编码或写错了导致服务器返回的 Content-Type 错误。
解决办法：
- HTML 中正确声明字符编码
<meta charset="UTF-8">
- 设置服务器响应头
Content-Type: text/html; charset=UTF-8
- 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换
块级元素有哪些？行内元素有哪些? 空元素又有哪些？
块级元素:独占一行，默认会换行,可以设置宽高、外边距、内边距,常用于构建页面结构（布局）。
| 元素 | 作用说明 |
|---|---|
<div> | 通用容器 |
<p> | 段落 |
<h1>~<h6> | 标题 |
<ul> / <ol> / <li> | 列表结构 |
<table> | 表格 |
<form> | 表单容器 |
<header> / <footer> / <section> / <article> / <nav> | HTML5 语义结构块 |
<blockquote> | 引用内容 |
<hr> | 分割线（也是空元素） |
<figure> / <figcaption> | 图文组合容器 |
行内元素：不换行，多个可在一行内排列，不能设置宽高，一般常用于文本修饰、嵌套、链接等。
| 元素 | 作用说明 |
|---|---|
<span> | 通用内联容器 |
<a> | 超链接 |
<strong> / <b> | 加粗文本（有/无语义） |
<em> / <i> | 斜体文本（有/无语义） |
<img> | 图片（虽然视觉上占据空间，但属于行内元素） |
<input> | 表单输入（inline-block） |
<label> | 表单标签 |
<abbr> | 缩略语解释 |
<code> / <kbd> / <samp> | 代码相关标签 |
<br> | 换行符（空元素） |
空元素：没有闭合标签，只能单独使用
| 元素 | 说明 |
|---|---|
<br> | 换行符 |
<hr> | 水平线 |
<img> | 图片 |
<input> | 表单输入框 |
<meta> | 元信息 |
<link> | 外部资源引入（如 CSS） |
<source> | 媒体资源源 |
<area> | 图像映射区域 |
<col> | 表格列样式定义 |
<base> | 设置链接基准路径 |
单行文本溢出隐藏，多行文本溢出隐藏
单行实现：
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
多行实现：
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
常用的CSS布局单位
- Absolut 绝对单位
| 单位 | 含义 | 示例 |
|---|---|---|
px | 像素（最常用） | width: 100px |
pt | 点（1pt = 1/72 英寸） | 常用于打印 |
像素（
px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
- CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
- 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
- Relative 相对定位
| 单位 | 相对谁 | 示例 | 说明 |
|---|---|---|---|
em | 当前元素的字体大小 | margin: 2em | 父元素 font-size 为 20px，则 2em = 40px |
rem | 根元素（html）的字体大小 | padding: 1.5rem | 如果 html { font-size: 16px }，则 1rem = 16px |
% | 父元素相关 | width: 50% | 表示占父元素一半的宽度 |
| 单位 | 意义 | 示例 |
|---|---|---|
vw | 视口宽度的 1% | width: 50vw → 屏幕宽度一半 |
vh | 视口高度的 1% | height: 100vh → 占满整个屏幕高度 |
三栏布局实现：
height: 100px; } .left { float: left; width: 100px; height: 100px; background: tomato; } .right { float: right; width: 200px; height: 100px; background: gold; } .center { height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; }
CSS 优化和提高性能的方法有哪些？
- 尽量选择简洁的选择器
-
避免复杂嵌套：
body div ul li span {...}❌ -
使用类选择器优先，性能比标签、属性选择器更好
-
避免使用
*通配符或[attr=value]等高开销选择器
-
- 减少CSS体积，使用打包工具将css文件压缩
- 不使用@import前缀，它会影响css的加载速度。
- 使用 CSS 预处理器（如 SCSS / Less）
- 非核心样式使用异步加载 CSS
- 慎重使用高性能属性：浮动、定位。
- 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
