宽度与高度

1. 文字两端对齐套路，实现两行文字首尾对齐`text-align: justify;`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文字两端对齐套路</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;
      overflow: hidden;
      height: 20px;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
<div>
  <span>姓名</span> <br>
  <span>联系方式</span>
</div>
</body>
</html>

套路：

<span>包裹需要对齐的文字，方便操作。
利用伪元素span::after(inline-block)在后面添加一个空的内容，并把width设为100%，将内容撑大，然后hidden它

text-align：规定行内内容如何相对它的块父元素对齐。而且它并不控制块元素自己的对齐，只控制它的行内内容的对齐。要控制文本两端对齐直接写text-align：justify就可以了，但是对于多行文本，text-align不会对文本的最后一行起作用，最后一行依旧左对齐.因此对于单行文本的段落不会实现效果，单行文本既是第一行，也是最后一行。

参考文章：
text-align: justify 的使用方法

2.将ul中的li 横向排列float布局（制作导航栏的常用方法）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    ul{
      margin:0;padding:0;list-style: none;
      border: 1px solid green;
    }
    ul>li{
      float:left;
      border: 1px solid red;
    }
    .clearfix::after{
      content:'';
      display: block;
      clear: both;
    }
  </style>
<body>
  <ul class='clearfix'>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
    <li>选项6</li>
  </ul>
</body>
</html>

实现结果

去除浮动，添加clearfix类的代码记住

.clearfix::after{
      content:'';
      display: block;
      clear: both;

float布局套路：
1.浮动元素加float:left;
2.浮动元素的父级元素加class = "clearfix"来去除浮动。

3. 文字溢出省略

单行文本溢出省略
http://js.jirengu.com/gayuw/2/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>单行省略文本</title>
</head>
  <style>
    div{
      border: 1px solid red;
      /*******实现代码******/
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /******************/
    }
  </style>
<body>
  <div>  
    1212223546516515131321154648489789448946164898989898989
  </div>
</body>
</html>

多行文本溢出
http://js.jirengu.com/bunir/1/edit

套路：搜索关键字 css multi line text ellipsis

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>多行省略</title>
</head>
  <style>
    div{
      border: 1px solid red;
      /********************/
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      /***********************/
    }
  </style>
<body>
  <div>
    4561235646546464654644989898989898989898
    5664656565656565656565656448484848484848
    4747474747777474774774744484848484848484
    1213132123123132223232131484848484848422
  </div>
</body>
</html>

4. 块级元素内的文字居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文字居中</title>
</head>
  <style>
    div{
      border: 1px solid red;
      line-height: 24px;
      padding: 8px 0;
      text-align: center;
  </style>
<body>
  <div>  
    121222354651651513132115464848978944
    89461648989898989894848484848484848844
  </div>
</body>
</html>

套路：
http://js.jirengu.com/pucen/1/edit
1.垂直居中：一般情况不要指定div的height，（定死了多行文字容易溢出，div的高度由内部文档流的高度总合决定），应该指定文字的line-height，然后用padding撑出来高度。
2.水平居中：text-align: center;

5. margin合并

div里嵌套div，外层div的高度会不会被内层div的margin撑高，取决于外层div有没有padding或者border阻挡。

6.div内的div垂直和水平居中

div内嵌套一个div，外部div定高，内部div高度自适应。
使用flex布局实现
http://js.jirengu.com/zugoc/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    .dad{
      border: 1px solid red;
      height: 300px;
      display: flex;
      justify-content:center;
      align-items:center;
    }
    .son{
      border: 1px solid green;
      width: 100px;
    }
  </style>
<body>
  <div class="dad">
    <div class="son">
      8484848484
      84ffdfdfdf
      dfdfgrrgr
    </div>
  </div>
</body>
</html>