使用CSS最容易出错的两大地方!
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的父元素定位。
自己是一个五年的前端工程师
这里推荐一下我的前端学习交流扣q-u-n:731771211,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!
点击:加入
- C语言一个细节地方的说明【防止使用不当而出错】
- javascript中使用css需要注意的地方小结
- 使用指针时,容易出错的几个地方
- 使用CreateProcess和wcscat_s容易出错的地方
- C#.NET使用NHibernate 1.0 XML映射使用中容易出错的地方全程记录
- 编写CSS容易出错的地方(以及如何避免它们)
- 使用 JNI 时容易出错的地方相关总结
- 关于使用SSH框架分页的实现以及容易出错的地方
- 【原创】今天发现CSS上的一点使用FLoat要注意的地方(FireFox+IE)
- 使用jQuery出错的地方
- Android及时通讯——配置环信及时通讯注意地方,EvevtBus使用详解,网络请求过程中退出出错处理办法
- 关于c++ fstream的一个容易使用出错的地方。
- 【原创】今天发现CSS上的一点使用FLoat要注意的地方(FireFox+IE)
- C#.NET使用NHibernate 1.0 XML映射使用中容易出错的地方全程记录(转)
- 乌克兰已成为世界上最容易使用数字货币的地方之一
- JNI编程指南-第十章 使用JNI时容易出错的地方
- javascript中使用css需要注意的地方小结
- 使用Storyboard拖线容易出错的地方
- 使用正则表达式时,容易出错的地方~
- 在适当的地方使用CSS新技术