css基礎——盒子模型基礎總結一

阿新 • • 發佈：2021-02-04

技術標籤：css html

一、盒子模型要點

要掌握盒子模型，以下幾個知識點必須要掌握：

1. 邊框
2. 內邊距
3. 外邊距
4. 背景
5. display屬性
6. 文件流定位
今天我們主要總結前四點。

1、邊框

邊框的三個方面

width,邊框的寬度
border-width:1px;
color,邊框的顏色
border-color:#00f;
style,邊框的樣式
border-style:solid;
（border-style:dotted點狀線、solid實線、double雙實線、dashed虛線; ）

邊框的綜合定義

1、分開單獨設定

例：

border-width:1px;   border-color:#00f;   border-style:solid;

2、使用綜合屬性

例：

border:1px #00f solid

注意：三個值沒有先後順序，中間用空格隔開

四邊獨立設定

1、單邊分開設定

左 left 右 right 上 top 下 bottom分別分開設定。
例：

border-left/*(right top bottom)*/-width:1px;
border-left-color:#00F;
border-left-style:solid;

2、使用綜合屬性

例：

border-left:1px #00F solid;

2、內邊距padding

解釋：邊框和內容之間的空白寬度
注意：這個部分只有空白，不能設定外觀樣式，顏色等，只能設定空白的寬度

1、padding的綜合設定

例：
padding:2px;(四個內邊距都為2px)

2、padding的單邊設定

padding-left
padding-right
padding-top
padding-bottom
例：
padding-left:2px;(左邊的邊框和內容之間的距離為2px)

3、padding的其他設定

padding：50px 100px

上下50 左右100

 padding：50px 100px 100px

上50 左右100 下100

 padding：50px 100px  50px 100px

順時針上50 右100 下50 左100

3、外邊距margin

解釋：標籤和它相鄰的標籤之間的空白寬度
外邊距的設定是相疊加的

1、margin的綜合設定

例：margin:10px;(和四邊臨近的標籤的距離都為10px)

2、margin的單邊設定

例：margin-left:10px;(標籤距左邊10px)

3、特別

標籤的margin代表內容與瀏覽器邊框的距離
兩個行內元素的margin-right和margin-left，採用“和”
兩個塊元素的marign-top和margin-bottom，採用“最大值”

4、背景

1、圖片顏色 background-color

定義標籤的背景顏色

background-color: gold;

2、背景圖片 background-image

定義背景圖片,可定義多背景

background-image: url(./logo.png);

3、是否重複 background-repeat

定義背景圖片的顯示方式
repeat，圖片重複
repeat-x，圖片橫向重複
repeat-y，圖片縱向重複
no-repeat，圖片不重複

background-repeat:no-repeat;

4、圖片位置 background-position

定義背景圖片的位置
直接使用兩個定位單詞，
例:

background-position: right top;

使用x、y座標，
例:

background-position: 20px 30px;

5、圖片大小background-size

定義背景圖片的大小

background-size: length  |  percentage  |  cover  |  contain;

cover:把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。（可能會裁剪圖片）
contain:把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。(可能會出現空白)

6、背景簡寫

background：顏色圖片是否重複位置

background：gold url（）no-repate center center

接下來給大家展示一個例項
相關程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.bg{background-color: gold;
			height:100px;
			background: gold url(./logo.png)no-repeat center center;
		}
			</style>
	</head>
	<body>
		<div class="bg">
			我愛我的祖國，我的祖國是中國。
		</div>
	</body>
</html>