我们都知道盒子模型的组成,外边距,内边距,内容区,和边框,在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设置宽度无效的原因。