web前端入门到实战:CSS最容易出错的两大地方

爷,独闯天下 提交于 2019-11-27 21:32:37

css大家都很熟悉了,这里就不多介绍了。

主要介绍一下两个在日常操作css最容易出错的地方。

margin-top 与 padding-top

这两个属性大家都很熟悉了,margin-top表示外部的上边距,padding-top表示内部的上边距。

取值可以是一个具体的值或者一个百分比,如:


margin-top: 10px;
margin-top: 10%;

padding-top: 20px;
margin-top: 20%;

当取值为具体的值时,没有什么好说的。当取值为百分比时,需要特别注意:百分比不是相对于父元素的高度的,而是相对于父元素的宽度的。

直接看例子:

用处:可以用来在页面中显示 固定宽高比的图片

注意:heighttop的百分比取值,总是相对于父元素的高度

这里提一下,w3cSchool中文站中,关于margtin-top的描述是错误的。地址在这里:http://www.w3school.com.cn/css/pr_margin-top.asp

position: fixed
一提到position:fixed,自然而然就会想到:相对于浏览器窗口进行定位。

但其实这是不准确的。如果说父元素设置了transform,那么设置了position:fixed的元素将相对于父元素定位,否则,相对于浏览器窗口进行定位。

看例子:

给.parent加上transform:translateY(0)以后,

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,正因为我不是211,985,只是个普通的本科生,英语不是特别好,数学不是特别好。所以我选择了前端。工作第六个年头了,我庆幸自己选择了这条路。767-273-102 秋裙。与大家分享一些学习方法,实战开发需要注意的细节。从零基础开始怎么样学好前端。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端

总结

padding-top、margin-top、padding-bottom、margin-bottom取值为百分比时,是相对于父元素的宽度。

position:fixed,相对于浏览器窗口定位。例外:父代元素中,有元素设置了transform,则postion:fixed相对于设置了transform的父元素定位。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!