css中margin-top和top有啥区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中margin-top和top有啥区别相关的知识,希望对你有一定的参考价值。

还有就是margin-top和top的适用范围是怎样的

一、功能不同

1、margin-top:功能为设置元素的上外边距。

2、top:规定元素的顶部边缘。

二、特点不同

1、margin-top:允许使用负值。定义固定的上外边距。默认值是 0。

2、top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。


三、规定不同

1、margin-top:所有主流浏览器都支持 margin-top 属性。

2、top:如果 "position" 属性的值为 "static",那么设置 "top" 属性不会产生任何效果。


参考资料来源:百度百科-CSS top

参考资料来源:百度百科-CSS margin-top

参考技术A margin-top是你这个层的边距设置,是上边距对吧,top是当css样式为绝对定位(即position:absolute; )时,left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位,比如:position:absolute;top:0px; 参考技术B margin-top 是上边界..距离一个标签,例如div,body的边框的上面的距离..
top 是绝对定位...
你自己找个网页设置下css.自己测试下就知道了....

css中负值(px)的问题有啥?

margin取负值之后,例如margin-top:-1px; 元素会从父框架的顶部突出一个像素,如果父框架设置了overflow:visibled的话,这个元素就会看起来显示在父框架外面了,如果取了正值,例如margin-top:1px;元素就是距离父框架的顶部一个像素,会在父框架内显示。

padding取了负值之后是没有任何效果的,浏览器会认为padding:0。如果padding取正值,就是在元素内部填充,这个很好理解。position取了负值之后的效果和margin差不多,只是position通常是应用绝对定位场景的,而margin通常是应用在相对定位场景的,而且position可以定义z轴上的位置关系,但是margin一般是不可以的,两个的区别主要是在这个方面,至于取负值,在视觉上其实没有什么太大的区别。

参考技术A margin取负值之后,例如margin-top:-1px; 元素会从父框架的顶部突出一个像素,如果父框架设置了overflow:visibled的话,这个元素就会看起来显示在父框架外面了~如果取了正值,例如margin-top:1px;元素就是距离父框架的顶部一个像素,会在父框架内显示。

padding取了负值之后是没有任何效果的,浏览器会认为padding:0。如果padding取正值,就是在元素内部填充,这个很好理解,就不解释了。

position取了负值之后的效果和margin差不多,只是position通常是应用绝对定位场景的,而margin通常是应用在相对定位场景的,而且position可以定义z轴上的位置关系,但是margin一般是不可以的,两个的区别主要是在这个方面,至于取负值,在视觉上其实没有什么太大的区别。

以上是关于css中margin-top和top有啥区别的主要内容,如果未能解决你的问题,请参考以下文章

css中margin-top和top有啥区别

css中负值(px)的问题有啥?

子元素的margin-top属性为啥会影响父元素的margin-top?

HTML网页编程的CSS中关于margin-top和margin-bottom的问题

css中margin-top的两个问题

CSS子元素“margin-top”属性影响父元素[重复]