CSS盒子模型
- div是什么
- 元素寬高
- 邊框
- 邊框顏色
- 邊框粗細
- 邊框樣式
- 邊距
- 內邊距
- 外邊距
- display屬性
div是什么
div 可定義檔案中的磁區（division），div 標簽可以把網頁分割為獨立的、不同的部分，不像 h1，p標簽，沒有任何默認樣式，其主要作用是標識網頁上的某塊區域，常見做法是通過給div元素加上id或class，然后通過css選中某個div，對其進行樣式美化，
大概就這樣，可以把整個網頁分成不同的部分，
每個div可以看成一個盒子
一個盒子中主要的屬性有5個：width、height、padding、border、margin，如下：
width：內容的寬度，CSS中 width 指的是內容的寬度，而不是盒子的寬度，盒子的寬度=內容寬度+padding+border
height：內容的高度，CSS中 height 指的是內容的高度，而不是盒子的高度，盒子的高度=內容高度+padding+border
padding：內邊距
border：邊框
margin：外邊距
元素寬高
width：寬度
height：高度
width:xxpx
height:xxpx
樣例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>牛哄哄的柯南</div>
</body>
</html>
效果截圖：
邊框
邊框顏色
| 屬性 | 說明 | 示例 |
|---|---|---|
| border-top-color | 上邊框顏色 | border-top-color:#369 |
| border-right-color | 右邊框顏色 | border-right-color:#369 |
| border-bottom-color | 下邊框顏色 | border-bottom-color:#fae45b |
| border-left-color | 左邊框顏色 | border-left-color:#efcd56 |
| border-color | 四個邊框為同一顏色 | border-color:#eeff34 |
| border-color | 上、下邊框顏色：#369 左、右邊框顏色：#000 | border-color:#369 #000 |
| border-color | 上邊框顏色：#369 左、右邊框顏色：#000 下邊框顏色：#f00 | border-color:#369 #000 #f00 |
| border-color | 上、右、下、左邊框顏色：#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f |
邊框粗細
border-width:像素值
border-width:5px
邊框樣式
border: solid;
| 屬性值 | 說明 |
|---|---|
| none | 默認無邊框 |
| dotted | 定義一個點線邊框 |
| dashed | 定義一個虛線邊框 |
| solid | 定義實線邊框 |
| double | 定義兩個邊框，兩個邊框的寬度和 border-width 的值相同 |
| groove | 定義3D溝槽邊框 |
| ridge | 定義3D脊邊框 |
| inset | 定義一個3D的嵌入邊框 |
| outset | 定義一個3D突出邊框 |
樣例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: cadetblue;
border: solid;
border-width: 5px;
border-color:#369 #000 #f00 #00f;
}
</style>
</head>
<body>
<div>牛哄哄的柯南</div>
</body>
</html>
效果截圖：
邊距
盒子模型總尺寸=border-width+padding+margin+內容寬度
內邊距
內邊距(padding-top 、left、right、bottom)
檢索或設定物件四邊的內部邊距，
| 傳參個數 | 說明 |
|---|---|
| 如果提供全部四個引數值 | 將按上、右、下、左的順序作用于四邊， |
| 如果只提供一個 | 將用于全部的四邊， |
| 如果提供兩個 | 第一個用于上、下，第二個用于左、右， |
| 如果提供三個 | 第一個用于上，第二個用于左、右，第三個用于下， |
注意：
行內物件可以使用該屬性設定左、右兩邊的內補丁，
若要設定上、下兩邊的內補丁，必須先使該物件表現為塊級或行內塊級，
對應的腳本特性為padding，
外邊距
外邊距(margin-top 、left、right、bottom)
| 傳參個數 | 說明 |
|---|---|
| 如果提供全部四個引數值 | 將按上、右、下、左的順序作用于四邊， |
| 如果只提供一個 | 將用于全部的四邊， |
| 如果提供兩個 | 第一個用于上、下，第二個用于左、右， |
| 如果提供三個 | 第一個用于上，第二個用于左、右，第三個用于下， |
注意：
行內物件可以使用該屬性設定左、右兩邊的外補丁，
若要設定上、下兩邊的外補丁，必須先使該物件表現為塊級或行內塊級，
外延邊距始終透明，
對應的腳本特性為margin，
外邊距的妙用
網頁居中對齊
前提：居中對齊的網頁元素必須設定寬度
margin:0px auto;
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1{
width: 200px;
height: 200px;
background-color: cadetblue;
border: solid;
border-width: 5px;
border-color:#369 #000 #f00 #00f;
margin-top: 10px;
margin-right: 20px;
padding-top: 10px;
}
.d2{
width: 200px;
height: 200px;
background-color: cadetblue;
border: solid;
border-width: 5px;
border-color: #f00 #00f #369 #000;
margin-top: 10px;
padding-top: 10px;
padding-left: 30px;
}
</style>
<title></title>
</head>
<body>
<div class="d1">牛哄哄的柯南</div>
<div class="d2">Keaf</div>
</body>
</html>
效果截圖：
不加邊距的效果截圖：
從上面的對比可以看出來內邊距和外邊距的作用了
內邊距可以把div變大
外邊距可以使div移動位置
display屬性
設定為none 不顯示
塊級元素(block)，可以設定寬高，行內元素(inline)不可以設定寬高
如果想對行內元素設定寬高，可以把元素變為行內塊級元素(inline-block)
主要應用就是我們可以利用display: inline-block來使兩個div塊在一行顯示
不寫display: inline-block;
樣例代碼1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.blockdiv{
/* display: inline-block; */
border: solid 1px red;
width: 200px;
height: 100px;
}
</style>
<title></title>
</head>
<body>
<div class="blockdiv">塊1 </div><div class="blockdiv">塊2 </div>
</body>
</html>
效果截圖1：
加上display: inline-block;
樣例代碼2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.blockdiv{
display: inline-block;
border: solid 1px red;
width: 200px;
height: 100px;
}
</style>
<title></title>
</head>
<body>
<div class="blockdiv">塊1 </div><div class="blockdiv">塊2 </div>
</body>
</html>
效果截圖2：
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/203132.html
標籤：AI
上一篇：你需要知道的網頁全屏背景小知識