关于前端:几个HTMLCSS知识点

42次阅读

共计 4611 个字符，预计需要花费 12 分钟才能阅读完成。

说一下边距重叠(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 + content 4 局部组成。

盒模型有两种，规范模式 和怪异模式 也叫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>

结语

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

正文完
前端
发表至： 前端
2021-09-28
 0
关于前端:Day-90100-前端如何启动PHP后端项目
关于前端:重构前端知识体系之HTML带你重忆HTML那些记忆模糊的标签
关于前端:三生万物万企明道｜明道云发布三周年
关于前端:vuepluginhiprint使用打印篇