css中的resize设置、高度没有对齐、表单在校验、边框发生重叠

小知识点汇总 css

❓:css 中的 resize 设置
💡:用户可手动改变其元素的宽高,需要配合 overflow:auto 使用

❓:当一些图标和字体的高度没有对齐的时候(一般我们弹性布局已经设置了align-item:center 但是依旧发现两个元素之间没有垂直居中)
💡:优先考虑 height-line:22px 等数值进行调整

❓:react 开发时候,antd 表单在校验的时候,我们会发现,校验失败之后,错误提示会将我们的元素给上面顶一点距离,导致 原本平齐的元素发生了错位
💡: 我们可以优先考虑vertical-align:top

❓:当我们再设置一个边框线的时候和相邻的一个元素的边框发生重叠的时候,导致我们重叠部分的边框线看起来比其他的
💡:

  1. 负 margin
width: 200px;
height: 200px;
border: 1px solid #000;
margin-top: -1px;
  1. 取消某个边框的 border
  2. 使用 box-shadow
    这样处理的话记得对半砍宽度
border: 0.5px solid #000;
box-shadow: 0 0 0 0.5px #000;

❓:设置min-height: 0px;为啥滚动就没了
💡:
`min-height: 0px; 这一样式设置本身并不会直接导致滚动条消失,但它可能在一个特定的布局上下文中起到了作用,影响了滚动条的显示。

这种情况通常发生在使用了Flexbox布局(或Grid布局)的容器中。在Flex容器中,默认情况下,flex项(flex children)的最小尺寸是auto,这意味着它们不会缩小到一个无内容(内容大小为0)的状态。它们至少会是包含内容那么大。这可能会阻止滚动条的出现,因为flex项不会变小到需要滚动条去浏览它们的全部内容。

当你将某个flex项的min-height或min-width设为0时,你实际上是允许这个项收缩到更小的尺寸,哪怕这意味着它内部的内容将无法全部显示。因此,如果flex项内部的内容比项本身大,这个项就会出现滚动条。

当min-height从非0值更改为0px后观察到滚动消失,可能的原因在于:

容器的高度或宽度取决于其内容,把min-height设为0后,容器缩小了,不再需要滚动。
容器内部的某个子元素(flex-item)自由缩放,与它内部的内容无关。
在解决布局问题时,了解CSS布局的工作原理非常重要。如果有具体的代码或布局示例,能更精确地分析原因。在没有看到实际代码的情况下,以上解释只能作为一般性的指导。如果需要更具体的帮助,可以提供相关的HTML和CSS结构,以便更准确地定位问题所在。`

posted @ 2024-01-31 15:17  郭杰前端开发  阅读(11)  评论(0编辑  收藏  举报
## 希望内容对你有帮助,如果有错误请联系我 q: 1911509826,感谢支持