margin在元素的宽高有固定值的时候,不能改变该元素的尺寸,但如果该元素处于“充分利用可用空间”的状态下,就可以改变该元素的尺寸
“充分利用可用空间”
<div class="father">
<div class="son"></div>
</div>
.father{ width:300px;}
.son {width:0-20px;}
这时候son元素的宽度就是340px;
margin 改变元素尺寸的特性实现两端布局的效果:
<div class="container">
<ul >
<li></li>
<li></li>
<li></li>
</ul>
</div>
.container{
width:340px;
overflow: hidden;
}
ul{
padding: 0;
margin-right:-20px;
}
ul>li{
width:100px;
float:left;
margin-right:20px;
margin-bottom: 5px;
height:100px;
background-color:red;
list-style-type:none;
}
如果ul去掉margin-right:-20px 这个属性,则会
margin实现等高布局:
<div class="container">
<div class="left" id="colLeft">
<h5>左边内容</h5>
</div>
<div class="right" id="colRight">
<h5>右边内容</h5>
</div>
</div>
<div class="container">
<p class="half">
<input type="button" id="leftBtn" value="添加左边内容" />
</p>
<p class="half"><input type="button" id="rightBtn" value="添加右边内容" /></p>
</div>
.container {
margin: auto;
max-width: 600px;
overflow: hidden;
text-align: center;
}
.left,
.right {
margin-bottom: -9999px;
padding-bottom: 9999px;
width: 50%;
float: left;
color: #fff;
}
.left {
background-color: #34538b;
}
.right {
background-color: #cd0000;
}
.half{
width: 50%;
float: left;
}
var colLeft = document.getElementById('colLeft'),
colRight = document.getElementById('colRight');
var leftBtn = document.getElementById('leftBtn'),
rightBtn = document.getElementById('rightBtn');
// 序号
var indexLeft = 1, indexRight = 0;
if (colLeft && colRight && leftBtn && rightBtn) {
leftBtn.onclick = function () {
indexLeft = indexLeft + 1;
colLeft.insertAdjacentHTML('beforeend', '<p>观点' + indexLeft + '</p>');
};
rightBtn.onclick = function () {
indexRight = indexRight + 1;
colRight.insertAdjacentHTML('beforeend', '<p>观点' + indexRight + '</p>');
};
}
实现等高的主要属性:
overflow:hidden;(container)
margin-bottom:-9999px;
padding-bottom:9999px;
实现等高的主要原因:
margin-bottom:-9999px意味着后面的元素和上面元素的空间距离变成-9999px,这时候通过padding-bottom:9999px增加元素高度,从而使得对布局层没有影响,但视觉层多了9999px高度的可使用背景色。
优点:使用margin负值实现等高布局的优势在于兼容性足够,IE6浏览器也支持,且支持任意个分栏等高布局。
padding-bottom:9999px也可以使用border-bottom:9999px solid transparent代替,不过IE77以上的浏览器才兼容。
--参考 张鑫旭《css世界》