学习笔记(三)——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基础
- 下一篇: 学习笔记——深拷贝与浅拷贝