利用margin特性实现两端布局和等高布局

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世界》

利用margin特性实现两端布局和等高布局

猜你喜欢