html5學習筆記（六）（摘抄講義加部分理解）--布局

2024-04-27 15:14:05

字體：大中小

來源：轉載

供稿：網友

視頻地址：http://study.163.com/course/courseMain.htm?courseId=1003005

講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第 27 章 CSS 傳統(tǒng)布局[上]1.表格布局，基本被淘汰了，不建議使用。

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css傳統(tǒng)布局（上）</title>	<link rel="stylesheet" type="text/css" href="css/style12.css"></head><body>	<table border=0>			<tr>				<td colspan="2" class="header">header</td>			</tr>			<tr>				<td class="aside">aside</td>				<td class="section">section</td>			</tr>			<tr>				<td colspan="2" class="footer">footer</td>			</tr>	</table></body></html>@charset "utf-8";body{	margin: 0;}table{	width:960px;/**固定寬度，寬度不會隨窗口大小而改變*/	/*width:100%;*//**流體布局，寬度會隨窗口大小而改變，效果不好*/	margin: 0px auto;/*上下為0，左右auto則居中*/	/*border-spacing: 0px;*/	border-collapse: collapse;}.header{	height: 120px;	background-color: olive;}.aside{	width: 200px;	height: 500px;	background-color: purple;}.section{	width: 760px;	height: 500px;	background-color: maroon;}.footer{	height: 120px;	background-color: gray;}
2.浮動布局
浮動布局主要采用 float 和 clear 兩個屬性來構建。只適用于PC端。目前也大量使用。
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css傳統(tǒng)布局（上）-浮動布局</title>	<link rel="stylesheet" type="text/css" href="css/style13.css"></head><body>	<header>header</header>	<aside>aside</aside>	<section>section</section>	<footer>footer</footer></body></html>@charset "utf-8";body{	margin: 0 auto;	width: 960px;}header{	height: 120px;	background: olive;}aside{	width:200px;	height:500px;	background-color: purple;	float: left;}section {	width:760px;	height: 500px;	background-color: maroon;	/*float: left;*/	float: right;}footer{	height: 120px;	background-color: gray;	/*float: left;*//*如果使用這個設置，則必須設置width,不建議使用，直接用clear更好*/	clear: both;	}改成流體布局：
body{	margin: 0 auto;	width: auto;}aside{	width:20%;	height:500px;	background-color: purple;	float: left;}section {	width:80%;	height: 500px;	background-color: maroon;	/*float: left;*/	float: right;}3.定位布局
一．CSS2 提供了 position 屬性來實現(xiàn)元素的絕對定位和相對定位。屬性           說明static         默認值，無定位。absolute 絕對定位，使用 top、right、bottom、left進行位移。relative         相對定位，使用 top、right、bottom、left進行位移。fixed         以窗口參考定位，使用 top、right、bottom、left 進行位移。
脫離文檔流的意思，就是本身這個元素在文檔流是占位的。如果脫離了，就不占有文檔的位置，好像浮在了空中一般，有了層次感。
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css傳統(tǒng)布局（下）</title>	<link rel="stylesheet" type="text/css" href="css/style14.css"></head><body>	<header>header</header>	111	<aside>aside</aside></body></html>@charset "utf-8";body{	margin: 100px;	height: 800px;	border:1px solid red;}header{	width: 100px;	height: 100px;	background-color: silver;	/*脫離文檔流，以窗口文檔左上角 0,0 為起點*/	/*position: absolute; 	top:0;	left:0;	z-index: 1;*//**z-index: auto	默認層次;數(shù)字設置層次，數(shù)字越大，層次越高*/	/**以窗口參考定位，脫離文檔流，會隨著滾動條滾動而滾動，就像背景固定的那種效果，或者說是懸浮圖標，不管滾動體如何滾動，該元素位置不曾變化*/	/*position:fixed; 	top:100px;	left:0;*/	/**相對定位，不脫離文檔流，占位偏移*/	/*position: relative;	top:10px;	left:10px;*/}/*aside{	width: 100px;	height: 100px;	background-color: pink;	position: absolute;	top:20px;	left:20px;	z-index: 2;}*/示例中的絕對定位如圖顯示：
fixed定位如圖：
相對定位如圖：
如果代碼改為：
body{	margin: 100px;	height: 800px;	border:1px solid red;	/*在body父元素設置一個不需要top和left定位的相對定位，這個叫設置參考點*/	position: relative;}header{	width: 100px;	height: 100px;	background-color: silver;	position: absolute;	top:0px;	left: 0px;}效果如圖：，和上面的絕對定位效果不一樣，因為有了body父元素設置的相對定位。。
再改一下header:
header{	width: 100px;	height: 100px;	background-color: silver;	position: absolute;	top:100px;	left: 100px;}效果如圖：
布局代碼如下：
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css傳統(tǒng)布局（下）</title>	<link rel="stylesheet" type="text/css" href="css/style15.css"></head><body>	<header>header</header>	<aside>aside</aside>	<section>section</section>	<footer>footer</footer></body></html>@charset "utf-8";body{	width: 960px;	margin: 0 auto;	position: relative;}header{	width: 960px;	height: 120px;	background-color: olive;	/**做絕對定位的話必須制定長度和寬度*/	/*position: absolute;*/	top:0;	left:0;}aside{	width: 200px;	height: 500px;	background-color: purple;	/*position: absolute;*/	top: 120px;	left: 0;}section{	width: 760px;	height: 500px;	background-color: maroon;	position: absolute;	top:120px;	/*left:200px;*/	right: 0;}footer{	width: 960px;	height: 120px;	background-color: gray;	/*position: absolute;*/	left: 0;	top: 620px;}其中，注掉的position的絕對定位可以去掉，但是section的絕對定位不能去掉！
示例代碼：
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css傳統(tǒng)布局（下）</title>	<link rel="stylesheet" type="text/css" href="css/style16.css"></head><body>	<header>header</header>	<aside>aside</aside>	<section>section		<textarea></textarea>	</section>	<footer>footer</footer></body></html>@charset "utf-8";body{	width: 960px;	margin: 0 auto;}header{	height: 120px;	background-color: olive;}aside{	/*width: 170px;	height: 470px;*/	width: 200px;	height: 500px;	border: 5px solid green;	background-color: purple;	float:left;	padding: 10px;	/*CSS3 提供了一個屬性 box-sizing，這個屬性可以定義元素盒子的解析方式，從而可以選擇避免掉布局元素盒子增加內邊距和邊框的長度增減問題。*/	box-sizing:border-box;/**border 和 padding 設置后不用于元素的總長度。css3提供的*/}section{	width: 760px;	height: 500px;	background-color: maroon;	float:right;}footer{	width: 960px;	height: 120px;	background-color: gray;	clear:both;}/**CSS3 提供了一個 resize 屬性，來更改元素尺寸大小。*/textarea{	resize:none;/**設置完以后，section里的textarea從之前的可拖動變?yōu)椴豢赏蟿?/}
如果不設置box-sizing:border-box;則aside里的width和height必須在原來的基礎上去掉border和padding值。
如果讓header塊可拉伸，則需要配置css3提供的resize屬性（來更改元素尺寸大?。⑴浜鲜褂胦verflow: auto：
header{	height: 120px;	background-color: olive;	resize: both; 	overflow: auto;}屬性說明none 默認值，不允許用戶調整元素大小。both 用戶可以調節(jié)元素的寬度和高度。horizontal 用戶可以調節(jié)元素的寬度。vertical 用戶可以調節(jié)元素的高度。一般普通元素，默認值是不允許的。但如果是表單類的 textarea 元素，默認是允許的。而普通元素需要設置 overflow:auto，配合 resize 才會出現(xiàn)可拖拽的圖形。
--------------------------------------------------
第 28 章 CSS3 多列布局
@charset "utf-8";/**自適應的三列布局*/div{	/*columns:auto 3;*/   /*columns:150px 3;*//**當瀏覽器縮放到小于 150 大小時，將變成 1 列顯示。而如果是 auto，則一直保持四列。*/   /**如果沒有設置列數(shù)只設置每列多少寬度，則會自動設置寬度*/   column-width: 100px;/*自動分段*/   column-count: 3; /*列的個數(shù)*/   column-gap: 50px; /**列的間距*/   column-rule: 2px dashed green;/**分割線*/}h1{	text-align: center;	column-span:all;}
<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>css3多列布局</title>	<link rel="stylesheet" type="text/css" href="css/style17.css"></head><body>	<div>	<h1>大標題大標題大標題大標題大標題大標題大標題大標題</h1>		<h3>藍牙1</h3>		<p>藍牙在1999年因無線連接設備而被提出，目前的藍牙5是其第十個版本，同時也向卓越技術更近了一步。它比藍牙4.2快2倍，長度范圍大4倍，并且擁有很酷的新連接功能。</p>		<h3>藍牙2</h3>		<p>藍牙5能夠以高達2Mbps的速度進行數(shù)據(jù)傳輸，傳輸距離長達120米，藍牙標準制定組織稱：如果連接設備之間沒有障礙物，那么傳輸距離會更長。藍牙5能夠以高達2Mbps的速度進行數(shù)據(jù)傳輸，傳輸距離長達120米，藍牙標準制定組織稱：如果連接設備之間沒有障礙物，那么傳輸距離會更長。</p>		<h3>藍牙3</h3>		<p>對于經常將電腦或移動設備與無線揚聲器等外圍設備配對的用戶來說，藍牙5的應用無疑是一個巨大的好消息，連接丟失的情況大幅下降，使用無線設備的體驗大幅提升。</p>		<h3>藍牙4</h3>		<p>藍牙5將允一個設備向多個設備發(fā)送數(shù)據(jù)，這對于建設智能家庭來說大有益處。例如：如果監(jiān)控系統(tǒng)檢測到小偷，它可以同時激活安全燈和報警系統(tǒng)。</p>		<h3>藍牙5</h3>		<p>藍牙國際聯(lián)盟去年12月表示：藍牙5將在2-6個月內應用到設備上。首批設備將是搭載高通驍龍835處理器的智能手機和平板電腦，其芯片組中應用了藍牙5。</p>	</div></body></html>
-------------------------------------