Zhenyu.Xu jokemmy

normal elemtnt

clientHeight

box-sizing: border-box;

clientHeight = height - borderTop - borderBottom - scrollBar

box-sizing: content-box;

在响应式的左右布局中挺有用，也可以用在表单中代替常用的 grid 布局

// less
.clearfix {
  &:before,
  &:after {
    content: "";
 display: table;

在使用地理位置API之前首先要检测浏览器是否支持，如下测试代码：

if (navigator.geolocation) {
  // 想干嘛就干嘛
}

当然，这个if判断也能用来进行浏览器的判断，可以区分IE678浏览器与IE9和其他现代浏览器。这在我们使用某些CSS3属性时非常有用，检测浏览器是否支持某些CSS3属性相对比较麻烦，可以折中下，即在知道浏览器对该CSS3属性的支持情况下检测浏览器，一般而言就是区分区分IE678浏览器和其他浏览器，这正好与navigator.geolocation的检测是一致的。

<div id="day2-meal-expense" 
  data-drink="coffee" 
  data-food="sushi" 
  data-meal="lunch">¥20.12</div>

var expenseday2 = document.getElementById('day2-meal-expense');  
var typeOfDrink = expenseday2.dataset.drink;

提高滚动流畅度

passive-event-listeners

addEventListener 的参数定义

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>

	<!DOCTYPE html>
	<html lang="zh-Hans-CN">
	<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta name="force-rendering" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
	<title></title>
	<style>

	negative sign
	数学 mathematics
	负号 minus; minus sign; negative ...
	负号 minus; minus sign; negative indication; negative sign◇负号端子 minus terminal; 负号项 ...
	负号的 subtractive
	负号位 minus zone
	减号；负号－minus
	正负号 plus-minus sign; plusmn;plus or minus; ±plus or minus
	数学 mathematics 他数学方面训练不够。 he was lacking in mathematical training.; 数学归纳法 [ ...
	负号穿孔 minus punch

	/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
	/* Styles */
	}

	/* iPads (portrait) ----------- */
	@media only screen


	formdata.append( 'file', blob, 'filename.xx' );