CSS tricks

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/fukaiit/article/details/100601880

想记录一些CSS使用的little tricks，每个小知识点不足以构成一篇博客，在此汇总记录，持续更新。

---

1. text-align: justify 在单行上不起作用怎么办

---

实现文本两端对齐：

text-align: justify;

多行文本：最后一行左对齐，其它行两端对齐；就像在word中设置两端对齐一样的效果；完美；
单行文本：那它就是最后一行了，那就不起作用了；

怎么办呢？

方法1：text-align-last: justify;

text-align-last: justify;

只对最后一行起作用，如果是多行文本的话，配合text-align: justify;使用即可，当然如果是多行文本的话，我们通常不需要最后一样两端对齐。
网上说兼容性差，其实我觉得还可以了（参考MDN），除非你对浏览器兼容性很高的话，请参考方法2和方法3。

方法2：添加一个100%宽度的内联块状元素作为第二行

方法2和方法3都是处理成两行，骗过浏览器，然后再想办法让第二行隐藏即可，这样，看到的只是一行两端对齐的文本。

<div>
    Lorem ipsum dolor sit<span></span>
</div>

div {
    border: 1px solid;
    width: 25%;
    /* 关键样式 */
    text-align: justify;
}
/* 关键样式 */
div>span {
    display: inline-block;
    width: 100%;
}

可见这样是显示第二行的空行的，当然不可以直接display: none隐藏掉span元素，可以通过控制父元素高度啥的实现隐藏第二行。

方法3：使用after伪元素伪造100%宽度的第二行

方法2还要修改html，这个方法不用动html，要稍好一些，效果同上。

<div>
    Lorem ipsum dolor sit
</div>

div {
    border: 1px solid;
    width: 25%;
    /* 关键样式 */
    text-align: justify
}
/* 关键样式 */
div::after {
    content: "";
    display: inline-block;
    width: 100%;
}

---

2. CSS3 calc()函数

---

calc()用于计算长度值：

• 支持 “+”, “-”, “*”, “/” 运算；
• 支持任何长度值，包括百分比、像素数、整数等；
• 需要特别注意的是，运算符前后都需要保留一个空格，如：width: calc(100% - 10px);

举个简单例子：使用calc()轻松实现左侧定宽、右侧自适应的两栏布局
我之前有使用定位+margin技巧很麻烦地实现；也可通过flex实现；这么简单的布局没必要使用flex的话，使用calc可轻松实现：

<div class="left">左侧定宽200px</div>
<div class="right">右侧自适应宽度</div>

div {
    border: 1px solid;
    height: 100vh;
    float: left;
    box-sizing: border-box;
}
.left {
    width: 200px;
}
.right {
    width: calc(100% - 200px);
}

扩展阅读：CSS 函数