测试position和margin的百分比

最新推荐文章于 2021-08-04 01:26:58 发布

livezsw

最新推荐文章于 2021-08-04 01:26:58 发布

阅读量279

点赞数

分类专栏： css 文章标签： html css3

本文链接：https://blog.csdn.net/qq_41111677/article/details/108267693

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      /*测试top百分比*/
      .box {
        background: #66e6ff;
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 500px;
        /*padding: 100px;*/
      }
      .pox {
        background: #f0f;
        width: 30%;
        position: absolute;
        top: 10%;
        right: 10%;
        z-index: 99999;
      }

      /*测试margin百分比*/
      .box1 {
        margin: 600px 0;
        background: #ccc;
        border: 1px solid #ccc;
        width: 1000px;
        height: 500px;
      }
      .pox1 {
        background: #f0f;
        width: 30%;
        height: 10%;
        margin-top: 10%;
        margin-left: 10%;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="pox">
        测试position的百分比：
        position的left的百分比是根据父元素的宽度来取值的,如果父元素有paddding,则根据width+padding
        position的top的百分比是根据父元素的高度来取值的,如果父元素有paddding,则根据height+padding
      </div>
    </div>

    <div class="box1">
      <div class="pox1">
        测试margin的百分比：
        margin的值是百分百的时候，其值是基于父元素的宽度来计算的，并非是自身的宽度，
        padding 百分比的取值也是一样的,
        width的高度百分比是按其父元素的宽度来计算的
        height的高度百分比是按其父元素的高度来计算的
      </div>
    </div>
  </body>
</html>

livezsw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
测试position和margin的百分比

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*测试top百分比*/ .box { backgr.
复制链接

扫一扫