css常用小技巧

1.列表最底部一行底对齐，之前常用方式是绝对定位，现在直接可以：

.card_link {
   margin-top: auto;
}

2. 多行排版最后一行边距去掉：

.box:not(:last-child) .element{
   margin-bottom: 1rem;
}

    更好的解决方案是通过向父元素添加负边距来取消不需要的间距。

.wrapper {
    margin-bottom: -16px;
}

解决方案2-相邻的同级组合器

.element + .element {
    margin-top: 16px;
}

3.使用网格布局可以增加内边距

.element{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}	

4.列表4列布局

.grid--4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}
.grid__item {
    flex-basis: 25%;
    padding-left: 10px;
    margin-bottom: 16px;
}

还有一种grid布局

.grid--4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

5.水平横向滚动，增强滚动体验

.wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/683

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！