精华内容
下载资源
问答
  • CSS中的四种定位以及top和margin-top的区别

    千次阅读 多人点赞 2019-09-01 13:29:46
    2,position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置 3,position:absolute,绝对定位,这种定位脱离文....

    CSS中一共有四种定位分别是默认,相对,绝对,固定

    1,position:static,这种定位是默认的,一般没什么实际的作用。

    2,position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置

    3,position:absolute,绝对定位,这种定位脱离文档流,可以理解为跟其他的元素不再一个次元中,可以用top/right/bottom/left来控制位置,absolute是相对于最近祖先非static定位来定位的,如果说他的父级定位是默认的,那么他就会继续向上找父级的父级,直到找到非static定位为基准点,比如在下面的代码中

    <!DOCTYPE html>
    <html>
    <head>
        <!-- 规定字符集的编码为utf-8 -->
        <meta charset="utf-8">
        <style type="text/css">
       .div1{
            position: relative;
            width: 400px;
            height: 400px;
            border:2px solid red;
            margin:50px;
        }
        .div2{
            width: 200px;
            height: 200px;
            margin:50px;
            border:2px solid pink;
        }
        .div3{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            border:2px solid purple;
        }
        </style>
    </head>
    <body>
    	<div class="div1">
        	<div class="div2">
            	<div class="div3"></div>
        	</div>
    	</div>
    </body>
    </html>
    

    结果如下:
    在这里插入图片描述
    图中的黑色边框的就是div3,我们可以看到top:0之后的位置在div1的左上角,但是div1是他父级的父级,但是我们要是给div2设置了position:relative之后会是怎样的结果呢?
    在这里插入图片描述
    我们可以看到div3现在定位到了div2的左上角,可见absolute在div2是relative定位之后起到了这样的作用,可以尝试一下,非父级是其他的两个定位之后的结果。

    4,position:fixed,固定定位,脱离文档流,这种定位是相对与浏览器的窗口来定位,我们经常会看到网页中右下角有个回顶部的标记,无论鼠标滑轮怎么滑动他都不会改变他的位置。

    以上是我们的4种定位,下来说一点相关的的东西,我们经常会用到position:absolute,他是脱离文档流的不会对文档中的其他布局产生影响,absolute定位下的float:left/right是不起作用的,通常我们会在absolute下用top/right/bottom/left来改变他的位置,很多人认为只有绝对定位下top/right/bottom/left才起作用,其实不然,relative定位之下这几个属性也是可以使用的,在这种情况下这几个属性和margin-top/right/bottom/left的作用是类似的,都可以来改变盒子的位置,那么在relative定位下top和margin-top有什么关系呢?

    我们在上面的代码下去掉原来的div3,新加一个盒子div4并且这个盒子和div2是兄弟关系,div2和div4都使用position:relative,代码如下

    <!DOCTYPE html>
    <html>
    <head>
        <!-- 规定字符集的编码为utf-8 -->
        <meta charset="utf-8">
        <style type="text/css">
      .div1{
            position: relative;
            width: 400px;
            height: 400px;
            border:2px solid red;
            margin:50px;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: relative;
            margin-left: 100px;
            border:2px solid pink;
    
        }
        .div4{
            position: relative;
            width: 100px;
            height: 100px;
            border:2px solid black;
            margin-left:100px;
        }
        </style>
    </head>
    <body>
    <div class="div1">
        <div class="div2"></div>
        <div class="div4"></div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述
    图中的黑色边框的是div4,他的上边框现在距离是0,下来给他设置,margin-top:50px或者top:50px都会使div4向下移动50px,同时设置后向下移动100px,如果只设置margin-top:50px后,我们按F12进入开发者环境中可以看到这样的结果
    在这里插入图片描述
    也就是说设置margin-top后这个50px属于盒子模型中的一部分,但是如果我们设置了top:50px后会出现这样的结果
    在这里插入图片描述
    我们可以看到这个50px不属于盒子模型的一部分,他只是用定位来位移了一部分位置,这也就是relative定位下它俩的区别,并且top/right/bottom/left在relative下也可以使用,但是在默认定位下是不起作用的。

    展开全文
  • css中的四种定位以及top和margin-top的区别

    万次阅读 多人点赞 2017-04-21 22:32:08
    position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置 position:absolute,绝对定位,这种定位脱离文档流,...

    css中一共有四种定位分别是默认,相对,绝对,固定

    1. position:static,这种定位是默认的,一般没什么实际的作用。
    2. position:relative,相对定位 ,不会脱离文档流,类似于static,按顺序排列,一般设置也不会有什么变化,可以通过margin-top/right/bottom/left来改变框的位置
    3. position:absolute,绝对定位,这种定位脱离文档流,可以理解为跟其他的元素不再一个次元中,可以用top/right/bottom/left来控制位置,absolute是相对于最近祖先非static定位来定位的,如果说他的父级定位是默认的,那么他就会继续向上找父级的父级,直到找到非static定位为基准点,比如在下面的代码中
        .div1{
            position: relative;
            width: 400px;
            height: 400px;
            border:2px solid red;
            margin:50px;
        }
        .div2{
            width: 200px;
            height: 200px;
            margin:50px;
            border:2px solid pink;
        }
        .div3{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            border:2px solid purple;
        }
    <div class="div1">
        <div class="div2">
            <div class="div3"></div>
        </div>
    </div>

    页面中显示的结果会是怎样呢?
    这里写图片描述
    图中的黑色边框的就是div3,我们可以看到top:0之后的位置在div1的左上角,但是div1是他父级的父级,但是我们要是给div2设置了position:relative之后会是怎样的结果呢?
    这里写图片描述
    我们可以看到div3现在定位到了div2的左上角,可见absolute在div2是relative定位之后起到了这样的作用,可以尝试一下,非父级是其他的两个定位之后的结果。
    4.position:fixed,固定定位,这种定位是相对与浏览器的窗口来定位,我们经常会看到网页中右下角有个回顶部的标记,无论鼠标滑轮怎么滑动他都不会改变他的位置。


    以上是我们的4种定位,下来说一点相关的的东西,我们经常会用到position:absolute,他是脱离文档流的不会对文档中的其他布局产生影响,absolute定位下的float:left/right是不起作用的,通常我们会在absolute下用top/right/bottom/left来改变他的位置,很多人认为只有绝对定位下top/right/bottom/left才起作用,其实不然,relative定位之下这几个属性也是可以使用的,在这种情况下这几个属性和margin-top/right/bottom/left的作用是类似的,都可以来改变盒子的位置,那么在relative定位下top和margin-top有什么关系呢?
        我们在上面的代码下去掉原来的div3,新加一个盒子div4并且这个盒子和div2是兄弟关系,div2和div4都使用position:relative,代码如下
    
        .div1{
            position: relative;
            width: 400px;
            height: 400px;
            border:2px solid red;
            margin:50px;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: relative;
            margin-left: 100px;
            border:2px solid pink;
    
        }
        .div4{
            position: relative;
            width: 100px;
            height: 100px;
            border:2px solid black;
            margin-left:100px;
        }
    </style>
    <div class="div1">
        <div class="div2"></div>
        <div class="div4"></div>
    </div>

    现在浏览器中显示出来的结果会是这样的:
    这里写图片描述
    图中的黑色边框的是div4,他的上边框现在距离是0,下来给他设置,margin-top:50px或者top:50px都会使div4向下移动50px,同时设置后向下移动100px,如果只设置margin-top:50px后,我们按F12进入开发者环境中可以看到这样的结果
    这里写图片描述
    也就是说设置margin-top后这个50px属于盒子模型中的一部分,但是如果我们设置了top:50px后会出现这样的结果
    这里写图片描述
    我们可以看到这个50px不属于盒子模型的一部分,他只是用定位来位移了一部分位置,这也就是relative定位下它俩的区别,并且top/right/bottom/left在relative下也可以使用,但是在默认定位下是不起作用的。

    展开全文
  • padding-top、margin-top和top的区别

    千次阅读 2018-05-28 21:46:04
    padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的; margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包含在容器内; top:10px;是指容器本身的顶部距离页面的顶端有10...

     padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的;

    margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包含在容器内;

    top:10px;是指容器本身的顶部距离页面的顶端有10个像素

    展开全文
  • 重新认识margin-top和margin-bottom

    千次阅读 2016-11-18 17:21:08
    重新认识margin-top和margin-bottom

            margin-top和margin-bottom是HTML网页设计中常用的两个样式属性,提起margin和padding的区别想来无人不知无人不晓,那么让我们实现如下功能:

    1、“应付总额”所在div距父div的距离为20px;

    2、“寄送至”所在div距离上面兄弟div的距离为10px;

    3、“寄送至”所在div距离父div的距离为20px;

    有些童鞋会不假思索的这样写代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>重新认识margin-top和margin-bottom</title>
    	</head>
    	<body>
    			<div style="background-color:red;">
    				<div style="margin-top:20px;">应付总额: ¥45.00</div>
    				<div style="margin-top:10px;margin-bottom:20px;">寄送至: 中国 河南省郑州市金水区</div>
    			</div>
    	</body>
    </html>

    浏览器渲染后的效果如图所示:

            看到这个图是不是很吃惊:我们只实现了第二个要求,为什么会这样?一句话,我们对margin-top和margin-bottom的真实作用还没有充分的认识:margin-top用于设置其所作用的标签的上外距离,可是该上外边距相对于谁呢?是父div吗?呵呵呵,不是,因为该父div没有边界,对于margin-top来说根就参照不了,其实现在参照的是body;margin-bottom同样如此。可以如何解决这个问题呢?

    第一种方法:最简单的方式是为父div添加边框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>重新认识margin-top和margin-bottom</title>
    	</head>
    	<body>
    			<div style="background-color:red;border:2px solid green;">
    				<div style="margin-top:20px;">应付总额: ¥45.00</div>
    				<div style="margin-top:10px;margin-bottom:20px;">寄送至: 中国 河南省郑州市金水区</div>
    			</div>
    	</body>
    </html>
    浏览器渲染后的效果如图所示:

            第二种方法:使用padding-top和padding-bottom实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>重新认识margin-top和margin-bottom</title>
    	</head>
    	<body>
    			<div style="padding-top:20px;padding-bottom:20px;background-color:red;">
    				<div>应付总额: ¥45.00</div>
    				<div style="margin-top:10px;">寄送至: 中国 河南省郑州市金水区</div>
    			</div>
    	</body>
    </html>
    浏览器渲染后的效果如图所示:

    展开全文
  • layout_margintop

    2021-06-05 07:44:23
    margin是外边距的意思 Top是上 合起来就是上面的外边距 20dp是距离动态设置 android:layout_marginTop 怎么设置?详细android margin-top为负数是啥意思Android 自定义控件开发,如何获取子控件的marginAndroid的...
  • top和margin-top的区别

    千次阅读 2018-12-18 17:59:02
    top、margin-top的区别: 1、top、bottom、left、right是绝对定位,必须设置position为absolute。 margin一系列设置是相对定位。注意:如果用top等,而position未设置为absolute,那设置是不起作用的。 2、top这些...
  • CSS margin 属性top、margin-top的区别padding指内边距,是盒子里面内容到边框的距离,不允许使用负值。padding:10px 5px; 上内边距下内边距是10px,右内边距左内边距是5px。padding:1px 2px 3px 4px; (上右下左...
  • margin-top:功能为设置元素的上外边距。 top:规定元素的顶部边缘。 二、特点不同 margin-top:允许使用负值。定义固定的上外边距。默认值是 0。 top:定义了一个定位元素的上外边距边界与其包含块上边界之间的...
  • 今天就来带大家好好认识一下margin-topmargin-top语法.div{margin-top:10px}设置了对象“.div”上边间距为10px相关教程:margin二、margin-top应用实例为了观察效果,实例设置3个DIV盒子,均设置相同的宽度、相同...
  • hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素父元素的边距则没有发生变化。 html代码: 复制代码代码如下: ”box1″> ”box2″>...
  • 展开全部android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">android:layout_width="match_parent"android:layout_height="0dp"/>...
  • margin-toptop、以及position的总结

    千次阅读 2018-08-27 15:27:35
     这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)上边框(border-top),那么这个盒子的上边距会 其内部文档流中的第一个子元素的上边距重叠。 一个盒子如果没有上补白(padding-top)上...
  • 首先说一下marginpaddingmargin:外边距,设置对象四边的外延边距,相对的是自身padding:内边距,设置对象四边的内部边距.相对的是父视图那么margin-top,padding-top的区别很清楚了 width: 100%; height: 200px; top...
  • top:根据自身高度计算。 margin-top:根据自身宽度计算。 div { width: 400px; height: 600px; position: relative; top: 10%; /* 60px */ margin-top:10%; /* 40px */ } 2.absolute top:根据上游非...
  • View margin/marginTop 注意点

    千次阅读 2019-02-02 21:22:12
    android:layout_marginTop=&quot;30dp&quot; 那么只有 android:layout_margin=&quot;10dp&quot; 会生效,并不会叠加 android:padding=&quot;10dp&quot; android:paddingTop=&quo
  • var bordT = $('img').outerWidth() - $('img').innerWidth(); var paddT = $('img').innerWidth() - $('img').width(); var margT = $('img').outerWidth(true) - $('img').outerWidth(); 转载于:...
  • 兄弟之间的margin-top margin-bottom 会叠压  所以当给兄弟之间上下排布控制距离的时候 只需要控制器中一个div即可    asd      #a{  margin: 0 auto;  width: 500px;  height: 500px;...
  • margin-top用法

    千次阅读 2020-01-28 21:39:08
    例:margin-top:10px; 10px相当于微信小程序中的20rpx,rpx为微信小程序的单位。
  • 假如有一个header的盒子一个footer的盒子,分别给header盒子margin-bottom:60px;再给footer盒子,margin-top: 15px;读者朋友你觉得这个中间的边距是多少呢? 答案是:60px 因为边距重合在一起了,选最大者,因此...
  • 本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
  • margin-top塌陷问题的现象与解决

    千次阅读 2018-05-26 14:55:32
    margin-top塌陷问题 什么是margin-top塌陷 margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想让子元素的边框距离父元素...
  • margin-top重叠问题

    千次阅读 2018-10-09 11:11:55
    父子div的margin-top重叠问题,看如下示例: &lt;div class="div1"&gt; &lt;div class="div2"&gt; &lt;/div&gt; &lt;/div&gt; .div1{ width:200px; ...
  • CSS中,margin-top和margin-botttom有一些特殊性。它们会在某种情况之间相互合并,并且会将值最大的那个当作外边距的值。 1. margin-top具有继承性 当两个盒子是父子关系时,对父元素设置margin-top,子元素也...
  • 展开全部可以参考下面的代码:a{display:block;float:left}...i++){document.getElementById('a'+i).style.marginTop = parseInt(document.getElementById('a'+i).style.marginTop)+5+'px';}JavaSc...
  • 常见margin-top失效的情况

    千次阅读 2018-07-16 20:07:10
    关于margin-top失效, 常出现两种情况: (一)兄弟元素之间margin-top失效 先看下面代码: &lt;div&gt;   &lt;div class="box1"&gt; float: left &lt;/div&gt;   &...
  • margin-top、padding-top的值为百分比

    千次阅读 2017-05-22 14:05:54
    问题:当margin-top、padding-top的值是百分比时,分别是如何计算的? A 相对父级元素的height,相对自身的height B 相对最近父级块级元素的height,相对自身的height C 相对父级元素的width,相对自身的width D...
  • margin-top在html中的意思是什么

    千次阅读 2021-06-16 09:46:23
    其语法格式为“margin-top:auto|length|%;”,允许设置负值。本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。CSS margin-top 属性margin-top属性设置元素的上部边距。注意: 负值是允许的。...
  •  逻辑上,上诉两种方式,对应的效果应该是一样的,但是在浏览器调试的时候分别运行在nexus iphone 上,发现在iphone上的运行效果是不一样的    对于ios端,第一种情况margin-top: -20px; 会导致 .xia的三个 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,634
精华内容 9,853
关键字:

top和margintop