深刻了解CSS中盒子模型
CSS中盒子模型介紹
- 什麼是盒子？
- 盒子是用來存儲物品，咱們能夠將盒子理解爲酒盒，酒盒有什麼組成的呢？ 有酒能夠喝、有填充物保護酒防止酒被摔壞、紙盒子。
- 咱們怎麼理解
CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 CSS中盒子的主要屬性有5種如：width寬度、height高度、padding內邊距、border邊框、margin外邊距。
CSS中盒子模型實踐
CSS中盒子模型實踐，給你們看看咱們CSS中的盒子長什麼樣。-
代碼塊css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
/*內邊距就是盒子裏面的內容到邊框的距離*/
padding: 30px;
/*這個就是指盒子的外邊框*/
border: 1px solid red;
/*這個就是指盒子的外邊距，盒子與盒子之間的距離*/
margin: 20px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖html
- 如何計算一個盒子的總寬度和總高度，筆者那寬度舉例：
一個盒子的總寬度=盒子內容寬度+左右2邊內邊距+左右2邊邊框線。
-
注意：一個盒子的高度通常狀況下不設置高度，由於一個盒子的高度它應該是由其內容來決定的。ui
padding內邊距介紹
padding內邊距的意思就是指的盒子中間的內容與邊框的這段距離。padding內邊距分爲4個方向，因此咱們可以設置或描述這4個方向的內邊距。padding內邊距屬性值說明表：
| 屬性值 | 描述 |
|---|---|
| padding-top | 設置向上的內邊距的距離。 |
| padding-bottom | 設置向下的內邊的距距離。 |
| padding-left | 設置向左的內邊距的距離。 |
| padding-right | 設置向右的內邊距的距離。 |
| padding | 設置上下左右內邊距的距離，是上面的屬性值縮寫。 |
padding內邊距實踐
- 咱們將
div標籤設置內邊距，實踐內容如：將div標籤上邊內邊距設置爲20px、下邊內邊距設置爲30px、左邊邊距設置爲40px、右邊內邊距設置爲50px。 -
代碼塊spa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
border: 1px solid red;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 50px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖code
padding內邊距縮寫實踐
- 縮寫是有方向的能夠同時表示四個方向，可是這個
padding屬性的方向是有順序的，順序規則如：上、右、下、左。 padding屬性值有4個，接下來咱們就一一試試看看會有什麼效果呢。- 咱們給
padding屬性設置1個值實踐。 -
代碼塊htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖blog
-
注意：假設咱們給
padding屬性值設置了1個值爲：padding: 20px;表示上、右、下、左、方向的內邊距都爲20px像素。文檔 - 咱們給
padding屬性設置2個值實踐。 -
代碼塊get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
border: 1px solid red;
padding: 20px 30px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖it
-
注意：假設咱們給
padding屬性值設置了2個值如：padding: 20px 30px;表示內邊距的（上、下）爲20px像素、（左、右）爲30px像素。 - 咱們給
padding屬性設置3個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
border: 1px solid red;
padding: 20px 30px 40px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
-
注意：假設咱們給
padding屬性值設置了3個值如：padding: 20px 30px 40px;表示內邊距的上爲20px像素、（左、右）爲30px像素、下爲40px像素。 - 咱們給
padding屬性設置4個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
div {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
border: 1px solid red;
padding: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰，微笑是最初的信仰，微笑是最初的信仰。
</div>
</body>
</html>
-
結果圖
-
注意：假設咱們給
padding屬性值設置了3個值如padding: 20px 30px 40px 50px;表示內邊距的上爲20px像素、右爲30px像素、下爲40px像素、左爲50px像素。
margin外邊距介紹
margin外邊距的意思就是指的盒子與盒子之間的距離。margin外邊距分爲4個方向，因此咱們可以設置或描述這4個方向的外邊距。margin外邊距屬性值說明表：
| 屬性值 | 描述 |
|---|---|
| margin-top | 設置向上的外邊距的距離。 |
| margin-bottom | 設置向下的外邊的距距離。 |
| margin-left | 設置向左的外邊距的距離。 |
| margin-right | 設置向右的外邊距的距離。 |
| margin | 設置上下左右外邊距的距離，是上面的屬性值縮寫。 |
| auto | 自動。 |
margin上下外邊距實踐
- 咱們將
class屬性值爲.top元素設置上外邊距爲20px像素而且將class屬性值爲.bottom設置下外邊距爲20px像素。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.bottom{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
.top{
width: 100px;
height: 100px;
background-color: slateblue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="bottom"></div>
<div class="top"></div>
</body>
</html>
-
calss屬性值爲.bottom結果圖
-
calss屬性值爲.top結果圖
-
注意：兩張圖有什麼區別呢，事實證實外邊距豎直方向的
margin的屬性值不會疊加，它會取最大的屬性值，你們要明白哦。
margin左右外邊距實踐
- 咱們將
class屬性值爲.right元素設置右外邊距爲20px像素而且將class屬性值爲.left設置左外邊距爲20px像素。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.left{
background-color: slateblue;
margin-left: 20px;
}
.right{
background-color: red;
margin-right: 20px;
}
</style>
</head>
<body>
<span class="right">right</span>
<span class="left">left</span>
</body>
</html>
-
calss屬性值爲.right結果圖
-
calss屬性值爲.left結果圖
-
注意：兩張圖有什麼區別呢，事實證實外邊距水平線方向
margin的屬性值會疊加。你們要明白哦。 若想讓豎直方向的
margin屬性值疊加外邊距的距離咱也是有辦法如：將要設置margin屬性的元素進行浮動便可，元素浮動以後它的margin屬性值就會疊加，如有讀者朋友不熟悉浮動的能夠看看筆者之間發佈的CSS中若是實現元素浮動和清除浮動，看這篇文章就足夠了文章。-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 110px;
border: 2px solid red;
overflow: hidden;
}
.bottom{
width: 100px;
height: 100px;
background-color: slateblue;
float: left;
margin-bottom: 20px;
}
.top{
width: 100px;
height: 100px;
background-color: darkblue;
float: left;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="bottom"></div>
<div class="top"></div>
</div>
</body>
</html>
-
calss屬性值爲.bottom結果圖
-
calss屬性值爲.top結果圖
margin外邊距縮寫實踐
- 縮寫是有方向的能夠同時表示四個方向，可是這個
margin屬性的方向是有順序的，順序規則如：上、右、下、左。 margin屬性值有4個，接下來咱們就一一試試看看會有什麼效果呢。- 咱們給
margin屬性設置1個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
結果圖
-
注意：假設咱們給
margin屬性值設置了1個值爲：margin: 20px;表示上、右、下、左、方向的外邊距都爲20px像素。 - 咱們給
margin屬性設置2個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
background-color: red;
margin: 20px 30px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
結果圖
-
注意：假設咱們
margin屬性值設置了2個值如：margin: 20px 30px;表示外邊距的（上、下）爲20px像素、（左、右）爲30px像素。 - 咱們給
margin屬性設置3個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
background-color: red;
margin: 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
結果圖
-
注意：假設咱們給
margin屬性值設置了3個值如：margin: 20px 30px 40px;表示外邊距的上爲20px像素、（左、右）爲30px像素、下爲40px像素。 - 咱們給
margin屬性設置4個值實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box {
/*這裏的寬度指的就是盒子內容的寬度*/
width: 100px;
/*這裏的高度值的就是盒子內容的高度*/
height: 100px;
background-color: red;
margin: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
-
結果圖
-
注意：假設咱們給
margin屬性值設置了4個值如margin: 20px 30px 40px 50px;表示外邊距的上爲20px像素、右爲30px像素、下爲40px像素、左爲50px像素。
margin屬性居中介紹
margin屬性值設置爲auto，auto表示自動的意思，當左外邊距與右外邊距的值都是auto時那麼這個盒子就會水平居中。- 用
margin屬性設置水平居中注意事項如： - 一、必定要給盒子設置固定的寬高度。
- 二、只有塊級元素才能夠實現水平居中，行內元素不可以實現水平居中。
- 三、只有標準文檔流中的盒子纔可使用
margin屬性來實現水平居中。 - 四、
margin屬性是用來實現盒子的水平居中，而不是文本的水平居中。
margin屬性值爲auto實踐
- 咱們將使用
margin屬性值爲auto實現盒子水平線左居中的實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin-left:auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-
結果圖
- 咱們將使用
margin屬性值爲auto實現盒子水平線居中的實踐。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin-left:auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-
結果圖
-
注意：
margin屬性值爲auto設置上下外邊距不起任何做用。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin-bottom:auto;
margin-top: auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-
結果圖
注意事項一
- 用實踐來證實爲何：必定要給盒子設置固定的寬高度。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
height: 100px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-
結果圖
-
注意：若是該元素沒有設置固定的寬度，那麼該元素會佔據其父元素的
100%寬度，因此不可以實現水平線居中。注意事項二
用實踐來證實爲何：只有塊級元素才能夠實現水平居中，行內元素不可以實現水平居中。
-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<span class="box">微笑是最初的信仰
</span>
</body>
</html>
-
結果圖
-
注意：由於行內元素不能設置寬度，因此沒法實現水平線居中。
注意事項三
用實踐來證實爲何：只有標準文檔流中的盒子纔可使用
margin屬性來實現水平居中。-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
margin-left: auto;
margin-right: auto;
float: left;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
-
結果圖
-
注意：筆者給
class屬性值爲.box設置了一個float: left;左浮動，浮動的元素已經脫離了標準文檔流，因此沒法實現水平線居中。
注意事項四
用實踐來證實爲何：
margin屬性是用來實現盒子的水平線居中，而不是盒子的內容文本水平線居中。-
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="box">
微笑是最初的信仰
</div>
</body>
</html>
-
結果圖
注意事項五
- 若是想讓文本居中怎麼辦呢，使用
text-align屬性而且屬性值爲center才能夠實現文本水平線居中。 -
代碼塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: red;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
微笑是最初的信仰
</div>
</body>
</html>
-
結果圖
相關文章
- 1. 深刻理解CSS盒子模型
- 2. 深刻理解css盒子模型
- 3. CSS盒子模型深刻理解
- 4. CSS盒子模型-瞭解
- 5. CSS盒模型深刻
- 6. 深刻理解CSS系列（一）：理解CSS的盒子模型
- 7. HTML+CSS總結/深刻理解CSS盒子模型
- 8. 深刻理解CSS盒模型【轉載】
- 9. 深刻理解CSS盒模型及BFC
- 10. 深刻理解css盒模型
- 更多相關文章...
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • MySQL子查詢詳解 - MySQL教程
- • Scala 中文亂碼解決
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 深刻理解CSS盒子模型
- 2. 深刻理解css盒子模型
- 3. CSS盒子模型深刻理解
- 4. CSS盒子模型-瞭解
- 5. CSS盒模型深刻
- 6. 深刻理解CSS系列（一）：理解CSS的盒子模型
- 7. HTML+CSS總結/深刻理解CSS盒子模型
- 8. 深刻理解CSS盒模型【轉載】
- 9. 深刻理解CSS盒模型及BFC
- 10. 深刻理解css盒模型