弹性布局总结：
box是先出来的，flex后出，现在主要用flex。
但是box有一个特性是flex没有的，文字可以垂直居中~
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
设了宽度+padding+border记住加：
box-sizing: border-box;
-webkit-box-sizing:border-box;
.foo{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}
表单元素总结：
input {-webkit-appearance: none;}
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css：
before,after{
content: ".";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
媒体查询iphone6和6plus
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
//iPhone 6 landscape
}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
//iPhone 6+ Portrait
}
rem 在css3中用法
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}
CSS判断横屏竖屏
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
JS判断横屏竖屏
//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert(‘竖屏状态！‘);
}
if (window.orientation === 90 || window.orientation === -90 ){
alert(‘横屏状态！‘);
}
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
table技巧备忘：
.m-table tbody tr:nth-child(2n){background:#f60;color:#fff}
css reset:
@charset "utf-8";
* {vertical-align: baseline;font-weight: inherit; font-family: Michroma,‘Segoe UI Light‘,‘Segoe UI‘,‘Segoe UI WP‘,‘Microsoft Jhenghei‘,‘微软雅黑‘,sans-serif,Times; font-style: inherit;outline: 0;padding: 0;margin: 0;border: 0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; }
html, body { padding: 0; margin: 0; font-family: ‘microsoft yahei‘;color: #4a4a4a;}
html {font-size:62.5%;}
body {font-size:1.4rem;background:#F0EFF5;}
a{text-decoration: none;}
a img, :link img, :visited img {border:0px;text-decoration: none;}
h2{font-weight: normal;}
table { border-collapse: collapse; border-spacing: 0; }
ol,ul { list-style: none; }
input,textarea,button{-webkit-appearance:none;}
.por{position: relative;}
.w_63{width: 63%!important;}
.tal{text-align: left!important;}
.m_l20{margin-left: 20px;}
.m_t20{margin-top:20px;}
.m_r20{margin-right: 20px;}
.dsn{display: none;}
.clear{clear: both;}