学习笔记（三）——CSS进阶
在網頁的布局和頁面元素的表現方面，要掌握的最重要的概念是css的盒子模型(BoxModel)以及盒子在瀏覽器中的排列(定位)，這此概念用來控制元素在頁面上的排列和顯示方式,形成CSS的基本布局。
文章目錄
- 一、盒子模型
- 1.1、邊框border
- 1.1.1、邊框屬性
- 1.1.1、實例
- 1.2、內邊距padding
- 1.2.1、內邊距屬性
- 1.2.2、實例
- 1.3、外邊距margin
- 1.3.1、外邊距屬性
- 1.3.2、實例
- 1.4、知識補充
- 1.4.1、display屬性
- 1.4.2、盒子居中
- 1.4.3、高度塌陷問題
- 1.4.4、上下合并問題
- 1.4.5、總結：注意事項
- 二、Reset CSS(了解)
- 2.1、什么是Reset CSS？
- 2.2、使用Reset CSS
- 三、浮動
- 3.1、什么是浮動
- 3.2、浮動的作用
- 3.3、浮動特點
- 3.4、浮動帶來的問題
- 3.5、清除浮動
- 四、定位
- 4.1、什么是定位
- 4.2、邊偏移
- 4.3、定位模式
- 4.3.1、相對定位relative
- 4.3.2、絕對定位absolute
- 4.3.3、固定定位fixed
- 4.4、定位補充 z-index
一、盒子模型
盒子模型由內容，內邊距，邊框和外邊距組成，下圖是盒子模型的結構圖：
盒子模型是CSS的基石之一,它指定元素如何顯示以及(在某種程度上)如何相互交互，頁面上的每個元素都被瀏覽器看成是一個矩形的盒子,這個盒子由元素的內容、填充、邊框和邊界組成。網頁就是由許多個盒子通過不同的排列方式(上下排列、左右排列、嵌套排列)堆積而成。
1.1、邊框border
1.1.1、邊框屬性
| border-color | 邊框顏色 |
| border-width | 邊框寬度 |
| border-style | 邊框樣式 |
| border-left | 左邊框 |
| border-right | 右邊框 |
| border-top | 上邊框 |
| border-bottom | 下邊框 |
復合樣式border
格式：
如：
border: 1px solid red;1.1.1、實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>邊框border實例</title><style>div{width: 200px;height: 200px;/*border-width: 3px;*//*border-style: solid;*//*border-color: #0000FF;*//*border: none;*//*無邊框*//* 全部設置邊框 *//*border: 1px solid red;*//* 設置上邊框 */border-top: 2px solid red;/* 設置左邊框 */border-left: 3px solid orange;/* 設置右邊框 */border-right: 4px solid yellow;/* 設置下邊框 */border-bottom: 5px solid green;}</style> </head> <body><div></div> </body> </html>結果展示：
1.2、內邊距padding
padding 屬性也稱為盒子的內邊距。位于盒子的邊框和內容之間，和表格的填充屬性(cellpadding)相似。如果填充屬性為0,則盒子的邊框會緊挨著內容，這樣通常不美觀。簡單的理解就是：內邊距就是邊框到內容的距離。
當對盒子設置了背景顏色或背景圖像后,那么背景會覆蓋 padding 和內容組成的區域，并且默認情況下背景圖像是以 padding 的左上角為基準點在盒子中平鋪的。
1.2.1、內邊距屬性
| padding-top | 上內邊距 |
| padding-right | 右內邊距 |
| padding-bottom | 下內邊距 |
| padding-left | 左內邊距 |
復合樣式
格式：
如：
/* 上下左右全部設置為20px */ padding:20px; /* 第一個數設置上下內邊距，第二個數設置左右內邊距 */ padding:10px 20px; /* 第一個數設置上內邊距，第二個數設置左右內邊距,，第三個數設置下內邊距 */ padding:10px 20px 30px; /* 第一個數設置上內邊距，第二個數設置右內邊距,，第三個數設置下內邊距，第四個數設置左內邊距 */ padding:10px 20px 30px 40px;注意：①內邊距會撐開原本盒子的大小；②位置的改變是相對于原始位置而改變的。
1.2.2、實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>內邊框實例</title><style>div{width: 200px;height: 200px;/* 全部設置邊框 */border: 5px solid black;/* 左內邊距 */padding-left: 20px;/* 上內邊距 */padding-top: 20px;}</style> </head> <body><div>使用內邊距后</div> </body> </html>結果展示：
1.3、外邊距margin
邊界 margin 位于盒子邊框的外側，也稱為外邊距。其不會應用背景,因此該區域總是透明的。通過設置 margin，可以使盒子與盒子之間留有一定的間距，而使頁面不至于過于擁擠。可以統一設置4個邊界的寬度，也可單獨設置各邊界的寬。簡單理解就是：外邊距控制盒子和盒子之間的距離
1.3.1、外邊距屬性
| margin-top | 上外邊距 |
| margin-right | 右外邊距 |
| margin-bottom | 下外邊距 |
| margin-left | 左外邊距 |
復合樣式（和內邊距寫法一樣）
格式：
如：
margin:50px; /*默認上下左右外邊距為50px*/1.3.2、實例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.one{width: 100px;height: 100px;background-color: #0000FF;/* margin-left: 100px;margin-top: 100px; */margin:30px;}.two{width: 100px;height: 100px;background-color: yellow;margin-left: 30px;margin-top: 60px;}</style></head><body><div class="one"></div><div class="two"></div></body> </html>結果展示：
1.4、知識補充
1.4.1、display屬性
實際上，標準流中的元素可通過display屬性來改變元素是以行內元素顯示還是以塊級元素顯示，或不顯示。
display 屬性的常用取值如下:
display: block | inline | none | list-item屬性值解釋: block: 以快級元素顯示 inline: 以行內元素顯示 none: 隱藏元素。被隱藏的元素不會占據文檔中的位置 list-item: 列表想元素示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>制作導航欄</title><style type="text/css">.nav{height: 80px;border: 1px solid red;}.nav a{height: 80px;background-color: wheat;/* 擁有塊級、行內元素的特點 */display: inline-block; padding: 0 20px;;line-height: 80px;color: black;text-decoration: none;}.nav a:hover{color: blue;}</style></head><body><div class="nav"><a href="https://www.shiguangkey.com/">博客</a><a href="https://www.shiguangkey.com/">資源</a><a href="https://www.shiguangkey.com/">論壇</a><a href="https://www.shiguangkey.com/">問答</a></div></body> </html>結果展示：
1.4.2、盒子居中
我們在上網時會發現，隨著窗口大小的改變，有些網站的內容會一直處于居中狀態，讓我們來通過例子看看這是如何實現的。
注意: ① 盒子必須要指定寬度；② 左右外邊距都設置auto （自動）；③ 盒子居中只對左右有用，對上下是無效的。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>盒子居中</title><style>div{width: 200px;height: 200px;background-color: #0000FF;/* margin-left: auto;margin-right: auto; */margin: 0 auto;}</style></head><body><div></div></body> </html>結果展示：
1.4.3、高度塌陷問題
當子盒子的頂部外邊距設置為 50px 時，父盒子也會跟著子盒子一起往下移動，效果如下圖：
對于此問題以下有三種解決方法：
① 可以給父盒子定義一個上邊框
② 可以給父盒子指定一個上內邊距
③ 可以給父盒子添加 overflow：hidden;
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>高度塌陷</title><style>.dad{width: 120px;height: 120px;background-color: #0000FF;/* border-top: 1px solid red; */ /*解決方法一*//* padding-top: 1px; */ /*解決方法二*/overflow:hidden; /*解決方法三*/}.son{width: 80px;height: 40px;background-color: #008000;margin-top: 60px;}</style></head><body><div class="dad"><div class="son"></div></div></body> </html>結果展示：
1.4.4、上下合并問題
上下 margin 合并是指當兩個塊級元素上下排列時,它們之間的邊界(margin)將發生合并，也就是說，兩個盒子邊框之間的距離等于這兩個盒子margin 值的較大者。瀏覽器中兩個塊元素將會由于 margin 合并按右下圖方式顯示：
1.4.5、總結：注意事項
A：margin 調整內部div外邊距；
B：padding 調整外部div內邊距，它調整的是自身大小，所以如果不希望破壞外觀，則盡量使用 margin 布局（padding 有可能撐大外盒子，但如果是 margin 過大，則盒子內容會被擠出，但不會改變盒子本身大小）；
C：border 內部div和外部div定位時需要找到邊界，外部div如沒有設置 border，則內部div的 margin 設置時會一直往上找，直到找到邊界位置。
D：內部相鄰 div 間的 margin，取值為兩個div各自設置 margin 的最大值，而不是相加值。
E：margn 值可以為負，而 padding 不可以
二、Reset CSS(了解)
2.1、什么是Reset CSS？
在HTML標簽在瀏覽器里有默認的樣式，例如 p 標簽有上下邊距，strong標簽有字體加粗樣式等等，不同瀏覽器的默認樣式之間也會有差別。在切換頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式。“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉！這就是CSS reset。
2.2、使用Reset CSS
公司里會根據每個公司的業務不同，會自己寫一套屬于自己公司的RESET CSS。
這里提供了一個模板(以下就是該示例)：CSS Tools: Reset CSS
下面提供一個示例：
（最好建一個css文件保存）
三、浮動
3.1、什么是浮動
浮動，其實就是讓元素脫離正常的文檔流。CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
3.2、浮動的作用
浮動可以讓元素脫離正常的文檔流并且移動到指定的位置，類似于轉換了inline-block。
我們都知道 div 是塊級標簽，當有多個 div 時我們都不設置他們的內外邊距，這時會出現這些盒子全部排成一列并且它們間的距離為 0px。如果我們想讓它們排成一類呢？有兩種方法可以設置：1、設置 display: inline-block；2、使用浮動。這兩者有何區別？別急看下下面的示例就知道了。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>使用浮動</title><style>div{width: 100px;height: 100px;background-color: #0000FF;/*display: inline-block;*/float: left;}.box{background-color: #008000;}</style></head><body><div></div><div class="box"></div><div></div></body> </html>結果：
可以看出使用 display 屬性的話盒子間會出現一小部分間距，而使用浮動會使盒子緊貼在一起。
3.3、浮動特點
浮動除了可以讓元素脫離正常的文檔流并且移動到指定的位置外，還有一個特點就是：使用了浮動之后，盒子將不會再占據文檔中的位置
示例：(未使用浮動前)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>未使用浮動</title><style>.one{width: 80px;height: 80px;background-color: #0000FF;}.two{width: 100px;height: 100px;background-color: #008000;}</style></head><body><div class="one"></div><div class="two"></div></body> </html>結果：
對第一個盒子添加 float: left 后
.one{width: 80px;height: 80px;background-color: #0000FF;float: left; }3.4、浮動帶來的問題
一個父盒子包著兩個子盒子，給兩個子盒子設置浮動后，父盒子會包不住子盒子，父盒子因為子盒子浮動引起內部高度為 0 父盒子會看不到。（注意：這是父盒子不設置高度的情況下才會發生，一般來講不建議給父盒子設置高度，而是讓父盒子根據子盒子來自動撐開）
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>使用浮動</title><style>.dad{background-color: #0000FF;}.son1{width: 80px;height: 80px;background-color: #008000;float: left;}.son2{width: 80px;height: 80px;background-color: #9038E1;float: left;}</style></head><body><div class="dad"><div class="son1">兒子1</div><div class="son2">兒子2</div></div></body> </html>結果：
3.5、清除浮動
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
語法：
選擇器{clear:屬性值 }屬性值取值:left 清除左側浮動 right：清除右側浮動 both：同時清除浮動什么時候用清除浮動？
① 父盒子沒有高度
② 子盒子浮動了
③ 影響布局
有兩種方法可以解決父元素因為子元素浮動引起內部高度為 0 的問題：
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>子盒子浮動</title><style>.dad{background-color: #0000FF;overflow: hidden; /*方案一*/}.son1{width: 80px;height: 80px;background-color: #008000;float: left;}.son2{width: 80px;height: 80px;background-color: #9038E1;float: left;}</style></head><body><div class="dad"><div class="son1">兒子1</div><div class="son2">兒子2</div><!--<div style="clear: both"></div> /*方案二*/--></div></body> </html>結果：
四、定位
CSS中有三種的定位機制，即普通流(或叫文檔流)、浮動和定位。除非設置了浮動屬性或定位屬性,否則所有盒子都是在普通流中定位的。（普通流其實在我HTML那篇博客就已經學了，就是塊級標簽和行內標簽的默認排列方式）
4.1、什么是定位
定位：定位就是將元素定在網頁中的任意位置
定位組成：定位模式+邊偏移
4.2、邊偏移
常用屬性：
| top | 定位的盒子加上頂部偏移量 |
| left | 定位的盒子加上左部偏移量 |
| right | 定位的盒子加上右部偏移量 |
| bottom | 定位的盒子加上底部偏移量 |
如：
top:20px;4.3、定位模式
書寫格式：
選擇器{position:屬性值; } 屬性值取值: relative: 相對定位 在文檔流的區域繼續占有，后面的盒子不會占用位置，是以原來的位置移動位置; absolute: 絕對定位 以元素帶有定位的父級移動位置，會脫離文檔流; fixed: 固定定位 脫離文檔流,默認以窗口為參考。 static: 默認值 靜態定位，默認值不會發生任何變化4.3.1、相對定位relative
在文檔流的區域繼續占有，后面的盒子不會占用位置，是以原來的位置移動位置
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>相對定位</title><style>div{width: 100px;height: 100px;background-color: #00BFFF;}.two{background-color: green;position: relative;top: 50px;left: 50px;}</style></head><body><div></div><div class="two">我偏移了</div><div></div></body> </html>結果：
4.3.2、絕對定位absolute
以元素帶有定位的父級位置移動(若父級都無定位，默認以瀏覽器為定位)。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>相對定位</title><style>.dad{width: 220px;height: 220px;margin: 60px;background-color: #00BFFF;/*position: absolute; !*只要父盒子加了定位就會子盒子的定位就會以父盒子為標準移動*!*/}.son1{width: 100px;height: 100px;background-color: green;position: absolute; /*父盒子無定位則以瀏覽器為標準移動*/top: 20px;left: 20px;}.son2{width: 120px;height: 120px;background-color: yellow;}</style></head><body><div class="dad"><div class="son1">兒子1</div><div class="son2">兒子2</div></div></body> </html>結果：
4.3.3、固定定位fixed
脫離文檔流，默認以窗口為參考。
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>固定定位</title><style>.dad{width: 220px;height: 220px;margin: 100px;background-color: #00BFFF;position: absolute; }.son1{width: 100px;height: 100px;background-color: green;position: fixed; /*默認以窗口為參考,與父盒子有無定位無關*/top: 10px;left: 10px;}.son2{width: 120px;height: 120px;background-color: yellow;}</style></head><body><div class="dad"><div class="son1">兒子1</div><div class="son2">兒子2</div></div></body> </html>結果：
4.4、定位補充 z-index
z-index 屬性指定一個元素的堆疊順序。
擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注意： z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。
屬性值
| auto | 默認。堆疊順序與父元素相等。 |
| number | 設置元素的堆疊順序。 |
| inherit | 規定應該從父元素繼承 z-index 屬性的值。 |
示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>z-index實例</title><style>img{position:absolute;left:0px;top:0px;z-index:-1;}</style></head><body><div><img src="https://www.cc148.com/files/article/image/44/44955/44955s.jpg"><p>因為圖像元素設置了 z-index 屬性值為 -1, 所以它會顯示在文字之后。</p></div></body> </html>結果：
想學習 CSS 基本使用的可以看我這兩篇博客：
學習筆記（二）——CSS基礎
總結
以上是生活随笔為你收集整理的学习笔记（三）——CSS进阶的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（二）——CSS基础
- 下一篇： 学习笔记——深拷贝与浅拷贝