目錄
1.高度和寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; width: 100px; background-color: pink; } span{ height: 100px; width: 100px; background-color: green; } </style> </head> <body> <div> div1 </div> <span>span1</span> </body> </html>
效果如下圖所示
寬度和高度除了可以用畫素px單位，也可以使用百分比%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; width: 50%; /* 可以給寬度和高度設定百分比 */ background-color: pink; } </style> </head> <body> <div> div1 </div> </body> </html>
但是在設定百分比時，有些問題需要注意：
1.寬度和高度可以設定百分比，會按照父級標籤的寬度和高度進行計算
2.但是如果想給高度設定百分比，必須要求父級標籤有固定高度才行
2.字型相關
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ font-size: 20px; /* 字型大小 */ color: red; /* 字型顏色 */ font-family: '楷體','宋體'; /* 字型 */ font-weight: 100; /* 字型粗細 */ } </style> </head> <body> <div>窗前明月光</div> </body> </html>
效果如下圖所示
要注意:
1.如果不寫font-size，預設是16px
2.font-size:‘字型1’,'字型2'
如果系統找的到字型1，則優先選用字型1的字型
如果系統找不到字型1，則使用字型2的字型
3.font-weight的範圍是100-900，預設是400
3.字型對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; width: 200px; background-color: red; text-align: center; /* 水平居中 */ line-height: 100px; /* 和height高度相同，標籤文字垂直居中 */ } </style> </head> <body> <div> 九月一號星期二 </div> </body> </html>
效果如下圖所示
要注意:
1.text-align的值有left,center,right
2.想垂直居中，必須要把line-height的值和height的值設定成一樣的
4.顏色設定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 100px; width: 200px; background-color: red; /* 英文單詞 */ background-color: #7969d2; /* 16進位制數表示 */ background-color: rgb(92,187,138); /* rgb顏色表示方法 */ background-color: rgba(92,187,138,0.5); /* rgba加上透明度,透明度範圍是0-1 */ height: 100px; width: 100px; color: purple; opacity: 0.2; /* 整個標籤設定透明度 */ } </style> </head> <body> <div> 九月一號星期二 </div> </body> </html>
效果如下圖所示
5.背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 600px; width: 600px; background-image: url("1.jpg"); /* 設定背景圖片 */ background-repeat: no-repeat;/* 是否平鋪整個標籤 */ background-position: center center; /* 當前圖所在整個標籤的位置 */ background-position: 50px 100px; /* 當前圖距離左上的位置 */ border: 1px solid red; /* 畫一個邊框 */ } </style> </head> <body> <div class="c1"></div> </body> </html>
效果如下所示
background也可以簡寫成一行
<style> .c1{ height: 600px; width: 600px; background: green url("1.jpg") no-repeat center center; } </style>
6.邊框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100px; height: 100px; border: 1px dashed red; /* 邊框線為虛線 */ border: 1px solid red; /* 邊框線是實線 */ /* 也可以將一句話拆成三句話寫 */ border-width: 10px; /* 線寬 */ border-style: solid; /* 線樣式 */ border-color: yellow; /* 線顏色 */ /* 也可以四個方向單獨設定 */ border-left: 10px solid yellow; /* 也可以單方向單引數設定 */ border-right-width: 10px; } </style> </head> <body> <div class="c1"></div> </body> </html>
7.盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 100px; border:4px solid red; /* 邊框 */ padding: 7px 8px 9px 10px; /* 內容到邊框之間的距離 上右下左 */ margin:11px 12px 13px 14px; /* 距離其他標籤或者自己父級標籤的距離 上右下左 */ } </style> </head> <body> <div class="c1">我是最帥的！</div> <div class="c2"></div> </body> </html>
盒子模型包含四部分:
1.content:內容部分,設定的width和height
2.padding:內邊距,內容和邊框之間的距離
3.border:邊框
4.margin:外邊距,距離其他標籤或者自己父級標籤的距離
盒子模型如下圖所示:
還有幾個需要知道的:
<style> .c1{ /* margin可以設定上 右 下 左格式 */ margin: 1px 2px 3px 4px; /* margin也可以設定上下 左右格式 */ margin:15px 10px; /* 也可以單獨設定各個方向 */ margin-top: 10px; /* padding可以設定上 右 下 左格式 */ padding: 1px 2px 3px 4px; /* padding也可以設定上下 左右格式 */ padding: 15px 10px; /* 也可以單獨設定各個方向 */ padding-top: 10px; } </style>
要注意的是:如果兩個相鄰標籤都設定了margin兩者之間的距離，那麼不會累加，而是選最大值為兩者的距離
8.display屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100px; height: 100px; background-color: red; display: inline; /* 將塊級標籤改為內聯標籤 */ display: inline-block; /* 將標籤改為具有內聯標籤和塊級標籤屬性效果的標籤 可以設定高度，而且不獨佔一行 */ display: none; /* 隱藏標籤 */ } .c2{ width: 100px; height: 100px; background-color: blue; display: block; /* 將內聯標籤改為塊級標籤 */ } </style> </head> <body> <div class="c1"> 悟空 </div> <span class="c2"> 八戒 </span> </body> </html>
9.偽元素選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; } div:after{ /* 在文字前加一個問號 ? */ content: '?'; } div:before{ /* 在文字後加一個星號 * */ content: '*'; } </style> </head> <body> <div> 雷霆嘎巴，ZBC </div> </body> </html>
效果如下圖所示
10.偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; background-color: red; text-align: center; line-height: 200px; } .c1:hover{ background-color: orange; /* 觸碰時變成橙色 */ cursor: pointer; /* 滑鼠的小手效果 */ }
/* a標籤未訪問時設定樣式 */ a:link{ color: gold; } /* 點選按下去之後，抬起之前顯示樣式 */ a:active{ color: red; } /* 網址被訪問之後，顯示樣式 */ a:visited{ color: green; } /* 滑鼠懸浮時，設定樣式 */ a:hover{ color: purple; } </style> </head> <body> <div class="c1">小鳥伏特加</div> <a href="http://www.4399.com">點選進入花園寶寶樂園</a> </body> </html>
11.浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main-left{ height: 100px; width: 100px; background-color: red; float: left; } .main-right{ height: 100px; width: 100px; background-color: green; float: right; /* 浮動起來的元素，可以設定高度和寬度，並且不會獨佔一行 */ } .content{ width: 100%; height: 200px; background-color: yellow; } </style> </head> <body> <div class="main"> <div class="main-left"></div> <div class="main-right"></div> </div> <div class="content"></div> </body> </html>
這樣做，會造成父級標籤塌陷問題
什麼是父級標籤塌陷?
如果父元素只包含浮動元素，且父元素未設定高度和寬度的時候。那麼它的高度就會塌縮為零，也就是所謂的“高度塌陷”
在上面程式碼中，父元素為main，在main中只包含浮動元素main-left和main-right，並且沒有給父元素main設定高度和寬度,所以會有父級塌陷
父級塌陷如圖所示
正常非塌陷如圖所示
如果想解決父級標籤塌陷，有如下幾種方法
1.給父級標籤加高度(不常用)
/* 1.給父級標籤加高度 */
.main{
height: 100px;
}
2.清除浮動
我content標籤上面不能有浮動的元素蓋著我
.content{
width: 100%;
height: 200px;
background-color: yellow;
clear: both; /* 2.清除浮動 */
3.最常用的方法
/* 3.最常用的方法 */ .clearfix:after{ content: ''; display: block; clear: both; } </style> </head> <body> <div class="main clearfix"> <!-- class類值可以寫多個 --> <div class="main-left"></div> <div class="main-right"></div> </div> <div class="content"></div>
4.常用方法
/* 4.常用方法 */
.main{
overflow: hidden;
}
12.文字裝飾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ text-decoration: line-through; /* 文字被橫線貫穿 */ } .c2{ text-decoration: overline; /* 橫線在文字上方 */ } .c3{ text-decoration: underline; /* 橫線在文字下方 */ } a{ text-decoration: none; /* 去除a標籤的下劃線效果 */ } </style> </head> <body> <span class="c1">床前明月光</span> <span class="c2">疑是地上霜</span> <span class="c3">舉頭望明月</span> <a href="">博倫</a> </body> </html>
實現效果如下圖所示
13.相對定位和絕對定位
相對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /* 讓body標籤緊貼左上，沒有任何空隙 */ margin: 0; padding: 0; } .c1{ height: 100px; width: 100px; background-color: red; } .c2 { height: 100px; width: 100px; background-color: green; position: relative; left: 30px; /* 距離自己原來位置的左邊有30px距離 */ } .c3{ height: 100px; width: 100px; background-color: pink; } .c4{ height: 100px; width: 100px; background-color: blue; } .cc{ position: relative; margin-left: 100px; /* 帶有cc類的整體偏移100px */ } </style> </head> <body> <div class="c4"></div> <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>
實現效果如圖所示
絕對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /* 讓body標籤緊貼左上，沒有任何空隙 */ margin: 0; padding: 0; } .c1{ height: 100px; width: 100px; background-color: red; } .c2 { height: 100px; width: 100px; background-color: green; position: absolute; /* 絕對定位 */ left: 30px; /* 距離自己原來位置的左邊有30px距離 */ } .c3{ height: 100px; width: 100px; background-color: pink; } .c4{ height: 100px; width: 100px; background-color: blue; } .cc{ position: relative; margin-left: 100px; /* 帶有cc類的整體偏移100px */ } </style> </head> <body> <div class="c4"></div> <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>
實現效果如圖所示
如果不對cc進行相對定位設定,效果如下圖所示
關於相對定位和絕對定位，你需要注意的點:
相對定位：
1.相對定位可以使用top/bottom/left/right控制標籤位置
2.是按照自己原來的位置進行移動的
3.標籤還佔據自己原來的位置
4.脫離正常文件流，所以可以覆蓋別的標籤
絕對定位：
1.並不佔用自己原來的空間
2.如果父級標籤或者祖先輩標籤沒有設定相對定位,那麼絕對定位的元素會按照整個html文件的位置進行移動
3.如果父級標籤或者祖先輩標籤設定了相對定位，那麼按照父級標籤或者祖先輩標籤的位置進行移動
14.固定定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 800px; } .c2{ background-color: blue; height: 800px; } .c3{ /* 相對於瀏覽器視窗來設定位置 */ position: fixed; left: 40px; bottom: 60px; height: 40px; width: 80px; background-color: aqua; text-align: center; line-height: 40px; border-radius: 50%; /* 正方形的園度 */ } .c3 a{ text-decoration: none; color: black; } </style> </head> <body> <div id="top">頂部位置</div> <div class="c1"></div> <div class="c2"></div> <span class="c3"> <a href="#top">回到頂部</a> </span> </body> </html>
實現效果如下圖所示
