学如逆水行舟，不进则退

当 flex父元素高度不足时，会被子元素撑开高度，解决方法父元素設置css：min-height: 0// orheight: 0

CSS Modules 用法教程:local、:global作用參考

当我们在做手机端H5网页设计稿时（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。延伸阅读：2015年度最值得学习的10个H5案例（各种经典，推荐收藏）这可能是近半年做得最好的4个H5传播案例还没搞懂H5营销？他们已经开始在玩“虚拟现实”了！一个插线板的H5怎么就火了？大家明明是去看周鸿祎

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}  body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hi

从网易与淘宝的font-size思考前端设计稿与工作流阅读目录1. 问题的引出2. 简单问题简单解决3. 网易的做法4. 淘宝的做法5. 比较网易与淘宝的做法6. 如何与设计协作7. 总结本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你

移动端高清、多屏适配方案背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明来源http://blog.youkuaiyun.com/azureternite目录(?)[+]看了几篇文章，理一下网易跟淘宝移动端适配的思路，主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流像素相关概念物理像素(physical p

如何判断用户是否访问过某个网址我们经常有这样的需求：想知道用户之前有没有访问过某个网址。有没有什么方法或技术能实现这一点呢？初步探索注意到，在大部分浏览器默认设置里，用户访问过的链接和没访问过的链接颜色是不同的，如下图：即用户访问过的链接，computed color默认为紫色（或其他在CSS中指定的颜色）：而没访问过的链接，comput

背景从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的，然后把input:file调整好尺寸，覆盖在上方，然后再设置 opacity: 0;，如此一来，用户看到的是，点击的却其实是input:file。html5允许在click事件的callback中主动出发inp

webx5单页模式打开方式：justep.shell.showpage();多页模式打开方式：window.loacation.href = require.tourl();

new document table{width: 600px; height: 600px;} td.selected{background: #cfe6fd;} #info{text-align:center;width:600px;font-size:40px;}

1.Firefox考虑到安全问题，该下载文件必须是从自己的服务器或域名中的，否则将在浏览器中打开。2.在Chrome和Opear中，如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，换句话来说，文件名不变。

本次技术调研来源于H5项目中的一个重要功能需求：实现微信长按网页保存为截图。这里有个栗子（请用微信打开，长按图片即可保存）：3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能，常见于H5活动页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。一、实现HTML页面保存为图片1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括：

CSSpointer-events: none;Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕...

參考

場景是實現多段的兄弟元素的第一個添加間距 如:<c></c><a class='test'></a><a class='test'></a><a class='test'></a><a class='test'></a><b></b...

一、不同列表数量不同布局这是群里有人问的一个问题，可能其他人也有类似需求，因此拿出来给大家分享分享。聊天软件中的群头像，或者一些书籍的分组，往往采用复合头像作为一个大的头像。可以看到，头像数目不同，布局也跟着不同。常规操作一般大家会实现类似下面的方法实现布局效果：<ul class="box" data-number="1"></ul>&lt...

因为不同的移动设备分辨率不一样，以iphone为例，我们假设你在pc上设置的是原始比例即一倍的显示，iphone6的分辨率要乘以2倍，而6+则要乘以3倍，才能在设备上显示清晰的图片。否则，你用一倍的图片适配所有机型，遇到分辨率大的设备，图片是模糊的參考文章...

总体概念block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（block元素还是inlin

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4908不是什么稀奇的技术，很多很多年前自己就玩耍过。之所以今天拿出来说一下，是因为今天几个小伙伴遇到类似问题，突然发现，一些自己觉得不怎么样的东西，说不定对别人而言会有很大帮助，于是我就打算写篇短文简单

position的四个属性值relative,absolute,static,fixed1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级3、

SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。先看一下path标签的基本用法:path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所

CSS选择器的优化 前面花了几个篇幅着重介绍了CSS的选择器的使用，我将其分成三个部分：CSS基本选择器、CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的，所以今天先从选择器开始入手，加强自己。如果你也感兴趣那就跟我一起来吧。浏览器如何识别你的选择器首先我们需要清楚，浏览器是如何

http://www.webhek.com/misc/css-shake/出处:http://geek.youkuaiyun.com/news/detail/10561

1、二次贝塞尔曲线介绍 quadraticCurveTo(cpx,cpy,x,y) cpx，cpy表示控制点的坐标； x，y表示终点坐标； 数学公式表示如下： 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：   2、二次贝赛尔曲线实例  Js代码  "-//W3C//DTD XHT

一个Div包含了多个子Div，并且子Div使用了浮动后，父Div确不能被撑开，如下图：部分代码如下：1 style>2   #div1{border:1px solid red;float:left;}3   #div2,#div3{float:right;border:1px solid blue;}4 style>5 6 div id="div1

自适应网页设计（Responsive Web Design）作者： 阮一峰随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在100

"http://www.w3.org/TR/html4/strict.dtd">demoCal    * {margin:0;padding:0;}    .clear {clear:left;} ul,li {list-style: none;} #contains {width:420px;margin:0 auto;} #contains

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的 head 中各个标签、元素的意义

第一步：策划表单功能首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：名称电子邮件网站地址提交按钮我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。第

CSS position绝对定位absolute relative         DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。一、position语法与结构

多个div元素当选中某个div元素的时候进行放大ng-class = focus;.foucus {transform: scale(5, 5)}div元素中的div元素如若还要放大.foucus div {transform: scale(5, 5)}

今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！就让我们一起来交个朋友吧~　　rem　　我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1

before和after伪元素所谓伪元素，可以理解为浏览器为某元素附加的元素（根据名字，附加在这个元素之前/之后）。用来完成特定的效果，before/after需要和content属性一起使用：123456.css-class:before { content: " ";}.css-class:after { content: "

目录HTML语法HTML5 doctype语言属性（Language attribute）字符编码IE 兼容模式引入 CSS 和 JavaScript 文件实用为王属性顺序布尔（boolean）型属性减少标签的数量JavaScript 生成的标签CSS语法声明顺序媒体查询（Media query）的位置带前缀的属性单行规则声明简写形式的属性声明Less

1.平台兼容性用IndexDBshim兼容 2.Data Error - Could not eval key from keyPath缓存引起 改变了表的key值，数据库没变，key对不上

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-block; padding: .5em 1em;

本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。     元素类型HTML 的元素可以分为两种：块级元素（block level element）内联元素（inline element 有的人也叫它行内元素）