CSS中overflow

日期:2021-03-01 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

情景

近期要做的1个要求是挪动端h5网页页面,规定有1排可挑选的卡片, 超过器皿一部分能够上下拖动,另外每张卡片左上角要有1个删掉按钮。以下图:

心想:so easy, 在父器皿上加1个max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo以下:

<div class="container">
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
</div>
.container {
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}
.son {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  margin-right: 20px;
}
.delete_btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transform: translateX(⑸0%) translateY(⑸0%);
}

 

本来认为1切圆满,結果获得的結果如图:

看第矩形框左上角的鲜红色方块,本来为20 * 20的鲜红色方块有1一部分被掩藏了。我想应当是overflow危害的,因此想根据overflow-y: visible;来处理,結果是不好的。仔细的盆友应当记得overflow的默认设置值便是visible。那末缘故是甚么呢?

Why

找了好长时间,大概掌握到是以下缘故

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
大概意思是,当overflow-x为scroll或auto时,overflow-y被设定为auto,反之亦然。这就很难堪了,那如何处理这个难题呢。

ps: 上面那段话说是来自于w3c的文本文档,可是我找了半天没寻找原文,不便寻找了的小伙子伴留个连接~ [手动式狗头]

How

终归還是想让左上角的鲜红色方块显示信息详细的,那末处理计划方案呢,我这里选用的是在container上加上下列款式

padding-top: 20px;
margin-top: ⑵0px;

基本原理实际上挺简易的,加了padding-top: 20px;后,肯定精准定位的鲜红色方块就有时间间显示信息了,不容易超过器皿体积,随后根据margin-top: ⑵0px;相抵部位的转变.如图

ps: 第1个鲜红色方块左侧被遮挡住的一部分一样的思路处理,即根据padding-left和margin-left来解决。

总结

以上所述是网编给大伙儿详细介绍的CSS中overflow-y: visible;不起功效的缘故剖析及处理方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!