说一下边距重叠(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即可 
  • 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:

  1. 通过link用href引入的CSS在head中会阻塞页面的渲染，CSS加载实现才会进行渲染，所以渲染进去就是带款式的
  2. 会阻塞js的执行，因为js执行可能会操作DOM，所以CSS加载完之前执行js是可能会有问题的
  3. 然而不会阻塞js(内部脚本)的加载，因为webkit有一个HTMLPreloadScanner类也就是一个事后扫描器，能够事后扫描前面的词法，前面代码中所须要的资源都会通过预资源加载器来发送一个申请，申请相干的后续须要的资源，所以不会阻止加载，但会阻止执行

src:

  1. 通过script用src间接引入js会阻塞页面的渲染(没有defer和async的状况下)，因为js很可能操作DOM批改文档构造
  2. 阻止页面渲染然而js不阻塞后续资源的加载，因为webkit减少了事后扫描器和预资源加载器，在执行javascript代码的时候会暂停以后javascript代码的执行，而后应用事后扫描器去扫描前面的代码，如果前面有援用到其余资源的时候就应用预资源加载器去发送申请并发地申请后续的资源，所以外表上看js阻止了页面渲染就应该阻止了脚本加载，然而实际上，咱们不可能因为一个js的执行就影响后续N个js的加载这自身就是不合理的，所以webkit就进行了一个解决，通过预加载的形式去对后续资源做事后加载
  3. 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>

结语

点赞反对、手留余香、与有荣焉