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
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的父元素定位。
自己是从事了五年的前端工程师，不少人私下问我，2019年前端该怎么学，方法有没有？
没错，年初我花了一个多月的时间整理出来的学习资料，希望能帮助那些想学习前端，却又不知道怎么开始学习的朋友。
如果有想一起学习web前端，想制作酷炫的网页，可以来一下我的前端群：731771211，从最基础的HTML+CSS+JavaScript【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的项目实战
点击： 加入
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
