css3 margin-top:% 百分比以谁为标准的问题

最新推荐文章于 2024-04-15 19:17:28 发布

赤贯妖星

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量3.2k

点赞数 2

分类专栏： CSS 文章标签： css3 html/css margin-top

本文链接：https://blog.csdn.net/gxc516/article/details/91355938

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>定位</title>
    <style>
        *{
            margin:0px;
            padding:0px;

        }
       .container{
           width: 800px;
           height:600px;
           background-color: #cf0;
       }
       .container .c_header{

         background-color: #aaa; 
            height: 40px;
       }
       .container .c_body{
       
         writing-mode:vertical-lr;
        width:600px;
           height:400px;
           border:solid 1px #000;
       }
       .container .c_body .c_b_show{
           width:10px;
           height:10px;
           background-color: #000;
           margin-top:1%;
       }
    </style>
</head>
<body>
  <div class="container">
      <div class="c_header"></div>
      <div class="c_body">
           <div class="c_b_show"></div>
      </div>
  </div>/body>
</html>

上面的例子，一个父级div （.container）包含两个子div(.c_header .c_body) 。

在div（.c_body ）中包含了我们实验的子标签div class=' c_b_show',

（操作一）我们为子div 设置margin-top: 1%; 然后在控制台按住上下键的上键如图

可以看到margin-top：67%；时左侧子div （.c_b_show）已经到达父级标签的最下边了，看图片最右侧盒子模型margin 的值为402px，可以得出%百分比以父级div的Width宽度为标准的，父级的width 和 height 在的<style> 标签中的.c_body 中可以看到，想要解决的方法我想到两个，如果有其他的方法可以在下面留言

一、在父级div中设置 writing-mode的值

writing-mode:vertical-lr;

然后执行上面的（操作一）如下图

改变其布局格式，让margin-top：%；的百分比以父级的height属性值为标准，此时在看右侧margin-top：100%；盒模型的margin值为400px,

二、父级div width 和 height

个人认为把width = height 设置相同的像素也能够达到相同的效果，这样做有一个弊端，就是视图必须是正方形

注意：margin：值不管是百分比还是像素的形式，它的含义都是距离外边盒子的距离，找准它的依照标准，能够解决很多问题

赤贯妖星

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 margin-top:% 百分比以谁为标准的问题

<!DOCTYPE html><html><head> <title>定位</title> <style> *{ margin:0px; padding:0px; } .container{ ...
复制链接

扫一扫