閱讀681 返回首頁    go 阿裏雲 go 技術社區[雲棲]

精通css（5）-布局

css布局被認為是一個很麻煩的東西，可能它本身並不複雜，隻是瀏覽器的不一致讓人覺得很頭疼。對於初學者來說或許框架能更快的得到想要的結果，但這種傻逼的使用方式蒙蔽了布局的內部原理，這是非常可怕的！

所有css布局技術的根本都是3個基本概念：定位、浮動和外邊距操控（喵了個咪的，怎麼又是3個）。下麵開始寫代碼（一定要自己寫一遍）。

1.浮動布局

貌似浮動布局是最簡單也是最可靠的，先來一個簡單的兩欄布局，頁麵居中：

代碼方案：

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*讓容器水平居中,但IE6不支持margin：auto屬性，解決方法是利用text-align:center*/
body{
	text-align: center;/*IE6君認為該屬性讓所有的東西都居中*/
}
.wrapper{
	width: 960px;
	margin: 0 auto;
	text-align: left;/*調整text-align為左對齊*/
}
.header,.footer{
	height: 60px;
	background-color: #9a2;
}
.leftbar{
	width: 200px;
	float: left;
	background-color: #00f;
}
.content{
	width: 740px;/*空出20px作為隔離帶*/
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
</style>
</body>
</html>


 然後再來個三欄布局，隻要稍微改一下代碼：

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<div >
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
			</div>
			<div >
				<p>right</p>
				<p>right</p>
			</div>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*讓容器水平居中,但IE6不支持margin：auto屬性，解決方法是利用text-align:center*/
body{
	text-align: center;/*IE6君認為該屬性讓所有的東西都居中*/
}
.wrapper{
	width: 960px;
	margin: 0 auto;
	text-align: left;/*調整text-align為左對齊*/
}
.header,.footer{
	height: 60px;
	background-color: #9a2;
}
.leftbar{
	width: 200px;
	float: left;
	background-color: #00f;
}
.content{
	width: 740px;/*空出20px作為隔離帶*/
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
/*在content內部再分浮動，形成3欄布局*/
.main-content{
	width: 600px;
	float: left;
	background-color: #7621de;
}
.rightbar{
	width: 120px;
	float: right;
	background-color: #b23aa2;
}
</style>
</body>
</html>
效果圖：


浮動布局的方法有很多，用起來也特別方便。雖然效果圖是挫了點，但不要在意這些細節，這不是重點。。。

2.固定寬度、流式和彈性布局

2.1固定寬度布局

固定寬度布局就是以像素為單位的布局，上麵的兩個例子都是固定寬度布局。這種布局的好處是知道每個元素的精確寬度，非常方便。壞處就是在不同分辨率的顯示器下會出現顯示溢出或者大量空白。隨著屏幕尺寸的多樣化，外加移動web的需求，固定寬度布局常常被認為是糟糕的權益之計。

2.2流式布局

流式布局的靈活性更大，因為它采用的是百分數布局。這樣隨著不同窗口大小可以進行伸縮。一般還會添加以像素或em為單位的min-width來防止布局變得太窄。（有關min-width和min-height與瀏覽器兼容性問題，請戳這裏：點擊打開鏈接）。

在這裏再總結一下px和em的關係。px是按像素計算的絕對單位。em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸(任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px)。

那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明 Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說隻需要將你的原來的px數值除以10，然後換上em作為單位就行了。

em有如下特點：

  • em的值並不是固定的;
  • em會繼承父級元素的字體大小。

所以我們在寫CSS的時候，需要注意幾點：

  • body選擇器中聲明Font-size=62.5%;
  • 將你的原來的px數值除以10，然後換上em作為單位;
  • 重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那麼在聲明p的字體大小時就隻能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小，而是稍大一點。這個問 題 Jorux已經解決，隻需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對於浮點的取值精確度有限。

2.3彈性布局

雖然流式布局比固定布局好，但是當分辨率過大時行會過長，窗口太窄時行會很短。對於這個問題，彈性布局可能是一種解決方案。

彈性布局相對於字號來設置元素的寬度，而不是瀏覽器寬度。以em為單位設置寬度，可以確保在字號增加時整個布局隨之擴大。

<html>
<body>
<div >
	<div >head</div>
	<div >
		<div >
			<p>left</p>
			<p>left</p>
		</div>
		<div >
			<div >
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
				<p>content</p>
			</div>
			<div >
				<p>right</p>
				<p>a a a a</p>
			</div>
		</div>
	</div>
	<div ></div>
	<div >footer</div>
</div>
<style type="text/css">
/*讓容器水平居中,但IE6不支持margin：auto屬性，解決方法是利用text-align:center*/
body{
	text-align: center;/*IE6君認為該屬性讓所有的東西都居中*/
}
.wrapper{
	font-size: 62.5%;/*調整字號為默認16px的62.5%，使10px=1em，方便計算*/
	max-width: 95%;
	width: 96em;
	margin: 0 auto;
	text-align: left;/*調整text-align為左對齊*/
}
.header,.footer{
	height: 6em;
	background-color: #9a2;
}
.leftbar{
	width: 20%;
	float: left;
	background-color: #00f;
}
.content{
	width: 78%; 
	float: right;
	background-color: #0e8;
}
.clear{clear:both;}
/*在content內部再分浮動，形成3欄布局*/
.main-content{
	width: 80%;
	float: left;
	background-color: #7621de;
}
.rightbar{
	width: 18%;
	float: right;
	background-color: #b23aa2;
}
</style>
</body>
</html>

上麵隻是以em為容器單位，但內部div使用的仍然是百分比。這樣內部寬度仍然是相對字號的，可以很方便的修改布局的總尺寸，不必修改每個寬度的尺寸。



最後更新：2017-04-03 14:54:04

  上一篇：go java 把64位long，轉成2個32位的Int，再回轉成long
  下一篇：go Android BadgeView使用介紹 （數字提醒提示）