css 冷知识

*{margin: 0;padding: 0;}
li{list-style-type:none; }
ul{list-style: none;}
img{border: none;}
ul,input,select,option,textarea{outline: none;}
a{text-decoration: none;}
.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}

-----------------------------------------------------------------------------------------------------------------------------
透明度： background: rgba(255,0,0,0.5); 4个参数
R：红色值。正整数 | 百分数 数值为100%（或255）时则意味着该元素完全不透明
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
opacity:0.5;
区别是： opacity会继承父元素的 opacity 属性 ，且会影响字体的透明度，
RGBA设置的元素的后代元素不会继承不透明属性
.-----------------------------------------------------------------------------------------------------------------------------
模糊效果 ： -webkit-filter:blur(5px);
线性渐变 ： background: -webkit-linear-gradient(left , black,gray); 从左向右黑到灰渐变
-----------------------------------------------------------------------------------------------------------------------------
transition：1s； 样式过度时间 也可制定属性 transition：width 1s； 一般配合：hover 和 absolute使用，
元素加transition属性 只要样式改变就会增加过度效果
transform: rotate(360deg); 原地旋转360°
transform: rotateX(360deg); 围着X/Y/Z轴旋转360°
transform:translated3d(1,0,1,120deg); 1/0 是否围绕XYZ 轴旋转
transform:skew(50deg); 变平行四边形
transform:scale(1.5); 元素放大1.5倍
animation ： div{position: absolute; left: 0; top: 0;
-webkit-animation:yuandonghua 5s linear 1s 3 ;
/*-webkit-animation:yuandonghua 5s infinite linear;*/
}
@-webkit-keyframes yuandonghua{
50%{border-radius: 10px;}
100%{background-color: red;}
}
-----------------------------------------------------------------------------------------------------------------------------
垂直居中：div{ width:100px ; height:100px;
left:50%;top:50%;
transform:translated3d(-50%,-100%,0) //性能很高
}
li{ display: table-cell;
vertical-align: middle; //性能很高
}
-----------------------------------------------------------------------------------------------------------------------------
小三角形 ： border-left:100px solid red; 朝右的三角型 把右边框删掉 上下边框颜色设为透明 transparent
border-right:100px solid green 朝左的三角型
border-top:100px solid blue; 朝下的三角型
border-bottom:100px solid yellow; 朝上的三角型
-----------------------------------------------------------------------------------------------------------------------------
小图标 ： svg 阿里旅行官网 通过自定义font-family 名来调用
-----------------------------------------------------------------------------------------------------------------------------
媒体查询 ： 响应式布局
@media screen and (max-width:1000px) {
屏幕小于1000px 时 变化样式
div{}；
}
-----------------------------------------------------------------------------------------------------------------------------
隔行换色：div:nth-of-type(even){background:rgba(0,0,0,1.2)} //偶数行换色 odd奇数
-----------------------------------------------------------------------------------------------------------------------------
：before伪类： 在span dom生成之间插入一个属性值，一般和后台交互取数据用
span:before{
content:attr(date-num);
}
<span date-mun="100"></span>
//10
-----------------------------------------------------------------------------------------------------------------------------
（font-size:14px; line-height:35px; font-family:"Microsoft YaHei","微软雅黑"; ）
可以写成 （font:14px/35px "Microsoft YaHei","微软雅黑";）
date：
new Date().toLocaleString() //2017/11/2 下午11:54:26
input标签去掉边框用border:none;（IE中使用background-color:none）;
IE中光标不居中:
1.height:30px;line-height:30\9;(ps:\9代表所有的ie浏览器兼容)；
2.用padding进行计算迫使贯标居中；

内景图位置： <a class="aaa">收藏</a> a标签加div 给收藏前面加背景图 △ 收藏
.aaa{ background:url(../images/icon/hehe.jpg) left(10px) right(center/10px) on-repeat};
可以调文字在图片右边 text-index:40;首行间距

插入内嵌元素，如<i></i>不能给宽高，可以用display:inline-block 转换

父级没有浮动，子级浮动，在父级加类名clear
其中css中/*清浮动*/
.clear:after{content:"";*display:block;*clear:both;}
.clear{zoom:1;}
1.设置浮动后 ，内嵌元素支持宽高<br>
-----------------------------------------------------------------------------------------------------------------------------
浮动使父元素高度塌陷是标准，
当父元素高度塌陷后，置于父元素下的元素没有限制会在空间允许的条件下浮动上来，这就是文字环绕图片的原因；
或者是图片位于文字之间，图片的浮动会使其突破父元素向左或右浮动后文字拼接呈环绕效果
（浮动的破坏性只是为了实现文字环绕效果）
-----------------------------------------------------------------------------------------------------------------------------
弹性盒子模型
display: flex;
使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:
flex ：1 ；
-----------------------------------------------------------------------------------------------------------------------------