佈局的常用解決方案

JustGoForIt發表於2019-03-27

表格佈局

實現方式一：用table標籤形式實現table佈局

	<style type="text/css">
		table{
			width: 800px;
			height: 200px;
			border-collapse: collapse;/*合併表格邊框*/
		}
		.red{
			background: red;
		}
		.blue{
			background: blue;
		}
	</style>
	
    <h1>我是用table標籤形式實現的table佈局</h1>
	<table>
		<tr>
			<td class="red"><div>我是table的第一列</div></td>
			<td class="blue">我是table的第二列</td>
			<td class="red">我是table的第三列</td>
		</tr>
	</table>
複製程式碼
優點：
  • 預設情況下會平均分配列寬。
  • 設定其中一列的寬度，其他列寬度會自動平均分配。可以方便的實現一側固定，一側自適應佈局。
  • 每個表格中的內容會自動垂直居中。

實現方式二：用css實現table佈局

    <style type="text/css">
   		.table{
			display: table;
			width: 800px;
			height: 200px;
			margin-top: 10px;
		}
		.table-row{
			display: table-row;
		}
		.table-cell{
			display: table-cell;
		} 
	</style>
	
    <h1>我是css式實現的table佈局</h1>
	<div class="table">
		<div class="table-row">
			<div class="red table-cell">我是table的第一列</div>
			<div class="blue table-cell">我是table的第二列</div>
		</div>
	</div>
複製程式碼
優點：
  • 預設情況下會平均分配列寬。
  • 設定其中一列的寬度，其他列寬度會自動平均分配。可以方便的實現一側固定，一側自適應佈局。
缺點：
  • 每個表格中的內容不會自動垂直居中了。

點我檢視效果

flex佈局

flex container

display:flex;

flex-direction 主軸的方向

  1. row; // 預設值 表示主軸方向 左——>右
  2. column; // 表示主軸方向 上——>下
  3. row-reverse; // 表示主軸方向 右——>左
  4. column-reverse; // 表示主軸方向 下——>上

justify-content 主軸的對齊方式

  1. flex-start // 起點對齊
  2. flex-end // 終點對齊
  3. center // 居中對齊
  4. space-betten // 平均分佈
  5. space-around // 左右兩邊等距分佈

align-items 交叉軸的對齊方式

  1. flex-start // 起點對齊
  2. flex-end // 終點對齊
  3. center // 居中對齊
  4. stretch // 在沒有給flex item設定高度的時候，flex imte會在交叉軸上佔滿，如果給flex item設定的高度，那麼這個屬性不生效。
  5. baceline // 按照flex item中的文字基線對齊。

flex-wrap 換行

換行的機制：如果總元素的寬度和高度大於設定的總寬度和總高度，又沒有設定換行的方式，flex會讓每個元素平均分配總寬度和總高度。

  1. no-wrap //預設值 不換行
  2. wrap //換行
  • 換行的元素會在交叉軸上居中,所以就可能出現：和換行之前的行之間出現間距的問題：
  • 解決方案：通過設定寬或者高解決。

row-reverse會靠右對齊，而column-reverse不會靠下對齊的原因

因為整個容器的高度和包含內容塊的高度一致，而橫向上總寬度是大於包含塊的寬度的。

flex item

優點

  • 現代的浮動解決方案，實現起來比較容易簡單

缺點

  • 相容不好

點我檢視flex佈局例項

inline-block佈局

	<style type="text/css">
   	.container{
   		width: 800px;
   		height: 200px;
   		background: yellow;
   		font-size: 0;
   	}
   	.left{
   		width: 200px;
   		height: 200px;
   		background: red;
   		display: inline-block;
   		font-size: 20px;
   	}
   	.right{
   		width: 600px;
   		height: 200px;
   		background: blue;
   		display: inline-block;
   		font-size: 20px;
   	}
   </style>
   <div class="container">
   	<div class="left">
   		我是左邊
   	</div>
   	<div class="right">
   		我是右邊
   	</div>
   </div>
複製程式碼
缺點
  1. 塊與塊之間會出現間隙
  • 原因: 因為文字和文字之間會有間隙
  • 解決方案: 將父元素的font-size設定為0
  1. 不適合寬度自適應的佈局
優點

響應式佈局

主要方法：

自適應空間[rem/viewport]、隱藏[media query]、折行[media query]。

  • viewport解決方案
<!--不會等比縮放-->
<meta name="viewport" content="width=device-width" initial-sacle=1.0>
<!--等比縮放：為width設定固定的值-->
<meta name="viewport" content="width=320" initial-sacle=1.0>

複製程式碼
  • media query解決方案
  1. 用media query實現隱藏
@media (max-width:640px){
	.left{
		display: none
	}
}
複製程式碼
  1. 用media query實現折行
@media (max-width:640px){
    .intro{
		display: block;
		margin: 7px auto;
	}
}
複製程式碼
  • rem解決方案

以html的font-size為基準的畫素。html的font-size預設是16px，為了好計算可以設定為10px。


@media(max-width: 375px){
	html{
		font-size: 24px;
	}
}
@media (max-width: 320px){
	html{
		font-size: 20px;
	}
}
.intro1{
	display: inline-block;
	width: 18rem;
	height: 18rem;
	line-height: 18rem;
	text-align: center;
	border-radius: 9rem;
	border: .1rem solid red;
	margin: .7rem;
}

複製程式碼
rem的缺點：rem的單位不一定會非常精確。

點我檢視程式碼演示

相關文章