一、1px边框问题

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

ul li::after {
  content: '';
  width: 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;
}

移动端必须掌握知识点

一、1px边框问题

二、横向滚动条

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

2.代码展示

猜你喜欢