css小技巧

1. 实现1:1的div

宽度自适应, 高度为0
padding-top: 100%;

2. 文字两端对齐:

1. 将文字用span包起来
2. 在span上添加样式

<style type="text/css">
div{
  width: 200px;
}
span{
  display: inline-block;
  width: 200px;
  text-align: justify;
}
span::after{
  content:'';
  width: 100%;
  display: inline-block;
}
</style>

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

3. 水平居中

text-align: center;

4. 垂直居中

div中的文字居中可以使用

div{
     border: 1px solid red;
     line-height: 24px;
     padding: 8px 0;
     text-align: center;
   }

div里面的div绝对居中

子元素中: margin: 0 auto;
父元素中: padding: 100px 0;
或者用 flex

5. 文字溢出省略（单行）

div{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

6. 文字溢出省略（多行）

google搜: css multiline text ellipsis

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

---

7. 脱离文档流的方法:

1. float
2. postion: absolute
3. postion: fixed