随笔分类 - HTML5/CSS3
摘要：em整理： 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明Font-size=62.5%，这就使 em 值变为 16px*6
阅读全文
摘要：宫格布局第一种：.template-list { width: 100%; border-radius: 4px; height: 202px; display: grid; grid-template-columns: repeat(4, 94px); gap: 8px; overflow-y:
阅读全文
摘要：navigator.sendBeacon()方法可用于通过HTTP将少量数据异步传输到Web服务器。 使用sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下
阅读全文
摘要：1.文字渐变color:#DBA465; background-image: linear-gradient(to bottom, #fffefc 20%, #fdd050); -webkit-background-clip: text; background-clip: text; -webkit
阅读全文
摘要：display: flex; flex-wrap: nowrap; margin-bottom: 30px; margin-top: 15px; box-sizing: border-box; -ms-overflow-style: none; overflow: -moz-scrollbars-n
阅读全文
摘要：01.【负边距】💘负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似 02.【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的 03.【BFC应用】💓BFC应用之阻止外边距合并（margin collapsing） 0
阅读全文
摘要：初步实现代码如下： textarea { width: 100%; height: 92px; padding: 20px; line-height: 50px; resize: none; outline: none; border: 1px solid #ccc; background: #ee
阅读全文
摘要：MUI：http://dcloudio.github.io/mui/（使用H5+app模式，号称是最接近原生，但是目前在手机和电脑浏览器无法使用） app-framework：http://app-framework-software.intel.com/ （有Android、iOS等主题样式可供选
阅读全文
摘要：/* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/*/ html, body, div...
阅读全文
摘要：更多： http://l-lin.github.io/font-awesome-animation/
阅读全文
摘要：一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。 查看演示： http
阅读全文
摘要：1.清除浮动 何谓清除浮动—？一个父元素的所有子元素如果都是浮动的，那么这个父元素是没有高度的;父元素并没有脱离正常的文档流，仍然占据正常文档流的空间; 问题：如何解决高度塌陷？ 方法：把父容器的高度撑起来，考虑到浮动了的元素并没有脱离正常文档流，而其它元素会围绕着它环绕，所以清除浮动简单有效的办法
阅读全文
摘要：H5技术干货 meta标签相关知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,us
阅读全文
摘要：以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容）： 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是：
阅读全文
摘要：这里有超过20家的前端面试题，你确定不点进来看看？ 好吧，如果你看到这句话，你明显是点进来了。 那么恭喜你，接下来我就和你们分享一下，近期我收集到的各个公司的面试题。 本文为作者原创，转载请告知作者并取得同意方可转载。 违者作者保留法律追究权利。 ## 2. 正文 闲话就不扯了，直接开始分享。 ##
阅读全文
摘要：为什么我们的媒体查询需要去改变 我们现在使用的媒体查询一般来说都是基于目前流行手机设备的屏幕分辨率。 首先，当Web设计社区开始不断地关注响应式Web设计时， 流行的手机设备要数 iPhone 和 Android 智能手机了。 好，闲话不多说，现在就开始，应用于手机设备上的媒体查询从概念上看就好像是
阅读全文
摘要：Respond.js 第一种方案也是最简单的一种——我现在谈到的是一个脚本叫respond.js，是可以增强老版本浏览器理解和执行CSS3的媒体查询。添加如下代码就可以使用它。 <script type="text/javascript" src="js/respond.min.js"></scri
阅读全文
摘要：CSS架构 有趣的是，我们通常不这样评判其他语言。一个Rails开发者不会因为他写的代码规范就认为他是一个好的开发者。因为这是最基本的。当然它必须是满 足规范，除此以外还要考虑其他方面:代码是否有可读性？他是否容易修改或是拓展？他是否跟程序的其他部分解耦合？他是否可以扩展？ 当评估代码其他部分时这些
阅读全文
摘要：最近一项 研究表明,80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间。 这不奇怪，因为64%的智能手机用户希望网站可以在4秒内加载完毕，但一半的网站花费了二倍以上的时间，达到了9秒。这篇文章会阐述一些可以使你的网站在移动端跑得更快的技术。 移动端用户的下载
阅读全文
摘要：2012年9月，W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间，这个草案包括了CSS3 2D变形和CSS3 3D变形。 CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）,它们可以
阅读全文
