CSS padidng-top\margin-top\fixed 的特殊性
2024-09-07 03:40:34
参考： 使用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) */ 把注释解除掉，可以看到不同！
最新文章
- 例解 Linux 下 Make 命令
- BZOJ 2081: [Poi2010]Beads
- 伪Textatea的构建（div+table），以及相应的滚动条问题与safari上的优化
- 二分图&网络流&最小割等问题的总结
- Nim教程【十一】
- 第九回 Microsoft.Practices.Unity.Interception实现基于数据集的缓存（针对六，七，八讲的具体概念和配置的解说）
- MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作
- 传智播客JavaWeb听课总结
- centOS7 修改hostname
- bootstrap bootstrapTable 分页 传值问题
- Jquery获取选中的checkbox的值
- 使用 Linux 终端 SSH 登录 VPS
- 系统调用与API的区别
- wpf数据自动树结构
- 跟我学android- 创建运行环境（二）
- 给一个int型整数，如何将这个整数的奇偶位互换
- 使用sae定时执行Python脚本
- Rlwrap工具的安装和配置
- Golang 入门系列（六）理解Go中的协程（Goroutine）
- 使用kingshard遇到的坑