CSS深入浅出（一）

1、文档流

　　内联元素从左往右流动；块级元素从上往下流动，每个块级元素另起一行。

　　块级元素的高度由其内部的文档流元素的高度总和决定

2、套路

　　1.中文两端对齐（text-align: justify;）

<div>
  <span>姓名</span><br>
  <span>联系方式</span>
</div>

<style>
    span{
      display:inline-block;
      4em;
      text-align: justify;
      overflow: hidden;
      height:20px;
    }
    span::after{
      content:'';
      display: inline-block;
      100%;
    }
  </style>

　　

　　2、打断单词换行（word-break:break-all;）

　　3、float横向布局

<div class="clearfix parent">
  <span class="child">你是</span>
  <span class="child">谁</span>
</div>
<style>
.clearfix::after{
  content='';
  display: block;
  clear: both;
}
.child{
  float:left;
}
</style>

　　4、文字溢出

/*一行文本溢出省略号显示*/
<div>
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
</div>

<style>
  div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

/*多行文本溢出省略号显示*/
<div>
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
  1 2 3 4 5 6 7 8 9 0
</div>

<style>
  div{
    display:-webkit-box;
    -webkit-line-clamp: 2;    /*设置多行显示*/
    -webkit-box-orient:vertical;
    overflow: hidden;            
  }
</style>

5、文字居中

<div>
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
</div>

<style>
  div{
    padding:10px 110px;    /*上下相同padding——垂直居中，左右相同水平居中*/              
    text-align: center;    /*文本水平居中*/
    line-height:20px;    /*设置行高，配置需要的高度*/        
  }
</style>

6、去除margin相关Bug（在父元素上加boder或者padding）

7、全屏居中

<div class="dad">
  <div class="son">
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
    1 2 3 4 5 6 7 8 9 0
  </div>
</div>

<style>
  .son{
    margin:0 auto;
    padding:0;
    140px;
  }
  .dad{
    height:100vh;
    box-sizing:border-box;
    display: flex;
    justify-content:center;
    align-items:center;
  }
</style>

8、padding-top:100%;设置长宽相等