CSS实用技巧第二讲:布局处理 - 易启发资源网

CSS实用技巧第二讲:布局处理

作者: 易启发

全网最全的网络资源分享网站

手机扫码查看

标签:

css布局处理

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

广告位

在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看CSS布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相关,会有其他相关知识点。

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制,代码如下:

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

rem 页面布局, 不兼容低版本移动端,使用需谨慎。

overflow-x排版横向列表

通过flexbox或inline-block的形式横向排列元素,对父元素设置overflow-x:auto横向滚动查看。注意场景: 横向滚动列表、元素过多但位置有限的导航栏。

<div class="horizontal-list flex">
  <ul>
    <li>web秀</li>
    <li>阿里巴巴</li>
    <li>字节跳动</li>
    <li>腾讯</li>
    <li>百度</li>
    <li>美团</li>
  </ul>
</div>
<div class="horizontal-list inline">
  <ul>
    <li>web秀</li>
    <li>阿里巴巴</li>
    <li>字节跳动</li>
    <li>腾讯</li>
    <li>百度</li>
    <li>美团</li>
  </ul>
</div>

css样式

.horizontal-list {
    width: 300px;
    height: 100px;
    ul {
        overflow-x: scroll;
        cursor: pointer;
        margin: 0;
        padding: 0;
        &::-webkit-scrollbar {
            height: 6px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: linear-gradient(to right, #32bbff, #008cf4);
        }
    }
    li {
        overflow: hidden;
        margin-left: 10px;
        height: 90px;
        background-color: #00b7a3;
        line-height: 90px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        &:first-child {
            margin-left: 0;
        }
    }
}
.flex {
    ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    li {
        flex-shrink: 0;
        flex-basis: 90px;
    }
}
.inline {
    margin-top: 10px;
    height: 102px;
    ul {
        overflow-y: hidden;
        white-space: nowrap;
    }
    li {
        display: inline-block;
        width: 90px;
    }
}

  • 分享到:
    打赏
    未经允许不得转载:

    作者: 易启发, 转载或复制请以 超链接形式 并注明出处 易启发资源网
    原文地址: 《CSS实用技巧第二讲:布局处理》 发布于2020-2-25
    百度[百度已收录] 360[360未收录] 搜狗[搜狗已收录]

    评论

    切换注册

    登录

    忘记密码?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    CSS实用技巧第二讲:布局处理

    长按图片转发给朋友

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏