带有负边距的填充内部元素的容器不能正常工作
问题描述:
为什么.column2
具有100%的宽度不会“负出”本身,而负边距?带有负边距的填充内部元素的容器不能正常工作
为什么.column1
与auto
宽度'out-dent'本身具有负边距而不是.column2
?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
height: 150px;
width: 450px;
background-color: cyan;
padding: 15px;
}
.column1 {
height: auto;
width: auto;
background-color: red;
margin-left: -15px;
margin-right: -15px;
}
.column2 {
height: auto;
width: 100%;
background-color: green;
margin-left: -15px;
margin-right: -15px;
}
<div class='container'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>
答
这是不是真的很明显,但可以推断为width: auto
和width: 100%
之间的差异。
的
padding
给container
排除了任何保证金崩溃。对于
column1
作为width
是自动和display
是块,它填满所有可用空间它具有和当缘阴性都在此之上,宽度自调整施加。对于
column2
作为width
为100%,宽度将计算其包含块和缘阴性是在它施加的宽度 - 但是计算的width
现在不能改变。
参见正和负margin
下面s之间的比较。请注意,column2
的width
在所有情况下都是相同的值。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
height: 150px;
width: 450px;
background-color: cyan;
padding: 15px;
}
.column1 {
height: auto;
width: auto;
background-color: red;
margin-left: -15px;
margin-right: -15px;
}
.column2 {
height: auto;
width: 100%;
background-color: green;
margin-left: -15px;
margin-right: -15px;
}
.container.positive > div {
margin-left: 15px;
margin-right: 15px;
}
Negative margin
<div class='container'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>
Positive margin
<div class='container positive'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>
@RobertRocha正在读一些老问题...给予好评,如果答案帮助你,谢谢! – kukkuz