使用CSS最容易出错的两大地方！

标签：图片   模式   ges   www.   外部   nsf   http   推荐   基础   

主要介绍一下两个在日常操作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

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最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击：加入

使用CSS最容易出错的两大地方！

标签：图片   模式   ges   www.   外部   nsf   http   推荐   基础   

原文地址：http://blog.51cto.com/14082686/2346432