摘要：
作为号称下一代web应用模型的PWA，逐渐成为了一个各大前端厂商争先恐后进行涉足，布局的一个新的技术， 其主要的对标物Native app，作为现在最主流的mobile端应用，它的安全，性能，用户体验的确明显领先于其他互联网载体，但是原生App始终有一些缺点，比如 1. 昂贵开发成本 2. 软件上线 阅读全文
摘要：
1.opacity opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。 2.visibility visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会 阅读全文
摘要：
通过改变charset=utf-8中的utf-8就可以改变网页的编码。 一般我们在写css文件时候也需要在css文件顶部使用@charset "utf-8";来定义此CSS文件编码类型。一般html源代码和css文件编码要统一，如果不统一会导致CSS hack，页面乱码网页页面排版乱等兼容问题。 国 阅读全文
摘要：
当我们想在表达式上进行匹配简单的值或者是参数数量时，我们可以使用Guards；它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且guard必须括在括号中。 为了尽量接近css的声明性，Less选择了使用通过受保护的Guards的mixins而不 阅读全文
摘要：
1.利用css3属性 appearance。 该属性（强制）更改（改变）默认（原生）样式。 Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。 所以可以利用该属性取消checkb 阅读全文
摘要：
过渡 transition 1.过渡的定义和使用 在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定 阅读全文
摘要：
1.文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合。 a. html的命名原则引文件统一使用index.htm index.html index.asp文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如：关于我们 \ aboutus 信息反馈 \ feed 阅读全文
摘要：
结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <he 阅读全文
摘要：
当涉及到简化 css 设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的 css 工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具，它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。 阅读全文
摘要：
公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果，感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。废话不多说，线上效果 jsrun-测试地址 、 lilnong.top-测试地址 实现方案都有什么 clearRect 这是我第一个找到的 API，作用是清除一个矩形区域内的内 阅读全文
摘要：
viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影（这个我觉得真没必要去掉，用户点击是需要反馈的，而这个背景色刚刚好提供了一种反馈）等等，太多啦，这些相信大家百度一下就可以查到很多资料 本篇文章主要是讲一些其他的或者优化手段。内容不多 1. 弹出数字键盘 <!-- 有" 阅读全文
摘要：
Mixins 具有多个参数 * 参数可以使用逗号或分号分隔。 （建议使用分号，因为逗号具有双重含义：可以将其解释为mixin参数分隔符或者是css列表分隔符）；使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。 参数mixin使用一个或多个参数，通过参数和它的属性来扩展Less的功能， 阅读全文
摘要：
写在前面 在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。 而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区 阅读全文
摘要：
作为前端，在工作中难免会遇到关于排版的问题，以下是我整理的一些关于css的技巧，希望对你能有帮助。 1、每个单词的首字母大写 一般我们会用js实现，其实css就可以实现。js代码： var str = 'hello world'; str.replace(/( |^)[a-z]/g,(L)=>L.t 阅读全文
摘要：
定义及用法 ⑴<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ⑵<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 ⑶元数据（metadata）是关于数据的信息。元数据总 阅读全文
摘要：
webp 是目前 Web 比较流行的解决方案，相对于 Jpeg/png, 基于 VP8 的压缩，有着非常不错的压缩率。 <pliga' 1,="" 'onum'="" 'kern'="" 1;="" color:="" rgb(58,="" 65,="" 69);="" font-family:=" 阅读全文
摘要：
一、什么是URL/URN/URI URI=URL+URNURI：统一资源标识符URL：统一资源定位符URN：统一资源名称 二、传输协议 用来传输客户端和服务器端交互的信息的（类似于快递小哥）HTTP（顺丰）：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的WE 阅读全文
摘要：
块（Block） /* 常规写法和BEM写法相同 */ .list 元素(Element) 块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子，li.item 是列表的一个子元素 /* 常规写法 */ .li 阅读全文
摘要：
一、心形 使用transform-origin属性实现设置不同的点为原点 1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点） 注意：该属性只有在设置了transform属性的时候才起作用； 如果在不设置的情况下，元素的基点默 阅读全文
摘要：
对于首屏的定义，浏览器没有给出标准的指标，因为不同网站对于首屏的要求也是不尽相同的。我们从谷歌的第一次有效时间（first meaningfull paint）得到了一些启发，例如，一个新闻网站文字跟字体对于它来说是更重要的，而图片是次要的。新闻网站可以认为所有文字或字体加载出来即为首屏。但是对于电 阅读全文