圣杯的margin-left:-100%；理解

最新推荐文章于 2023-05-08 01:00:08 发布

Haley6

最新推荐文章于 2023-05-08 01:00:08 发布

阅读量407

点赞数

分类专栏：圣杯 margin-left：-100%； margin 文章标签： css

本文链接：https://blog.csdn.net/Haley6/article/details/115843496

版权

圣杯同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

margin

2 篇文章 0 订阅

订阅专栏

margin-left：-100%；

1 篇文章 0 订阅

订阅专栏

圣杯的margin-left:-100%;理解

问题?

为什么margin-left:100%;后浏览器自适应时.left会贴着.container的padding-left最右边???

要了解的知识

width:auto/100%区别*

width:auto;

父元素的width=子元素的width+子元素border+子元素margin+子元素padding

width:100%;

子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分

总之:同样设置了padding下width(100%)的盒子大小要比width(auto)的大

margin-left为负值的理解

https://blog.csdn.net/Haley6/article/details/115819480

解释

代码

圣杯布局不是很完整的一部分代码(仅用于解释margin-left:-100%😉

 <style>
      .center {
        float: left;
        /* 父元素内容的宽的100%  */
        width: 100%;
        height: 300px;
        background-color: green;
      }
      .left {
        float: left;
        width: 300px;
        height: 300px;
        /* 这个-100%是相对于父盒子的,即container,而此时container没有设置宽度为auto*/
        margin-left: -100%;
        background-color: red;
      }
      .right {
        float: left;
        width: 180px;
        height: 300px;
        /* margin-left: -180px; */
        background-color: yellow;
      }
      
      .container {
        /* width: 100%; */
        background-color: blue;
        padding-left: 210px;
        padding-right: 190px;
      }
    </style>

<body>
    <div class="container">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>

理解

假设你已经知道了width:100%与auto,和margin负值的知识;

给.left设置 margin-left: -100%;后,
1. 首先,在margin负值的那片文章中我们一直讨论的是margin-left为具体的负值,没有使用百分比,但这里使用了百分比margin-left: -100%;
2. 正如你所知,当margin-left设为百分比时,会使用其父级的宽度,这里同样如此,但是我们的.container的宽度为auto,
  
  此时把浏览器窗口(假设开始浏览器width为1000px)看成父元素,.container看成子元素,那么.container的width是浏览器宽度(1000px)- padding-left(210pxpx)-padding-right(190px)=600px后的
3. 但是.center的宽度是100%,意味着它的width始终等于.container的width(即浏览器宽度- padding-left-padding-right=600px)
4. 当.left总宽度(margin-left:-300px;时此时总宽度为0,.left右边界会与.center左边界对齐,然后由于不影响自身宽度,所以向左覆盖.center补全自己的width)可以使它与.center在一行并且当设置的负值绝对值大于自身宽度时.left会向左移动,这里设置margin-left: -100%;.left右边界会从.center左边界开始向左移动.container(width)-300px的距离,之后补全自己时向左继续覆盖300px,所以此时你会看到.left左边紧贴.center的最左边,(即.container的最右边)
5. 总之,就是**.left右边界从.center最右边开始向左移动的距离+.left(width).center的宽度 .container的宽度 == 浏览器宽度- padding-left(.container的)-padding-right(.container的)**,所以最终padding-left不会在.left因为负margin而左移的过程中被挡住。
6. 如果你有兴趣,给.container加上width:100%;会发现.center的宽度要比刚才的大,但仍然满足结论的等式
7. 如果你还很清楚,可以试试把.center的width修改为600px这一固定大小,把.container的width设置为100%,在调节浏览器宽度你会发现.left开始移动到了padding-left的区域,这是因为
  
  .left右边界从.center最右边开始向左移动的距离+.left(width)>.center的宽度 <.container的宽度 == 浏览器宽度,当但是一定有.left右边界从.center最右边开始向左移动的距离+.left(width)==浏览器宽度,所以.left会向左移动
  时会覆盖padding-left。

Haley6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯的margin-left:-100%；理解

圣杯的margin-left:-100%;理解问题?为什么margin-left:100%;后浏览器自适应时.left会贴着.container的padding-left最右边???要了解的知识width:auto/100%区别*width:auto;父元素的width=子元素的width+子元素border+子元素margin+子元素paddingwidth:100%;子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分总之:同
复制链接

扫一扫

专栏目录