布局套路

1.ie8 float 布局去浮动

2.flex

居中

http://css3generator.com/

http://www.ayqy.net/doc/css2-1/cover.html

3.汉字对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div{
           border: 1px solid red;
           font-size: 20px;
       }
       span{
           /* border: 1px solid green; */
           display: inline-block;
           width: 5em;
           text-align: justify;
           line-height: 20px;
           font-size: 20px;
           height: 20px;
           overflow: hidden;
       }
       span::after{
           content: '';
           display: inline-block;
           width: 100%;
           border: 1px solid blue;
       }
    </style>
</head>
<body>
    <div>
        <span>姓名</span><br>
        <span>联系方式</span>
    </div>
</body>
</html>

4.li横向排列去空格去浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
ul{margin: 0;padding: 0;list-style: none;}
ul>li{/* display: inline-block; */float: left;border: 1px solid red;
       }
.clearfix::after{content: '';display: block;clear: both;}
    </style>
</head>
<body>
     <div>
         <ul class="clearfix">
             <li>选项1</li>
             <li>选项2</li>
             <li>选项3</li>
             <li>选项4</li>
             <li>选项5</li>
             <li>选项6</li>
         </ul>
     </div>
</body>
</html>

5.文字中断 word-break:break-all

6.文字不换行white-space:nomal

7. 单行文字溢出省略...

<style>
      div{
           width: 300px;
          border: 1px solid red;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
</style>

8.多行文字溢出省略...

<style>
      div{
          width: 300px;
          border: 1px solid red;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp:2;
          -webkit-box-orient:vertical; 
          
      }
    </style>