几个HTML+CSS知识点

说说外边距重叠（BFC）BFC是块级元素格式化上下文，相当于一个容器，里面的布局不会影响外面的元素。IFC是内联元素格式化上下文BFC渲染规则：BFC元素的垂直外边距会重叠BFC的区域不会和浮动元素的区域重叠BFC是一个独立的容器在计算高度的时候BFC，浮动元素也会参与计算如何创建BFC或触发BFC：float的值不是none，也就是说可以设置为float。position的值为absolute或fixeddisplay的值为table。与溢出相关的几个属性是自动的或隐藏的。父子元素设置了margin-top，兄弟元素margin-bottom和margin-top会重叠。空元素具有不同的上边距值和下边距值。如果这三种情况都没有BFC，那么margin就会重叠。取边距较大的设置左右宽度自适应，只需要为右边的BFC创建一个BFC就可以防止浮动元素被覆盖。未设置父元素高度，子元素浮动，不参与父元素高度的计算。由于父元素的高度为0，因此父元素的兄弟元素会上升并与子元素重叠。您只需要为父元素创建一个BFC。盒子模型和盒子模型的区别在于页面元素在会议中的位置和大小由margin+border+padding+content4部分组成。有两种盒子模式，标准模式和怪异模式，也叫IE模式。如果在IE8下不声明DOCTYPE，会触发怪异模式，IE8+浏览器默认为标准模式。标准模式：元素的宽/高计算是内容的宽高。怪异模式：元素的宽/高计算是border+padding+content相加的结果。通过CSS的box-sizing属性切换模式，content-box为标准模式，border-box为怪异模式SEO和semanticSEO是搜索引擎优化，利用搜索引擎的搜索规则来提高网站的自然排名Semantics是根据contentStructural选择合适的标签和特有的属性来格式化文档的内容，在没有CSS的情况下呈现出良好的内容结构和代码结构，方便开发者阅读和维护，也有利于自动刷新或者SEOHTML的跳转除了定时器控制页面跳转，还有更简洁的方法，比如meta标签例如实现自动播放功能PPT或者自动返回首页，或者做大屏监控，用这个自动刷新的方法是不是很简单？当然它的缺点是不能取消刷新和跳转。如果需要动态刷新或者手动取消，建议使用定时器来提高渲染速度。link标签通过rel属性Preload，比如rel有几个属性：dns-prefetch：浏览器会对域名进行DNS解析在href和缓存中，再次请求域名资源时，可以省略查询IP的过程，从而减少时间损失当浏览器繁忙时，preload肯定会预先下载preconnect：在正式发送http请求之前预先执行DNS解析、TCP握手和TLS协商。通过消除往返延迟来节省时间预渲染：浏览器不仅会加载资源，还会解析和执行页面，并预渲染脚本标签由于浏览器的底层运行机制，渲染引擎会在解析HTML时暂停当遇到脚本标签引用文件时，在解析过程中，会同时通过网络线程加载该文件。文件加载完成后，切换到js引擎执行相应的代码。代码执行完毕后，切换回渲染引擎继续渲染页面。但是第一次渲染可能不依赖这些js文件，从而延长了页面渲染时间，所以为了减少这些时间损失，可以使用script标签的三个属性来实现：async：立即请求文件，但是不阻塞渲染引擎，而是在文件加载完成后阻塞渲染引擎，先执行jsdefer:立即请求文件，但不阻塞渲染引擎。解析完HTML后，执行jsH5标准的type="module"：让浏览器按照ES6标准将文件解析为模板。默认阻塞效果和defer一样，也可以配合async完成href和src的区别，href是引用，src是href的引入：link引入的csswithhref会在head阻塞页面的渲染，而渲染只会在css加载完成后才进行，所以渲染会阻塞stylesjs的执行，因为js的执行可能会操作DOM，所以可能在css加载前执行js是有问题的，但是不会阻塞js（外部脚本）的加载，因为webkit有一个HTMLPreloadScanner类，它是一个预扫描器，可以预扫描后面的词法，而后续代码中需要的资源会通过前置资源加载器发送请求请求后续相关资源，所以不会阻止加载，但是会阻止src的执行：通过脚本直接使用srcjs的引入会阻塞渲染页面的（没有defer和async），因为js很可能会操纵DOM修改文档结构来阻止页面渲染，但是js不会阻塞后续资源的加载，因为webkit增加了pre-scanner和pre-resourceloader，当执行javascript代码时，会暂停当前javascript代码的执行，然后使用pre-scanner扫描后面的代码。如果后面有其他资源的引用，会使用前置资源加载器发送请求，并发请求后续资源，所以表面上看是js阻止了页面渲染，应该阻止了脚本加载，但实际上我们不可能因为一个js的执行而影响到后续N个js的加载。处理，通过预加载后续资源来预加载js顺序执行，更多该脚本会阻塞后续js逻辑的执行>>>和/deep/都是深度选择器。不同的是Less/Sass在修改Element-ui组件样式时无法识别>>>，所以使用/deep/替换Sass和Scss的作用和区别这两个是同一个CSS预编译器。简单的说，Scss就是Sass的升级版。不同的是文件扩展名不同，语法不同。Sass使用缩进表示嵌套，不用写{}和;scss和我们的CSS语法类似alt和title的作用和区别。共同点是有利于SEO。不同的是alt是图片无法正常显示时出现的提示信息；title是鼠标移到元素上时显示的提示。信息，大部分标签都支持title属性，但是优先级低于alt（当图片上的图片无法正常显示时），title内容可以比alt长，水平，垂直，居中，固定宽高。框{宽度：300px;高度：300px;}.content{宽度：100px;height:100px;}...这个碗又大又圆，这边又长又宽