css实用属性

background-size: 100% 100%;            　　背景通过拉伸实现填充 自适应

overflow: hidden;                                  　　清除浮动

box-sizing: border-box;                        　　为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

border-radius:3px;                              　　 边框圆角

vertical-align: middle;                          　　实现多个内联块垂直中部对齐

cursor:pointer;                                     　　鼠标指针样式 

:nth-child(nn)                                       　　伪类选择器可以给指定行（n）设置样式odd表示奇数行，even表示偶数行

box-shadow:0px 3px 6px rgba(0,0,0,0.5)   阴影

border: none;  outline:none;                        取消input框默认边框和选中后的边框

linear-gradient(direction, color-stop1...)      线性渐变 direction指定渐变方向或角度

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;                                  文本超出省略号

 

 使用绝对定位来居中：

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);      （未设置宽度）

position: absolute;

left: 0;

right: 0;

margin-left: auto;

margin-right: auto;                               （设置宽度 只能设置左右居中不能设置上下居中）

resize:none；                                       禁止文本域缩放<textarea>

 

（利用 @media screen 实现网页布局的自适应）

@media screen and (min-width: 400px) and (max-width: 800px) {

　　/*当屏幕尺寸大于600px小于800px时，应用下面的CSS样式*/

　　 .class { background: #ccc; }

}

 

gulp中使用rem：

<script src="dist/js/lib/viewport/viewport.js"></script>

设置缩放标准

docEl.style.fontSize = 40 * (clientWidth / 1440) + 'px';

 

文字渐变色设置

background: linear-gradient(180deg, rgba(241,222,122,1) 0%, rgba(255,137,61,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

 

宽高使用100%+-px

width: calc( 100% - 50px )