几个HTML+CSS知识点

作者: IT沐华 | 来源:发表于2021-09-28 00:30 被阅读0次

说一下边距重叠(BFC)

BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文

BFC渲染规则：

BFC元素垂直方向的边距会发生重叠
BFC的区域不会与浮动元素的区域重叠
BFC是一个独立的容器
计算BFC高度的时候，浮动元素也会参与计算

怎么创建BFC或触发BFC：

float值不为none,也就是说设置了浮动即可
position的值为absolute或者fixed
display值为table相关的几个属性
overflow为auto或hidden

BFC使用场景：

外边距重叠，如
- 父子元素都设置了margin-top
- 兄弟元素margin-bottom和margin-top会重叠
- 空元素设置了上下margin值不一样
  这三种情况没有BFC的话，margin会重叠取margin较大的那个
左边定宽，右边自适应，只需要给右边创建BFC即可

image
BFC可以阻止浮动元素的覆盖。父元素没有设置高度，子元素浮动了，不参与父元素高度计算，由于父元素高度为0，导致父元素的兄弟元素向上顶，与子元素重叠，只需给父元素创建BFC即可

说一下盒模型及区别

盒模型就是在见面中页面元素占有位置大小都是由margin + border + padding + content4部分组成。

盒模型有两种，标准模式和怪异模式也叫IE模式，在IE8下DOCTYPE没有声明的话，会触发怪异模式，在IE8+浏览器中默认是标准模式。

标准模式：元素的width/height计算就是内容content的宽高

怪异模式：元素的width/height计算是border + padding + content相加的结果。

通过CSS的box-sizing属性切换模式，content-box就是标准模式，border-box就是怪异模式

SEO和语义化

SEO就是搜索引擎优化，利用搜索引擎的搜索规则来提高网站的自然排名

语义化就根据内容结构化选择合适的标签和特有的属性去格式化文档内容，在没有CSS的情况下也呈现出很好的内容结构，代码结构，便于开发者阅读和维护，同时也利于SEO

HTML自动刷新或跳转

除了定时器控制页面跳转还有更简洁的方法，比如meta标签

<!-- 5秒后自动跳转到page2.html -->
<meta http-equiv="Refresh" content="5; URL=page2.html">

<!-- 30秒后自动刷新当前页面 -->
<meta http-equiv="Refresh" content="30">

比如实现PPT自动播放功能或者自动返回首页，或者做大屏幕监控的时候用这样的方法来自动刷新，是不是很简单呢

当然它的缺点是刷新和跳转是不可取消的，如果需要动态刷新或者手动取消的，还是推荐定时器

如何利用标签提升渲染速度

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在请求完成后立即执行

href和src的区别

href是引用，src是引入

href:

通过link用href引入的CSS在head中会阻塞页面的渲染，CSS加载完成才会进行渲染，所以渲染出来就是带样式的
会阻塞js的执行，因为js执行可能会操作DOM，所以CSS加载完之前执行js是可能会有问题的
但是不会阻塞js(外部脚本)的加载，因为webkit有一个HTMLPreloadScanner类也就是一个预先扫描器，可以预先扫描后面的词法，后面代码中所需要的资源都会通过预资源加载器来发送一个请求，请求相关的后续需要的资源，所以不会阻止加载，但会阻止执行

src:

通过script用src直接引入js会阻塞页面的渲染(没有defer和async的情况下)，因为js很可能操作DOM修改文档结构
阻止页面渲染但是js不阻塞后续资源的加载，因为webkit增加了预先扫描器和预资源加载器，在执行javascript代码的时候会暂停当前javascript代码的执行，然后使用预先扫描器去扫描后面的代码，如果后面有引用到其他资源的时候就使用预资源加载器去发送请求并发地请求后续的资源，所以表面上看js阻止了页面渲染就应该阻止了脚本加载，但是实际上，我们不可能因为一个js的执行就影响后续N个js的加载这本身就是不合理的，所以webkit就进行了一个处理，通过预加载的方式去对后续资源做预先加载
js顺序执行，多个脚本会阻塞后续js逻辑的执行

>>>和/deep/的作用和区别

都是深度选择器，区别是在修改Element-ui组件样式的时候，Less/Sass无法识别>>>，所以用/deep/代替

Sass和Scss的作用和区别

这两个就是同一种CSS预编译器，简单说Scss是Sass的升级版，区别就是文件拓展名不同，语法不同，Sass以缩进表示嵌套，不用写{}和; 而Scss和我们CSS语法类似

alt和title的作用及区别

共同点是有利于SEO

不同点是alt是图片不能正常显示时出现的提示信息；title是鼠标移到元素上时显示的提示信息，而且大多数标签都支持title属性，但是优先级要低于alt(都在图片上图片不能正常显示时)，title内容可以比alt更长

水平垂直居中

固定宽高

.box {
    width: 300px;
    height: 300px;
}
.content {
    width: 100px;
    height: 100px;
}
...
<div class="box">
    <div class="content">这碗又大又圆，这面又长又宽</div>
</div>

注意啦，上面这部分是公共代码

absolute + 负margin

.box {
    position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
/*这里引入上面的公共代码*/

absolute + margin auto

.box{
    position: relative;
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*这里引入上面的公共代码*/

不固定宽高

posolute + translate

.box {
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
...
<div class="box">
    <div class="content">这碗又大又圆，这面又长又宽</div>
</div>

vertical-align + 伪元素

.box {
    width: 300px;
    height: 300px;
    text-align: center;
}
.box:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
...
<div class="box">
    <span class="content">这碗又大又圆，这面又长又宽</span>
</div>

flex【IE10】

.box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
...
<div class="box">
    <div class="content">这碗又大又圆，这面又长又宽</div>
</div>

grid【IE10】

.box {
    width: 300px;
    height: 300px;
    display: grid;
}
.content {
    justify-self: center;
    align-items: center;
}
...
<div class="box">
    <div class="content">这碗又大又圆，这面又长又宽</div>
</div>

table-cell【IE8】

.box {
    width: 300px;
    height: 300px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
...
<div class="box">
    <span class="content">这碗又大又圆，这面又长又宽</span>
</div>

writing-mode

.box {
    width: 300px;
    height: 300px;
    writing-mode: vertical-lr;
    text-align: center;
}
.content {
    writing-mode: horizontal-tb;
    display: inline-block;
    width: 100%;
}
...
<div class="box">
    <div class="content">
        <span>这碗又大又圆，这面又长又宽</span>
    </div>
</div>

结语

点赞支持、手留余香、与有荣焉