css如何实现间距布局

这篇文章主要为大家展示了“css如何实现间距布局”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现间距布局”这篇文章吧。

间距布局

间距布局指容器内节点从左往右从上往下排列且以特定间距间隔的占位布局。间距布局常见于各大列表，是笔者认为最重要的布局之一。为何如此简单的布局还是花费一些篇幅讲解呢？最近笔者查看了Github上很多与间隔布局相关的CSS代码，虽然整体效果看上去无大碍，但margin/padding和结构选择器却乱用，因此笔者想从零到一纠正间距布局的正确编码方式。

在进入编码环节前，笔者想重点讲解:nth-child()的点睛之笔。大部分同学可能只认得:nth-child(n)、:nth-child(2n-1)、:nth-child(2n)和:nth-child(xn)的日常用法，但其实还有一些你可能未见过的用法。在此笔者借这次机会将:nth-child()所有用法总结下，n/x/y代表正整数，最小值为1。

• :nth-child(n)：选择第n个元素

• :nth-child(odd)：选择奇数位置元素，相当于:nth-child(2n-1)

• :nth-child(even)：选择偶数位置元素，相当于:nth-child(2n)

• :nth-child(xn)：选择第x*n个元素

• :nth-child(x-n)：选择前x个元素

• :nth-child(y-n):nth-child(n+x)：选择第x~y个元素

分析间距布局的一切特点，捕获特征很有利于将特征转换成CSS代码。

• A：确定容器间的间距，使用margin声明

• B：确定容器内的间距，使用padding声明，后续方便声明background-color(该步骤很易与上一步骤混淆，请特别注意)

• C：确定靠近容器边界的节点与容器的间距，使用padding声明容器而不是使用margin声明节点(该步骤说明上一步骤的处理结果)

• D：确认每行节点的左右间距，使用margin-left/margin-right(二选一)声明节点

• E：确认最左列节点或最右列节点与容器的间距，使用margin-left:0声明最左列节点或使用margin-right:0声明最右列节点

• F：除了首行节点，使用margin-top声明其余节点

• G：若希望容器顶部底部留空，使用border-top/border-bottom代替padding-top/padding-bottom

全部步骤串联起来理解可能会产生混乱，但结合以下代码理解相信就能很快熟悉。以一行排列3个节点总共8个节点为例，最终效果为三行三列。

<ul class="spacing-layout">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

.spacing-layout {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    margin-top: 20px; // 对应A
    padding: 20px; // 对应B和C
    // padding-top: 0; // 对应G
    // padding-bottom: 0; // 对应G
    // border-top: 20px solid #f66; // 对应G
    // border-bottom: 20px solid #f66; // 对应G
    width: 700px; // 稍微留空用于显示滚动条
    height: 400px;
    background-color: #f66;
    li {
        width: 200px;
        height: 200px;
        background-color: #66f;
        line-height: 200px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        &:not(:nth-child(3n)) {
            margin-right: 20px; // 对应D和E
        }
        &:nth-child(n+4) {
            margin-top: 20px; // 对应F
        }
    }
}

以上是“css如何实现间距布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！