BFC 现象
两个div上下排列，都设置 margin 会怎样？
会发生边距重叠，margin 都大于0就取较大值，一正一负就相加，都负取较大绝对值
为什么会这样？就是由于 BFC。
BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文
BFC渲染规则或特性：
- BFC元素垂直方向的边距会发生重叠，由 margin 决定
- BFC的区域不会与浮动元素的区域重叠
- BFC是一个独立的容器，子元素不会影响外面元素
- 计算BFC高度的时候，浮动元素也会参与计算
怎么创建BFC或触发BFC：
- html 就是一个 BFC
- float值不为none,也就是说设置了浮动即可
- position的值为absolute或者fixed
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- overflow为auto或hidden
BFC使用场景：
- 外边距重叠，如
父子元素都设置了margin-top
兄弟元素margin-bottom和margin-top会重叠
空元素设置了上下margin值不一样
这三种情况没有BFC的话，margin会重叠取margin较大的那个 - 左边定宽，右边自适应，只需要给右边创建BFC即可
BFC不会向左侧延伸 - BFC可以阻止浮动元素的覆盖。
父元素没有设置高度，子元素浮动了，不参与父元素高度计算。当父元素没设置高度或高度为0，而子元素浮动了，就会导致父元素下面的兄弟元素向上顶，与浮动了的子元素重叠，只需给父元素创建BFC即可
清除浮动的几种方法
由于父元素没写高度时，子元素浮动后会导致父元素发生调试塌陷，所以需要清除浮动
- 给父级设置 overflow: hidden
- 给父级设置高度
- 父级也设置成浮动
- 浮动元素下添加空标签 div 并设置 CSS 样式:{ clear: both;height:0;overflow:hidden }
- 使用伪元素，如下
.clearfix::after {
content: "";
display: table;
clear: both;
}
媒体查询
@media only screen and(max-width: 1480px){ ... }
使用 only 主要是为了兼容旧浏览器，而在现代浏览器中两者没有区别。
HTML使用标签定时自动刷新或跳转
<!-- 5秒后刷新并自动跳转到home.html -->
<meta http-equiv="Refresh" content="3; URL=home.html">
<!-- 5秒后自动刷新当前页面 -->
<meta http-equiv="Refresh" content="5">
使用场景：
- 实现PPT自动播放功能或者自动返回首页
- 做大屏幕监控的时候用这样的方法来自动刷新
缺点：刷新和跳转是不可取消的，如果需要动态刷新或者手动取消的，还是推荐定时器。
alt和title的作用及区别
共同点：有利于SEO
不同点：alt是图片不能正常显示时出现的提示信息；title是鼠标移到元素上时显示的提示信息，而且大多数标签都支持title属性，但是优先级要低于alt(都在图片上图片不能正常显示时)；title内容可以比alt更长
SEO（搜索引擎优化）
- 优化网站结构：合理规划网站结构，使得搜索引擎能够更好地理解网站内容。包括扁平化目录结构、清晰导航和面包屑导航等。
- 语义化书写HTML代码：使用符合语义化的标签，如h1、h2等，并合理使用alt属性，有助于搜索引擎理解网页内容。
- 优化图片：为图片添加alt属性，并使用描述性的标题和标签，有助于搜索引擎理解图片内容。
- 提高页面加载速度：通过优化图片、压缩CSS和JavaScript、利用CDN等方式，提高页面加载速度，提高用户体验和搜索引擎的抓取效率。
- 利用HTTP头部信息：合理设置HTTP头部信息，如Cache-Control、ETag等，可以告诉搜索引擎如何缓存页面，减少不必要的爬取。
- 避免常见的SEO陷阱：如避免使用JavaScript进行链接跳转、避免重复内容等，以免被搜索引擎惩罚。
link 和 @import
link：是html引入方式；最大限度支持并行下载；优先级高于 @import；可以通过 ref="alternate stylesheet" 指定候选样式
@import：是CSS引入方式，必须写在样式之前；可以嵌套，但过多嵌套会导致串行下载，出现文档样式暂失效；老浏览器不支持
利用标签提升渲染速度
link标签：通过rel属性进行预加载，如
<link rel="dns-prefetch" href="//xx.baidu.com">
rel有几个属性：
- dns-prefetch：浏览器会对href中的域名进行DNS解析并缓存，当再次请求该域名资源时，能省去查询IP的过程，从而减少时间损耗
- prefetch/preload：都是预先下载并缓存某个资源，不同的是prefetch可能会在浏览器忙时被忽略，而preload则一定会预先下载
- preconnect：正式发送http请求前预先执行DNS解析、TCP握手、TLS协商。通过消除往返延迟来节省时间
- prerender：浏览器不仅会加载资源，还会解析执行页面，并进行预渲染
script标签：由于浏览器底层运行机制，渲染引擎在解析HTML时遇到script标签引用文件是会暂停解析过程的，同时通过网络线程加载文件，文件加载后切换至js引擎执行相应代码，代码执行完成后再切换回渲染引擎继续渲染页面，在首次渲染过程中可能并不依赖这些js文件，这就延长了页面渲染的时间，为了减少这些时间损耗，可以通过script标签三个属性来实现：
- async：立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后再阻塞渲染引擎并执行js先
- defer：立即请求文件，但不阻塞渲染引擎，等解析完HTML再执行js
- H5标准的type="module"：让浏览器按照ES6标准将文件当模板解析，默认阻塞效果和defer一样，也可以配合async在请求完成后立即执行
样式穿透
>>>、/deep/、:deep()、::v-deep都是深度选择器，或者说样式穿透，用于组件内修改UI组件库默认样式而不影响全局
区别： >>> 只作用于 CSS，在 Less/Sass 中无法识别，所以用 deep 代替，在 Vue3.0之前用 /deep/，Vue3.0之后可能会报错，所以推荐用 :deep(.class)，::v-deep 已弃用。
隐藏元素的区别
- visibility:hidden; 隐藏元素，会继续在文档流中占位，所以触发重绘，隐藏后不能触发点击事件
- display:none; 隐藏元素，会从页面中删除掉，所以会触发重排和重绘
- opacity:0; 透明，会继续在文档流中占位，所以触发重绘。由是是作用于元素自身，所以子元素会继承，全部变透明，透明后可以触发点击事件
- rgba(0,0,0,0)：透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件
