一些小技巧

1、定位的盒子水平/垂直居中对齐的完美写法

之前让我们定位的盒子水平居中对齐的写法是这样子的
水平居中：left:50%; margin-left:负宽度的一半
垂直居中：top:50%; margin-top:负高度的一半

div {
       width: 100px;
       height: 100px;
       background-color: red;      
       position: absolute;
       left: 50%;
       margin-left: -50px;
   }

不好之处：这样子的弊端是需要计算盒子本身的宽度（如果要垂直居中也需计算盒子的高度）。

好方法：我们知道2D属性中有一个transform:translate()的属性，当取值为百分比时（他与我们之前的属性有所不同，之前的都是移动父元素大小的百分比，他这个移动的是自身大小的百分比距离），如transform:translate(50%),这个是指该盒子会向左移动自身宽度一半的距离。所以我们可以这样写：

div {
       width: 100px;
       height: 100px;
       background-color: red;      
       position: absolute;
       left: 50%;
       transform:translate(50%);
   }

2、小技巧：当文本超出显示宽度时以省略号显示

（1）单行

<style>
        p{
            width: 100px;
            height: 20px;
            border:1px solid red;
            white-space: nowrap;    设置 文本超出宽度不换行显示，直接显示为一行*/
            overflow: hidden;       /*将超出部分不显示*/
            text-overflow: ellipsis;    /*将超出的文本以省略号显示*/
        }
    </style>

<p>打发士大夫士大夫阿斯蒂芬啥发生的发生的发发发发</p>

image.png

---

（2）多行

多行情况下没有单行上有固定的写法，下面是一个通用的方法
初始情况

image.png
用overflow:hidden将超出部分截掉
image.png
然后使用伪元素选择器，在最后边添加...
image.png
完美一点
image.png image.png