zoukankan      html  css  js  c++  java
  • 移动端必须掌握知识点

    一、1px边框问题

    用伪元素模拟边框然后缩放0.5

    ul li::after {
      content: '';
       1px;
      height: 70px;
      background-color: red;
      position: absolute;
      right: 0;
      top: 0;
      /* 解决手机端有些时候1像素看起来想两像素的问题 */
      transform: scaleX(0.5);
    }
    

    二、横向滚动条

    1.滚动产生需满足的条件

    • 竖向滚动必须有一个定高,横向滚动条必须有定宽,一定不能由内容撑开。
    • 滚动容器中的内容占据的高度要大于滚动容器本身的高度
      当条件同时满足时才会出现滚动条。

    正常文档流的情况下,水平盒子如果排不开会自动换行 那么结果就是滚动容器的内容的宽度永远不会大于滚动容器自身的宽度

    2.代码展示

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./css/横向滚动条.css">
    </head>
    
    <body>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </body>
    
    </html>
    
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    
    * {
      margin: 0;
      padding: 0;
    }
    ul,
    li {
      list-style: none;
    }
    
    .box {
      // 超出宽度,加滚动条
      overflow-x: auto;
    }
    .box ul {
      // 使子项水平排列
      display: flex;
    }
    .box ul li {
      flex: 100px;
      // 不换行
      flex-wrap: nowrap;
      /* 默认状态下,子元素的宽度之和超过容器的会被压缩,忽略掉我们自己设置的宽度 */
      flex-shrink: 0;
    
      border: 1px solid #ccc;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: #09f;
    }
    
  • 相关阅读:
    检验maven的配置是否生效或正确。
    CTO、技术总监和技术经理有啥区别?
    WinScp自动执行脚本
    宝塔--服务器运维面板
    Tomcat中给server.xml加入<Context>元素
    Tomcat之Session名称修改-springboot
    修改tomcat默认的session时间
    Shiro权限框架简单快速入门
    mybatis关联查询
    <mvc:default-servlet-handler/>导致controller失效,报404错误
  • 原文地址:https://www.cnblogs.com/xiaoaitongxue/p/12709582.html
Copyright © 2011-2022 走看看