qq_43412960
qq_43412960
2019-07-05 22:18
采纳率: 79.1%
浏览 309

这是一个关于HTML的代码问题

 <!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>inline-block</title>

    <style type="text/css">
        body {
            font-family: verdana;
            font-size: 12px;
        }


    </style>

</head>

<body>
    <div style="height:400px;background:red" >



    </div>
 <span style="top:50%;position:relative">1</span>
</body>

</html>

以上是代码一

 <!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>inline-block</title>

    <style type="text/css">
        body {
            font-family: verdana;
            font-size: 12px;
        }


    </style>

</head>

<body>
    <div style="height:400px;background:red" >



    </div>
  <span style="top:50%;position:absolute">1</span>
</body>

</html>

以上是代码二
代码一 span的内容和代码二的位置不同,为什么呢

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • weixin_44180904
    weixin_44180904 2019-07-06 11:05
    已采纳

    这是定位影响到的,你可以参照开发手册,进行相应的更改,如果是简单的布局可以参考弹性布局,这样会加快你对定位的理解

    点赞 评论
  • caozhy

    因为absolute是绝对定位,而relative是相对定位,绝对定位参照的就是屏幕窗口的四边。

    点赞 评论
  • xingpengfei123
    xingpengfei123 2019-09-19 16:15

    一个是绝对定位,一个是相对定位。
    absolute:组件设置之后就会使组件变得超级自由。
    relative:组建设置之后也会变得自由,但组件原来的位置会留下一个被占据的空间,换句话说,就是你用相对定位把组件移走了,但他的轮廓还是会占据之前的位置,但是你获取不到,相当于一个透明的框架在他原来的位置占了个位置。

    点赞 评论

相关推荐