day5-佈局與定位：盒子模型

新人小程式猿發表於2020-10-21
模型

一個頁面往往包括導航條（navbar）、選單（menu）、內容（content），頁尾（footer）、頁首（header）、主要內容（main）、邊條（sidebar）等等的部分，如下圖所示：（一般用一個container把其他元素都包含起來，main包括了menu、content、sidebar）

在這裡插入圖片描述
這樣就涉及到每一個塊的大小、邊框、與其他元素的距離等和塊的定位等的問題。

一、定位機制

多個分割槽之間的位置放置分為三個：文件流、浮動定位、層定位：
在這裡插入圖片描述

二、盒子模型

一個塊可以看作一個盒子，頁面每一個元素都可以看作一個盒子，一個盒子有內邊距、外邊距等：
在這裡插入圖片描述

盒子模型首先有**內容（content）**，內容佔有一定的空間，用height來定義它
的高度，用width定義它的寬度

在內容的外圈可以設定一定的空白距離，在內容與邊框之間這段空白距離就是內
邊距（padding），也就是邊框到內容的這段距離就是padding

再外面一層是**邊框（border）**，利用border來設定一個邊框

邊框之外還可以設定一個**外邊距（margin）**，當頁面上有多個盒子的時候可以
通過兩個盒子的外邊距來設定兩個盒子之間的距離，也就是邊框（border）之外的
和其他元素之間的一個距離就是外邊距（margin）

在這裡插入圖片描述
一個盒子的實現程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/css樣式：列表、表格、背景、超連結.css">
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			border:1px solid;
			padding:20px;
			margin: 10px;
			overflow:scroll;
		}

	</style>
</head>
<body>
	<div id="box">
		內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
	</div>
</body>
</html>

在這裡插入圖片描述

當文字內容大小超過了設定的height的大小的時候，可以使用overflow屬性進行
設定：（如下圖）

在這裡插入圖片描述

文字與邊框（邊框是預設黑色且是可以顯示出來的）之間的空白的部分可以使
用padding-left等的設定，邊框到瀏覽器的邊緣部分的空白部分就是margin
可以使用margin-left等的屬性實現：
當只用padding、margin標籤對上右下左方向都進行距離設定時，注意是從上
出發**順時針**的方向的

在這裡插入圖片描述

在這裡插入圖片描述

border部分也有部分子屬性進行設定：

在這裡插入圖片描述
在這裡插入圖片描述

我們會發現其實在直接用div標籤建立一個塊時，不用設定像上面所提到的那
些padding、margin、border的大小，其實這種情況下，瀏覽器是對此進行了
預設的設定，這個時候如果自己對於這些border等的標籤要進行定義的話，就
要先把瀏覽器給予的預設的值進行**全域性樣式上**的清零：
注意：但取值為0px的時候可以把單位去掉，其餘不等於0的情況下單位不能省略

*{
			margin: 0;
			padding: 0;
		}

以margin為例：
在這裡插入圖片描述

實際上使用div構造盒子的時候，兩個盒子是上下排列的，每個盒子的都有一個
margin的屬性，這個時候要注意當這兩個div上下排列的時候，外邊距會進行合
並，合併後的margin的距離就是兩個盒子中margin最大的那個的值

在這裡插入圖片描述

但如果設定了水平排列的時候就不會有合併

當想把盒子中的圖片、文字、div等的進行水平居中時，就可以使用到：
text-align:ceter;
margin:0 auto;     0的意思是設定div上下距離外面邊框的距離為0，auto就是
表示瀏覽器自動計算分配div左右兩邊的距離，使得div處於中間

在這裡插入圖片描述

當有多個img進行水平排放的時候（使用多個img的時候是預設水平排列的，div是
預設豎直排列），圖片與圖片之間會有一個空白距離

在這裡插入圖片描述
在這裡插入圖片描述

在這裡插入圖片描述

相關文章