边框或圆角被背景颜色挡住的解决方案
6.5日更新
之前傻了,哪有那么复杂,直接加个overflow:hidden;就行了,auto还会导致滚动条,多low哦
问题描述
记录一个工作中遇到的问题,给外层div设置了边框,但是里面内容如果宽度100%,然后有背景,就被挡住了。如下图:
使用过的方法
1.于是我设置margin-left: 0.5px;
,左侧是不被挡住了,但是有些地方下面被挡住,而且圆角也被挡住,行不通。
2.我又使用伪元素:after
,宽高100%
定位画一个边框,结果发现里面的内容被这个挡住了,点不了东西
3.最终,加上overflow: auto
, 完美解决。
overflow
属性规定当内容溢出元素框时发生的事情
后记
以前从来没注意这个,在这个问题里,却立了大功。
好记性不如烂笔头,看到自己觉得应该记录的知识点,结合自己的理解进行记录,用于以后回顾。