CSS-8.1-CSS盒模型
盒模型
盒模型（Box Model）表示了頁面中的一個元素在頁面中佔有的位置，主要在網頁的設計和佈局時使用
CSS盒模型
1.盒模型概述
2.margin：外邊距
3.border：邊框
4.padding：內邊距
一：盒模型概述
- CSS盒模型主要用來設計和佈局
- HTML文檔中每個元素都可以看作一個盒子
- 盒模型規定了這個盒子中
- content：元素內容
- padding：內邊距
- border：邊框
- margin：外邊距
CSS中設置box-sizing屬性來規定使用哪種模型
1.content-box：採用標準模式解析計算，默認模式
2.border-box：採用怪異模式解析計算
1、標準盒模型
- 標準盒模型也稱爲W3C盒模型
- 大部分瀏覽器默認採用標準盒模型
- 一個元素所佔據的總寬度/高度
- widtn
- padding（左右/上下）
- border（左右/上下）
- margin（左右/上下）
![在這裏插入圖片描述]()
2、IE盒模型
- IE盒模型也稱爲怪異盒模型
- IE6之前的瀏覽器默認採用怪異盒模型
- 一個元素所佔寬度
- width（width已經包含了padding和border）
- margin（左右）
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒模型</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 5px solid #0f0;
padding: 20px;
margin: 10px;
line-height: 200px;
text-align: center;
}
.div1{
/* 設置爲IE盒模型 */
box-sizing: border-box;
background-color: #f00;
}
/* 默認爲標準盒模型 */
.div2{
background-color: #00f;
}
</style>
</head>
<body>
<div class="div1">IE盒模型</div>
<div class="div2">標準盒模型</div>
</body>
</html>
效果動態圖
結論
1.標準盒模型設置的寬度只包含內容區域
2.IE盒模型設置的寬度包含了內容區域+padding+border
二：margin：外邊距
margin：外邊距
1.外邊距的屬性
2.多個盒子之間的外邊距影響
1、外邊距的屬性
- 圍繞在元素周圍的空白區域就是外邊距，外邊距是透明的，依次不會遮擋其後面的元素
- 屬性
- margin-top：上
- 位的數值（像素，釐米等）
- 百分比
- auto
- margin-right：右
- 位的數值（像素，釐米等）
- 百分比
- auto
- margin-bottom：下
- 位的數值（像素，釐米等）
- 百分比
- auto
- margin-left：左
- 位的數值（像素，釐米等）
- 百分比
- auto
- margin-top：上
簡寫margin屬性的四種方法
1.寫一個數值：上、下、左、右四個方向數值相等
2.寫兩個數值：第一個數等於上下外邊距，第二個數等於左右外邊距
3.寫三個數值：上、右、下邊距，左邊默認等於右邊
4.寫四個數值：上、右、下、左4個方向的邊距
注意
當設置 margin:0 auto 時，代表塊級盒子在父容器中水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin外邊距</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: #0f0;
text-align: center;
/* 設置父盒子的外邊距
上,右,下(左等於右)*/
margin: 100px 50px 150px;
}
.div2{
width: 100px;
height: 100px;
background-color: #00f;
text-align: center;
color: white;
/* 設置子盒子在父盒子中水平居中 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="div1">
父盒子
<div class="div2">
子盒子
</div>
</div>
</body>
</html>
效果動態圖
2、多個盒子之間的外邊距影響
(1)行內盒子水平排放的外邊距
- 水平排放的盒子，水平間距是 margin 的累加
(2)塊級盒子垂直排放的外邊距
- 垂直排放的盒子，垂直間距是合併的（取最大值）
(3)父、子盒子的垂直外邊距合併
- 在給子盒子添加上外邊距後，父、子盒子同時下移
- 說明父、子盒子的外邊距合併了
- 爲子盒子添加上外邊距也就是爲父盒子添加上了外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
height: 200px;
width: 200px;
background-color: #0f0;
/* 水平居中 */
margin: 0 auto;
overflow: hidden;
}
.div2{
height: 100px;
width: 100px;
background-color: #00f;
margin: 30px 0px 0px 0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
子盒子
</div>
</div>
</body>
</html>
清除前
清除後
三種解決爲子盒子添加上外邊距後，父盒子也隨之移動的方法
1.父盒子添加 overflow:hidden
2.父盒子添加 padding
3.父盒子添加 border
三：border：邊框
- 元素的邊框是圍繞在元素內邊距外的一條或多條線
- 通過CSS可以規定元素邊框的樣式、寬度和顏色
border：邊框
1.border-style
2.border-width
3.border-color
4.邊框的添加方式
1、border-style
- 用於爲元素設置邊框的樣式
- 可以單獨設置一個邊框，也可以設置所有邊框
單獨設置一個邊框
1.border-top-style：僅設置上邊框
2.border-right-style：僅設置右邊框
3.border-bottom-style：僅設置下邊框
4.border-left-style：僅設置左邊框
border-style設置所有邊框
1.none：無邊框
2.hidden：隱藏，與none相同
3.dotted：設置爲點狀邊框
4.dashed：設置爲虛線邊框
5.solid：設置爲實線邊框
6.double：設置爲雙線邊框，雙線的寬度等於border-width的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框樣式</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/* 點狀邊框,虛線邊框,實線邊框,雙線邊框 */
border-style:dotted dashed solid double;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖
border-style設置所有邊框時，可以寫1~4個值
1.寫一個值時：設置四個邊框爲統一樣式
2.寫兩個值時：第一個值設置上下邊框，第二個值設置左右邊框
3.寫三個值時：第一個值設置上邊框，第二個值設置左右邊框，第三個值設置下邊框
4.寫四個值時：依次設置上、右、下、左四個邊框
2、border-width
- 用於爲元素的邊框設置寬度
- 可以單獨設置一個邊框寬度，也可以設置所有邊框的寬度
單獨設置一個邊框寬度
1.border-top-width：僅設置上邊框寬度
2.border-right-width：僅設置右邊框寬度
3.border-bottom-width：僅設置下邊框寬度
4.border-left-width：僅設置左邊框寬度
border-width置所有邊框寬度
1.thin：設置爲細邊框
2.medium：默認，設置爲中等邊框
3.thick：設置爲粗邊框
4.length：使用帶單位的數值或自定義邊框寬度，不可設置爲負值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框寬度</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border-style: dotted dashed solid double;
/* 細邊框,中等邊框,粗邊框,15px邊框 */
border-width:thin medium thick 15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖
border-width設置所有邊框時，可以寫1~4個值
1.寫一個值時：設置四個邊框爲統一寬度
2.寫兩個值時：第一個值設置上下邊框寬度，第二個值設置左右邊框寬度
3.寫三個值時：第一個值設置上邊框寬度，第二個值設置左右邊框寬度，第三個值設置下邊框寬度
4.寫四個值時：依次設置上、右、下、左四個邊框寬度
3、border-color
- 設置四條邊框的顏色
- 可以單獨設置一個邊框顏色，也可以設置所有邊框的顏色
單獨設置一個邊框顏色
1.border-top-color：僅設置上邊框顏色
2.border-right-color：僅設置右邊框顏色
3.border-bottom-color：僅設置下邊框顏色
4.border-left-color：僅設置左邊框顏色
border-color設置所有邊框的顏色
1.red
2.rgb(255,0,0)
3.#f00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邊框顏色</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border-style: dotted dashed solid double;
border-color: red rgb(0,255,0) #00f;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖
border-color設置所有邊框時，可以寫1~4個值
1.寫一個值時：設置四個邊框爲統一顏色
2.寫兩個值時：第一個值設置上下邊框寬度，第二個值設置左右邊框顏色
3.寫三個值時：第一個值設置上邊框寬度，第二個值設置左右邊框寬度，第三個值設置下邊框顏色
4.寫四個值時：依次設置上、右、下、左四個邊框顏色
4、邊框的添加方式
邊框的添加方式
1.三個屬性分別設置
2.使用 border 屬性
(1)三個屬性分別設置
- border-style
- border-width
- border-color
/* 基本語法 */
<style type="text/css">
/* 三個屬性分別設置 */
div{
width: 200px;
height: 200px;
border-style: solid;
border-width: 5px;
border-color: #f00;
}
</style>
(2)使用 border 屬性
- border:style width color
- 三個屬性沒有前後順序
/* 基本語法 */
<style type="text/css">
/* 使用 border 屬性 */
div{
width: 200px;
height: 200px;
border: 5px dotted #00f;
}
</style>
四：padding：內邊距
- 內邊距規定元素邊框與元素內容之間的區域，也稱爲填充
- 內邊距會使盒模型的整個可視區域變大，使用時需注意盒模型實際顯示大小
- 可以單獨設置一個內邊距，也可以設置四個內邊距
單獨設置一個內邊距
1.padding-top：僅設置上內邊距
2.padding-right：僅設置右內邊距
3.padding-bottom：僅設置下內邊距
4.padding-left：僅設置左內邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding 內邊距</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
/* 添加padding後,實際所佔區域被撐大 */
.div1{
background-color: #0f0;
padding:20px;
}
.div2{
background-color: #00f;
color: white;
}
</style>
</head>
<body>
<div class="div1">設置 padding</div>
<div class="div2">未設 padding</div>
</body>
</html>
效果圖
padding 設置內容與邊框之間的填充區域，可以寫1~4個值
1.padding:25px; 四個邊都是25px
2.padding:25px 50px; 上下25px,左右50px
3.padding:25px 50px 30px; 上25px,左右50px,下30px
4.padding:25px 50px 30px 60px; 上25px,右50px,下30px，左60px