css样式的使用一

<!-- 单行文本溢出隐藏的方法 -->

    .inaline{

          overflow:hidden;

           white-space:nowarp;

           text-overflow:ellipsis;

      }

<!-- 多行文本溢出隐藏的方法 -->

     -webkit-line-clamp:n;

     .intwoline{

           display:-webkit-box !important;

           overflow:hidden;

           text-overflow:ellipsis;

           word-break:break-all;

           -webkit-box-orient:vertical;

          -webkit-line-clamp:2;

      }

<!--强制文本不换行-->

       设置容器样式 white-space:no-wrap。

<!-- 用来限制在一个块元素显示的文本的行数 -->
         display:-webkit-box;
<!-- 必须结合的属性，将对象作为弹性伸缩盒子模型显示-->
        -webkit-box-orient:vertical;
<!-- 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式  需要搭配overflow:hidden;声明使用-->
        overflow:hidden;

        text-overflow:ellipsis;

<!--消除input在webkit内核浏览器选择历史时有一个黄色的背景-->

     input：-webkit-autofill{

            -webkit-box-shadow:0 0 0px 1000px white inset;

      }

<!-- visibility:hidden;和display:none;的区别 -->

       visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而display:none;属性会使这个对象消失，不占空间。

<!--高度崩塌-->

       浮动元素高度自适应，给父元素添加overf：hidden；或者在浮动元素下方添加空div，并给该元素添加声明：clear：both；height：0；overflow：hidden； 。

被设置float的元素和绝对定位的元素都无法撑开父元素，如果想让float的元素撑开父元素，给父元素设置::after清除浮动的样式，即万能清除浮动的方法，:after{content：“.”;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}。

<!-- 字体转义 -->

在国内需要做一些国外的网站，但是国外的一些字体国内字体中可能没有，这个时候需要在css页面的表头加一句

       @font-face {

                 font-family: '字体名称';
                 src: url('...woff2') format('woff2'),
                 url('...woff') format('woff');
                 font-weight: normal;
                 font-style: normal;
          }

        这个是转义过来的字体，需要先在网上下载需要的字体，然后在 https://www.fontsquirrel.com/tools/webfont-generator

网址上进行字体转义，之后将转义的字体文件中后缀名为woff和woff2的两个文件引入即可。

<!-- 设置input标签里面placeholder的样式 -->

        input::-webkit-input-placeholder { /* WebKit browsers */
　            color:#fff;
       }
       input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
　　        color:#fff;
        }
         input::-moz-placeholder { /* Mozilla Firefox 19+ */
　　         color:#fff;
         }
         input:-ms-input-placeholder { /* Internet Explorer 10+ */
　             color:#fff;
        }
或者  input[placeholder], [placeholder], *[placeholder] {
                 color:#fff !important;
         }