ITPub博客

首页 > 应用开发 > Html/css > 使用CSS最容易出错的两大地方!

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

原创 Html/css 作者:智云编程 时间:2019-02-16 19:18:09 0 删除 编辑

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 的描述是错误的。地址在这里:

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的项目实战的学习资料都有整理好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些前端的项目实战

点击:


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2636178/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
从事前端5年,希望在贵平台分享前端技巧,知识心得

注册时间:2018-12-03

  • 博文量
    682
  • 访问量
    617922