对于web进阶的理解web1.0 广播型web2.0 视觉分享型web3.0 深度体验型
meta 标签详解
对于meta的理解一直很模糊，今天做一个详细拆解
定义<meta>元素提供有关页面元信息，比如针对搜索引擎，提供关键词和更新频度。
<meta> 标签位于文档的头部，不包含任何内容。
<meta> 标签的属性定义了与文档相关联的名称/值对。
在 HTML 中，<meta> 标签没有结束标签。 在 XHTML 中，<meta> 标签必须被正确地关闭。 注释：<meta> 标签永远位于 head 元素内部。 注释：元数据总是以名称/值的形式被成对传递的。
拆解meta标签有以下属性：
http-...
[css基本功] position的sticky（粘性布局）
众所周知，position的四个属性值为static、relative、absolute、fixed，在css3中新增了sticky，意为粘性布局
释义position: sticky 结合了static和fixed两者特性，当页面元素满足固定距离时，使用类fixed定位方式（top、right、bottom、left生效）；当未达到固定距离时，依照默认布局排列，top、right、bottom、left不生效。
Coding12345678910111213141516171819202122232425262728293...
[css基本功]border-image
最近在做cocos的时候，频繁涉及到九宫格切图，猜测cocos九宫格在web端的实现一定是css中的border-image
释义border-image 共有以下五种属性
这里，我们先只了解border-image-source、border-image-slice、border-image-repeat这三个属性。
border-image-source：边框的原始图片地址，这里特别说明一下，想要border-image生效，必须设置border的宽度和类型。
border-image-slice：边框图片的切割位置，最多有4个值，按照上...
css盒模型分类css的盒模型分两种：
W3C标准盒模型
IE盒模型
图示
他们的区别在于IE盒模型的 height/width = content + padding+ border
切换
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
[神奇的JS] 定时器校准
在实际编码中，我们总会使用setTimeout和setInterval去创建定时任务，如果对于时间精准度不高，满足业务要求还可，但是对于高时间精度的业务，我们还是需要一个相对精准的时钟。
创建定时器使用JS中常用的两个方法
12345678910console.log(performance.now());let _interval = setInterval(() => { console.log('interval', performance.now()); //do something}, 1000)let _timer ...
web首屏性能优化
web首屏性能和多个方面有关，白屏时间、首屏时间、网络请求时间等，由此衍生了多个定义如FCP、LCP、TTI等。
定义解释
白屏时间:
一般指浏览器开始渲染或者解析完的时间是白屏结束的时间点。白屏时间 = firstPaint - performance.timing.navigationStart || pageStartTime
navigationStart:
unloadEventStart:
表示前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0。
unloadEve...
HTML+CSS填坑与挖坑（二）
此节单独探讨各种布局问题和解决方法
#4 布局问题1.浮动布局12345678910111213141516171819202122232425262728293031323334<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>浮动布局</title> <style type="text/css"> .wrap1 div{ min-heig...
HTML+CSS填坑与挖坑#1 物理1px边框问题
原因：最主要的原因就是设计分辨率和设备分辨率有差造成的，比如设计稿为750px宽，1px边框线，但是在实际设备中，可能宽为375px，那么我们的边框线需要设置为0.5px。对于retina屏上仅仅显示1物理像素的边框。一般的，Retina 屏的device-pixel-ratio >= 2
解决方案：
1.通过device-pixel-ratio适配
devicePixelRatio(缩写dpr)的准确含义是1个逻辑像素（px）需要使用几个物理像素来绘制，比如dpr = 2，代表1px需要2个物理像素绘制展现。
（设备物理像素...
CSS继承
html标签和css属性浏览器兼容性查询网站 https://www.caniuse.com/
1. 有继承性的属性#1.字体系列属性font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
fon...
