首页 前端知识 margin-right无效问题简析

margin-right无效问题简析

2024-04-16 17:04:36 前端知识 前端哥 712 746 我要收藏

我们都知道盒子模型的组成,外边距,内边距,内容区,和边框,在css样式中一般通过margin-left和margin-top控制盒子的向右和向下移动,可是每当在css样式中添加margin-right样式往往不会生效,这又是为什么呢?今天我们来详细说说这个问题。

在了解这个问题之前,我们先要了解一下css中的过渡约束问题,所谓过渡约束问题,是浏览器所限定的,元素在其父元素中水平方向的位置由以下几个属性共同决定:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right= 父元素内容区宽度

如图所示:

 如果不满足这个公式的话,浏览会自动的调整相应的宽度来匹配它,其中优先调整的是没有定义到的值,例如下列代码:

<style>
        .out-box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .inner-box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid;
            margin-left:20px;
            padding: 20px;
            
        }
</style>

   <div class="out-box">
        <div class="inner-box">

        </div>
   </div>

图片:

 

此时我们没有设置margin-right,所以盒子的右外边距便会被浏览器自动计算,值就是300-40-2-100 -20 = 138px ,这也是为什么我们在css中设置样式时盒子会相应移动的原因,浏览器会自动调整相应的宽度,可是浏览器中给 margin-right默认设置了auto属性,因此子盒子的设置都是从左上开始的,这也是我们对css中的margin-right设置宽度无效的原因。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5045.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!