CSS 大家都很熟悉了, 这里就不多介绍了.
主要介绍一下两个在日常操作 CSS 最容易出错的地方.
margin-top 与 padding-top
这两个属性大家都很熟悉了, margin-top 表示外部的上边距, padding-top 表示内部的上边距.
取值可以是一个具体的值或者一个百分比, 如:
- margin-top: 10px;
- margin-top: 10%;
- padding-top: 20px;
- margin-top: 20%;
当取值为具体的值时, 没有什么好说的. 当取值为百分比时, 需要特别注意: 百分比不是相对于父元素的高度的, 而是相对于父元素的宽度的.
直接看例子:
用处: 可以用来在页面中显示? 固定宽高比的图片.
注意: height,top 的百分比取值, 总是相对于父元素的高度.
这里提一下, w3cSchool 中文站中, 关于 margtin-top 的描述是错误的. 地址在这里: http://www.w3school.com.cn/css/pr_margin-top.asp http://www.w3school.com.cn/css/pr_margin-top.asp
position: fixed
一提到 position:fixed, 自然而然就会想到: 相对于浏览器窗口进行定位.
但其实这是不准确的. 如果说父元素设置了 transform, 那么设置了 position:fixed 的元素将相对于父元素定位, 否则, 相对于浏览器窗口进行定位.
看例子:
给. parent 加上 transform:translateY(0) 以后,
总结
padding-top,margin-top,padding-bottom,margin-bottom 取值为百分比时, 是相对于父元素的宽度.
position:fixed, 相对于浏览器窗口定位. 例外: 父代元素中, 有元素设置了 transform, 则 postion:fixed 相对于设置了 transform 的父元素定位.
自己是一个五年的前端工程师
这里推荐一下我的前端学习交流扣 q-u-n:731771211, 里面都是学习前端的从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 2019 最新技术, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入 http://u6.gg/ek2NA
来源: http://www.bubuko.com/infodetail-2932984.html