ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> HTML教程 >> absolute和relative元素 设置百分比宽高的差异

absolute和relative元素 设置百分比宽高的差异

来源:网络整理     时间:2017-12-07     关键词:

本篇文章主要介绍了" absolute和relative元素 设置百分比宽高的差异",主要涉及到方面的内容,对于HTML教程感兴趣的同学可以参考一下:   一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准...

  一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时,却是不同的结果。

demo

  用如下小demo测试:

<aside class="container"><div class="test"></div></aside>

    .container{
      position: relative;
      margin: 100px auto;
      padding: 20px;
      height: 100px;
      width: 100px;
      border : 10px solid green;
      background-color: red;
    }    .test{
      height: 20%;
      width: 20%;
      position: relative;
      top: 0;
      left: 0;
      background-color: #000000;
    }

  效果如下:

 absolute和relative元素 设置百分比宽高的差异

  子元素以父元素的content宽度100px为基准计算的20%为20px 且是以content为参考进行的偏移(虽然这里为0)

  若子元素position为absolute时,效果如下:

 absolute和relative元素 设置百分比宽高的差异

  此时子元素的百分比宽度是以 父元素的 padding + content的值进行计算的 为28px; 而且也是以padding为基础进行偏移的。

结论

  absolute元素的百分比宽高 计算时按照的包含块的 padding + content的值算的,偏移的参考也要加上padding那部分

  relative元素的百分比宽高 计算时按照的包含块的 content的值算的.

以上就介绍了 absolute和relative元素 设置百分比宽高的差异,包括了方面的内容,希望对HTML教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_4518574.html

相关图片

相关文章