参考: 使用css时,可能会出错的两个地方
1、padidng-top\margin-top
padidng-top\margin-top可以设置'px' 或者是'%',设置'px'略过,说一下设置‘%’
code1:
子元素的 padding-top margin-top 设置为 百分数 时,是相对于父元素的宽幅的百分比,不是高度
<style> .parent { width: 100px; height: 300px; background-color: #ab55ed; overflow: hidden; } .child { /* padding-top: 100%; */ margin-top: 100%; width: 50px; height: 50px; background-color: #ff55ff; } </style> <div class="parent"> <div class="child"></div> </div>
2、fixed
一提到position:fixed
,自然而然就会想到:相对于浏览器窗口进行定位。
但其实这是不准确的。如果说父元素设置了transform
,那么设置了position:fixed
的元素将相对于父元素定位,否则,相对于浏览器窗口进行定位。
code2:
注意,body会有默认的8px padding
<style> .parent { width: 100px; height: 300px; background-color: #ab55ed; /* transform: translateY(0) */ } .child { width: 50px; height: 50px; background-color: #ff55ff; position: fixed; top: 50px; left: 50px; } </style> <div class="parent"> <div class="child"></div> </div>
/* transform: translateY(0) */ 把注释解除掉,可以看到不同!