前端开发必会的HTML/CSS硬知识 （二）

 

​文/小魔女

本文简介

• 前端开发系列的第二篇文章
• 基础知识就像是一把宝剑，能让你驰骋在前端领域的战场
• 知识亦有温度，让咱们对新知识永远保持热度吧

html渲染、css解析

• 在面试中，这部分基础知识，很是常见。
• 将以最简洁的文字，让读者掌握。

浏览器从开始解析HTML到渲染结束都经历了什么？

• 解析HTML文件，建立DOM树
• 解析CSS，造成CSS对象模型
• 将CSS与DOM合并，构建渲染树（rendering tree）
• 布局和绘制

浏览器解析CSS是从左开始仍是从右？为何？

• 从右。
• 由于从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；
• 而从左向右的匹配规则的性能都浪费在了失败的查找上面。

reflow(回流)和repaint(重绘)的区别？

回流必定会触发重绘，重绘不必定触发回流。

reflow:改变元素在网页中的布局和位置

致使回流发生的状况：

1. 改变窗口大小
2. 改变文字大小
3. 内容的改变，如用户在输入框中敲字
4. 激活伪类，如:hover
5. 操做class属性
6. 脚本操做DOM
7. 计算offsetWidth和offsetHeight
8. 设置style属性

对应的css属性以下：

1. 盒子模型相关属性
2. 定位及浮动属性
3. 节点内部的文字结构


repaint:改变不影响元素。在网页中的位置的元素样式时，根据浏览器新属性从新绘制一次。不会带来从新布局。

致使重绘发生的状况：

1. 改变visibility
2. outline
3. 字体颜色、背景色

致使重绘的css属性以下：


css 隐藏属性的对比

• display:none; 重排 （不占空间）
• visibility: hidden; 重绘 （占空间）
• overflow:hidden; 重绘+重排 （占空间，超出隐藏）

HTML的解析会由于什么阻塞？静态文件引用如何放置合理？

1. css加载不会堵塞html解析
2. css加载会堵塞dom树渲染
3. css加载会堵塞js语句的执行
4. js的加载会堵塞html解析

css文件放前面，js文件放在html和css的后面

如何作页面加载优化（减小白屏时间，加快页面打开速度）

1. cdn加速
2. css代码压缩
3. 合理使用浏览器缓存（设置cache-control,expires,E-tag。注意，文件更新后，缓存带来的影响。能够在文件名字后面加一个版本号）
4. 减小http请求

为何要用语义化标签？

• 增长代码的可读性，以及便于代码维护
• 便于SEO
• 让浏览器或者网络爬虫更好地解析以及分析内容

如何适配移动端？

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制代码

图片适配

//使用这个
img {max-width:100%} //最大宽度显示为自身的100% 

//不用这个
img {width: 100%} //宽度为外层容器的宽度 图片会被无情地拉伸
复制代码

media 媒体查询

media screen and (min-width:1000px) {
    body{
        background:red;
    }
}
复制代码

动态rem方案（跟媒体查询配合，实现响应式布局）

• 为html设置基准值 font-size:100px
• 页面上的使用，margin:500px 400px; => margin:5rem 4rem; 由于rem是相对根html计算的 x/100 = ?rem
• 根据当前屏幕的宽度和设计稿的宽度，算出html的基准值 假设当前屏幕宽度为375px 设计稿上是640px
• 当前屏幕宽度/设计稿宽度 = x / 100 => x = 当前屏幕宽度/设计稿宽度*100 = 58.59375 px

动态计算 js代码

(function (){
    const desWid = 640
    const winWid = document.documentElement.clientWidth
    const oMain = document.getElementById('main')
    const ratio = winWid / desWid
    if(winWid > desWid) {
        oMain.style.width = desWid + 'px'
        oMain.style.margin = '0 auto'
        return
    }

    oMain.style.fontSize = ratio*100 + 'px' 
} ())
复制代码

CSS小知识

除px还有什么单位？都如何计算？

任意浏览器的默认字体高都是16px。

• px：相对于显示屏分辨率而言
• em: 若是子元素没有设置font-size,将会相对于父元素 .father{font-size:16px;} .son{font-size:2em} 2em = 2*16
• rem：相对于html根元素 html{font-size:20px;} .div{font-size:2rem} 2rem = 2*20
• rpx: 微信小程序（规定屏幕宽为750rpx）

如何实现0.5px的边框？

1. transform:scale(0.5)

   • 下边框有线
     <style> div{ width: 200px; height: 200px; position: relative; background-color: pink; } div::before{ content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; border-bottom: 1px solid black; transform: scale(0.5); }
     11
   • 四条边都有线
     div{ width: 200px; height: 200px; position: relative; background-color: pink; } div::before{ content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid black; transform-origin: 0 0; /* 设置元素基点 x和y坐标 */ transform: scale(0.5); }

2. 渐变

   <style>
       div{
           width: 200px;
           height: 200px;
           position: relative;
           background-color: pink;
       }
       div::after{
           content: ' ';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 1px;
           background-image:linear-gradient(0deg, transparent 50%, black 50%)
       }
   </style>
   复制代码

写个波浪线

<style>
       div{
        height: 0.25em;
        width: 20rem;
        background-size: 0.5em 0.5em;
        background-image: linear-gradient(45deg, transparent 45%, red 55%, transparent 60%),  linear-gradient(135deg, transparent 45%, red 55%, transparent 60%);
        background-repeat: repeat-x;
    }
      </style>
复制代码

禁止用户操做

如何禁止用户缩放？

• 缩放系数是0.0-1.0 用户缩放选项是yes|no
• ios10以后不接受meta标签，监听gesturestart,阻止默认事件

  document.addEventListener('gesturestart',function(e) { e.preventDefault() })

如何禁止用户全选文字内容？

• css

  body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

• js

在须要禁止的dom加上这句

ontouchstart="return false;"
复制代码

备注： 手机uc浏览器，meta标签的name=browsermode content= application 这样就没法调起长菜单

魔女有话说

在权贵主导的世界里想财务自由，你首先得努力变成和他们同样的人，剩下的就交给命运吧！ 

本文使用 mdnice 排版