最近写了点官网前台,久违的用了很多css,有些新的小知识积累,记在这里。
display:inline-block
相关
做轮播的时候不想用float,用了
display:inline-block
来布局,但是会遇到一些小问题:
- 元素之间会有额外的间隙。此时使用
font-size: 0;letter-spacing: 0;
来消除间隙。 - 在safari下使用,会出现水平对不齐的bug,增加
vertical-align:top;
来做兼容。
文本展示相关:
首页经常会出现文本太长,需要隐藏的情况,此时使用一下样式:
// 单行
.ellipsis() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 多行,其中@line是最大行数,这里是less的函数。
.multiple-ellipsis(@line) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 重点
-webkit-line-clamp: @line; // 重点
-webkit-box-orient: vertical;
}
多个相同子元素的不同样式
有需求要求两列显示多个元素,但是元素个数不定。当元素总数为奇数,最后一个元素要有特殊样式;当元素总数为偶数,最后两个元素要有特殊样式:
.element:nth-child(2n+1):last-child{color:red;}
.element:nth-child(2n):last-child{color:red;}
.element:nth-child(2n+1):nth-last-child(2){color:red;}
这里的要点是nth-child()
和last-child
/nth-last-child()
可以连续的配合使用。