[css] 积累(old)
<h?>标签里不可再嵌套h ul li
清除链接外框
a {outline: none;}
鼠标不允许点击：
cursor:not-allowed;
强制不换行：
white-space:nowrap;
自动换行：
word-wrap: break-word;
word-break: normal;
强制英文单词断行：
word-break:break-all;
所谓clearfix的最佳实践：
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
.clearfix{*zoom: 1;}
.clearfix:after{clear:both;display:table;content:"”;}
.clearfix{overflow:hidden;_zoom:1;}
min-height 最小高度兼容代码：
.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}
隐藏过多内容：
.ellipsis,.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
手机多终端适配 media queryweb app iphone4 iphone5 iphone6 响应式布局 适配代码（高度方面，但是还是会受浏览器导航栏高度影响）
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.class{}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.class{}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.class{}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.class{}
}
简单渐变色：
.go{
width:300px;
height:300px;
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -ms-linear-gradient(red, blue);
background: -chrome-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
图文，span垂直对齐：
vertical-align:middle
background-attachment:fixed;
可以让背景图片随着滚动而变化
优先级为:
!important > id > class > tag
important 比 内联优先级高
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上动画最小时间间隔为1/60＊1000ms ＝ 16.7ms
E[att="val"] { sRules }
选择具有att属性且属性值等于val的E元素。
input[type="text"] {
border: 2px solid #000;
}
div[class="xx"] {
border: 2px solid #000;
}
E[att] { sRules }
选择具有att属性的E元素。
img[alt] {
margin: 10px;
}
calc() = calc(四则运算)
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
例如可用于元素居中
top: calc(50% - 30px);
left: calc(50% - 30px);
button的伪类状态
鼠标hover状态 :hover
点击中，点击状态 :active
点击过后取得焦点状态 ，点击其他地方后恢复到普通状态:focus
overflow:hidden
display:flex
这两个样式都可以撑起内容。
元素绝对居中，需要确定父元素大小
{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
transition 对 opacity生效，对display无效
在微信浏览器环境，安卓对某些较新的css3，如transform需要 -webkit- ，苹果不需要
div p div内部所有(多个，多级)p
div>p (一级)父元素为div的p
div+p div外部紧跟着的(一个，同级)p
实现 height:100% ， 必须给 html,body 先设置 height:100%
水平垂直居中：
①
.parent {
position: relative;
}
.child {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; //为width的一半，且为负值
margin-top: -100px; //为height的一半，且为负值
}
②
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
③
.parent{
display: flex;
justify-content: center; //水平居中，相当于text-align
align-items: center; //垂直居中，相当于vertical-align
}
④
.parent{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child{
display: inline-block;
}
