css/css3常用收集/笔记

_______________________________________________________________  css3 瀑布流 N 列

<ul><li>aaa</li><li>aaa</li></ul>

ul{-moz-column-count: 2;

-webkit-column-count: 2;

column-count: 2;}

ul li {

-moz-page-break-inside: avoid;

-webkit-column-break-inside: avoid;

break-inside: avoid;}

/*--------------------------------------   input框必填星号*垂直居中设置  -----------------------*/

<font color="red" style="position:relative; top:2px;">*</font>;&nbsp;功能名称

 /*--------------------------------------   字号小于12px  -----------------------*/

font-size:10px;-webkit-transform:scale(0.8);  *此时属性为 block / inline-block;

/*--------------------------------------- 阴影 x-offset x轴偏移y   blur 模糊值 color of shadow 阴影颜色 */

边框阴影：  -webkit-box-shadow: 1px 1px 3px #ccc;  -moz-box-shadow: 1px 1px 3px #ccc;  box-shadow: 1px 1px 3px #ccc;

边框下阴影：

-webkit-box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1);

-moz-box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1);

box-shadow: 0 5px 5px 0 rgba(50,50,50,0.1); 

右下阴影：box-shadow:2px 2px 5px #222;  //   box-shadow:1px 2px 7px #777;

边框发光：-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .3); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .3); box-shadow: 0 0 6px rgba(0, 0, 0, .3);  

 边框内阴影（单边）

-webkit-box-shadow:0px 3px 3px #c8c8c8 inset;
-moz-box-shadow:0px 3px 3px #c8c8c8 inset;
box-shadow:0px 3px 3px #c8c8c8 inset

文字阴影：  text-shadow:1px 1px 1px #000;

背景渐变：  background: -webkit-linear-gradient(#75828b,#5f6770);

放射渐变：  background:-webkit-gradient(radial,25 25,0,25 25,25,from(#fff),to(#ccc));

文字白边： text-shadow: 0 1px 1px #fff; 

滤镜(兼容IE)：      filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;

滤镜CSS3            border:1px solid rgba(0,0,0,0.1); background:rgba(0, 0, 0, 0.8);

/*-------------------------------------- 文本域里的换行，展示时，显示出来  */

white-space:pre-line （http://www.cnblogs.com/qianlegeqian/p/3987235.html）

_______________________________________________________________  H5 两端对齐

详解flex: https://www.runoob.com/w3cnote/flex-grammar.html

             display: flex;           

             justify-content: space-between;

_______________________________________________________________ 保持一行，超出省略

100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

/*-- 多行省略*/

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

_______________________________________________________________ 奇数，偶数 

li:nth-child(odd)
li:nth-child(even)
或者：
li:nth-child(2n)
li:nth-child(2n+1)
li:not(:nth-last-child(1)):not(:nth-last-child(2)) /*非最后2个*/

________________________________________________________________  H5 平均分，并居中

ul {
display: flex;
}
ul li {
flex: 1;
text-align:center;
}

// flex 九宫格

>ul{    background: #fff;

    display: flex;

    flex-direction: row; /**布局内item 方向*/

    flex-wrap: wrap; /**不够了就换行*/

    justify-content: space-between; /**主轴两边对其*/

    > li {

      display: flex;

       33.33333%;

      height: 90px;

      justify-content: center;

      align-items: center;

      &:nth-child(3n) >a {

        border-right: none;

      }

      >a {

        display: flex;

        justify-content: center;

        align-items: center;

         100%;

        height: 100%;

// 网格布局，平分3列，间隔左右10 上下15
ul {padding: 0 10px 10px;    display: grid;
>li {
grid-template-columns: repeat(3, 1fr); // 如果用33.3333会不准确
grid-gap: 10px;}}

________________________________________________　　CSS 背景   移步到：https://blog.csdn.net/ssisse/article/details/51533943

________________________________________________       display:flex  移步到： https://blog.csdn.net/qq_35480270/article/details/79282947     http://www.cnblogs.com/lpy001/p/6062466.html

_______________________________________________________________ grid

<div class='grid'>
      <a>grid01</a>
    </div>

.grid {
  margin: 50px auto;
  height: 300px;
   300px;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  box-sizing: border-box;
  > a {
    margin-top: -4px;
    margin-left: -4px;
    box-sizing: border-box;
    line-height: 100px;
    text-align: center;
    border: 4px solid #ccc;
  }
}

——————————————————————————————————  解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号 

table{   
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
    100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

 .FM_customer_slideUp2 .cz_button ul{display:-webkit-box;display:-moz-box;display:box;}

.FM_customer_slideUp2 .cz_button ul li{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;text-align:center;height:40px;line-height:40px;}

如：

.test {display:-webkit-flex;display:flex;}

    .test li{-webkit-flex:1;flex:1;}
    .test li:nth-child(1){background:#999;}
    .test li:nth-child(2){background:#aaa;}
    .test li:nth-child(3){background:#ccc;}
    .test li:nth-child(4){background:#999;}
</style>
<ul class="test">
    <li>写邮件</li>
    <li>新增客户</li>
    <li>新建商品</li>
    <li>扫描名片</li>
</ul>
________________________________________________________________  经过， 渐变色

a{ color: #666; 

-moz-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out; 

}

a:hover {color: red}

________________________________________________________________  左右激变

background: -webkit-linear-gradient(left,transparent,#666);

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(transparent));

background: -webkit-linear-gradient(#000000, transparent);

background: -moz-linear-gradient(#000000, transparent);

background: -ms-linear-gradient(#000000, transparent);

background: -o-linear-gradient(#000000, transparent);

background: linear-gradient(#000000, transparent);

-pie-background: linear-gradient(#000000, transparent);

________________________________________________________________  旋转动画

<style>

#imgg{animation:imgg 5s linear 0s infinite;}

@keyframes imgg{

0%{transform:rotateY(0deg);}

25%{transform:rotateY(90deg);}

50%{transform:rotateY(180deg);}

75%{transform:rotateY(270deg);}

100% {transform:rotateY(360deg);}

}

</style>

<div id="imgg">  aaa </div>

________________________________________________________________ 经过 翻牌效果，

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css3 翻牌</title>

</head>

<body>

<style>

*{ margin:0; padding:0;}

ul,li{ list-style:none; margin:0; padding:0;}

.brandsShow{ 1200px; height:620px; margin:0 auto; }

.brandsShow ul{ margin-left:-20px; 1225px; height:auto; }

.brandsShow ul li{ float:left; display:inline; 283px; height:283px; }

.flip-container {perspective: 1000;

-webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/

-moz-perspective: 1000px;

-ms-perspective: 1000px;

-o-perspective: 1000px;

perspective: 1000px;

margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:1px solid #fff;}

.flip-container:hover .back {transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg); z-index:2;}

.flip-container:hover .front { transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg); z-index:1}

.flip-container, .front, .back { 283px;height: 283px;}

.flipper {transition:transform 0.6s ease-out;

transition: transform .5s ease-in-out;

-webkit-transition: transform .5s ease-in-out;

-moz-transition: transform .5s ease-in-out;

-ms-transition: transform .5s ease-in-out;

-o-transition: transform .5s ease-in-out;

-webkit-transform-style: preserve-3d; /*使其子类变换后得以保留 3d转换后的位置*/

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

display:block;position: relative;}

.front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0;left: 0;}

.front img, .back img{ 283px; height:283px; overflow:hidden;}

.front {z-index: 2;transform: rotateY(0deg);transform: rotateY(0deg); -webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-o-transform: rotateY(0deg);}

.back { z-index:1;transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);

-ms-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);}

</style>

<ul>

<li class="flip-container " ontouchstart="this.classList.toggle('hover');">

<a href="brandLi.html" class="flipper">

<div class="front "><img src="images/pic/brand10.jpg">前面</div>

<div class="back " ><img src="images/pic/brand01.jpg">后面</div>

</a>

</li>

<li class="flip-container " ontouchstart="this.classList.toggle('hover');">

<a href="brandLi.html" class="flipper">

<div class="front "><img src="images/pic/brand10.jpg"></div>

<div class="back " ><img src="images/pic/brand01.jpg"></div>

</a>

</li>

</ul>

</body>

</html>

________________________________________________________________ 经过 360度旋转

@-webkit-keyframes btnRotate {

0% {

    -webkit-transform: rotateZ(0deg);

    }

100% {

    -webkit-transform: rotateZ(360deg);

    }

}

#startMenu button:hover img {

    -webkit-animation: btnRotate 1.5s linear infinite;   ---1 为旋转一圈

}

________________________________________________________________ 判断浏览器是否支持html5

<!-- 判断浏览器是否支持html5 -->

<div style="">你知道你的浏览器过时了吗？</div>

<script>

        window.onload = function() {

            if (window.applicationCache) {

                alert("你的浏览器支持HTML5");

            } else {

                alert("你的浏览器不支持HTML5");

            }

        }

    </script>  

<!-- 判断浏览器是否支持html5 -->

 

________________________________________________________________

一直写html4后来想试一下html5，然后发现IE9以下的浏览器不兼容html5标签，再网站搜索了一些解决办法，但是都会出现这样或那样的问题，比如说

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

 在ie8以下的浏览器中就会将<!--[if lt IE9]><![endif]-->这对标签给输出出来，

在此想问一下大家有没有什么更好的解决办？

<!--___________________________________________屏幕 适配-->

 

@media screen and (min-1920px){

 

}

@media screen and (min- 1280px) and (max- 1920px) {

}

@media screen and (min- 960px) and (max- 1279px) {

}

@media only screen and (min- 640px) and (max- 959px){

}

 

<!-- 通用CSS-->

    a,button,input,textarea,select,option,p,div{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;}

    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;font-weight:normal;}

    img{border:0 none;max-100%;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0.2)}

    i,em,b{font-style:normal;font-weight:normal}

    ul,ol,li,dl,dt,dd{padding:0;margin:0;list-style-type:none;list-style:none}

    input,select,h1,h2,h3,h4,h5,h6{font-size:100%;border-radius:0;}

    table{border-collapse:collapse;border-spacing:0}

    a{text-decoration:none;color:#333}

    .clear:after{content:"200B";display:block;height:0;clear:both;*zoom:1}

 

    body{margin:0 auto;min-320px;/*max-640px;*/font-size:14px;color:#929292;-webkit-text-size-adjust:100%; font-family:Helvetica; text-shadow:none;

-webkit-touch-callout:none;

-webkit-user-select:none;

-khtml-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

-o-user-select:none;

}

 

============================================  背景图片自适应，固定不动

background: url('__TMPL__Public/assets/images/demo/banner.jpg') center fixed no-repeat;

height:888px;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;

 ============================================  问大家一下，软键盘挡住输入框，这个问题大家怎么解决的

 setinterval = setInterval(() => {
      document.body.scrollTop = document.body.scrollHeight;
    }, 50);
    setTimeout(() => {
      clearInterval(setinterval);
    }, 2000);
【群主】张 2017/12/19 14:23:33

输入框获取焦点时执行这个方法

=============================================

 数组中 对象查重

function arrTest(arr,key){
var obj = {};
for(var i=0;i<arr.length;i++){
if(obj[arr[i][key]]){
return false;
}else{
obj[arr[i][key]] = arr[i];
}
return obj;
}
}
var a = [
{ des: "qwe", b: "reg" },
{ des: "vfg", b: "fgdfd" },
{ des: "qwe", b: "fdfd" }
];

arrTest(a,"des")

 -------------------------------------------------------------------