css 不常用相关笔记

css样式

1.鼠标样式变小手：cursor:pointer;

2.强制不换行：white-space:nowrap;

3.避免外边距margin重叠导致的margin塌陷：display:table;

4.动态获取css展示

@media screen and (min-width:750px) {
      /* pc */
            .long_pc{
                display: block;
            }
            .long_wap{
                display: none;
            }
 }
 @media screen and (max-width:750px){
      /* 最大750 移动端 */
     .long_pc{
         display: none;
      }
      .long_wap{
         display: block;
       }
 }

 5.字体之间的间距自适应

text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
webkit-text-align-last:justify;/*chrome 20+*/
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
    .test1:after{
          content:".";
          display: inline-block;
          width:100%;
          overflow:hidden;
          height:0;
    }
}

6.字数超出后变… 

{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

7.css3动画

{
animation: myfirst 5s ease 2s both;/*2s延迟2秒后动画开始，both：动画听到最后一帧结束，不循环*/ 
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
/*以下运动状态5选1
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
*/
}

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst 
{/*Firefox*/
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst 
{/*Safari 和 Chrome*/
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst 
{/*Opera*/
from {background: red;}
to {background: yellow;}
}

8.滚动条样式修改

            ::-webkit-scrollbar{
                width:4px;
            }
            ::-webkit-scrollbar-thumb{/*短条*/
                border-radius: 10px;
                -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.1);
                background:rgb(255, 174, 0);
            }
            ::-webkit-scrollbar-track{/*长条背景*/
                -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.1);
                border-radius: 0;
                background:rgba(0, 0, 0, 0.1);
            }

input 相关

1.placeholder的颜色设置

.place_cor input::-webkit-input-placeholder { /* WebKit browsers */ 
color: #fff; 
} 
.place_cor input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #fff; 
} 
.place_cor input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #fff; 
} 
.place_cor input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #fff; 
} 

 

2.清除input框，默认样式

-webkit-appearance:none;/*清除显示效果*/
utline:none;/*点击时效果*/

3.移动端点击input框，页面自动发大，处理方法head头中的增加

<meta content="user-scalable=no"/><!--增加user-scalable=no-->

4.select下拉箭头自定义样式

   {
    border: none;
    line-height: 100%;
    font-size: 15px;
    font-family: '黑体';
    vertical-align: middle;
    outline: none;
    -moz-appearance:none;
    -webkit-appearance:none;
    box-sizing: border-box;
    background:url(../images/icon-dropdown.png) no-repeat right center ;
    background-size: 0.8rem 0.4rem;
    }