css(2)
- 2019 年 12 月 16 日
- 筆記
一、css屬性及用法
1.1css樣式操作
塊級標籤的長度和寬度都是可以設置的，但是行級標籤不可以直接設置長度和寬度。如：
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { width:200px; height:300px; background-color: fuchsia; } span{ width:100px; height:150px; background-color: aqua; } </style> </head> <body> <div> 我是div </div> <span> 我是span </span>
1.2字體屬性
1.2.1文字字體
font-family可以將多個字體名保存起來，如果瀏覽器不支援第一個字體會依次嘗試後面的字體。
body{ font-family:"華文行楷","微軟雅黑","Arial", sans-serif }
注意：sans-serif必須要加上，否則不能用。
1.2.2字體大小
body{ font-family:"華文行楷","微軟雅黑","Arial", sans-serif; font-size:50px; }
可以更改整個body的字體，也可以只更改某一行的字體，以及字體的大小。
1.2.3font-weight
|
值 |
描述 |
|---|---|
|
normal |
默認值，標準粗細 |
|
bold |
粗體 |
|
bolder |
更粗 |
|
lighter |
更細（更淡） |
|
100~900 |
設置具體的粗細 |
|
inherit |
繼承父元素字體的粗細 |
這裡需要說明，上面這些都是font-weight的屬性，具體用法和上面的字體、字體大小用法相同。
1.2.4文本的顏色
方法1：color用於修改文本的顏色，color直接選取對應的顏色單詞。
方法2：使用pycharm的取色版取出色值，在取出的色值前面加#作為color的值，如：color: #FF00FF;
方法3：使用RGB設置顏色，如：color: rgb(255,255,255);
另外設置RGB值的方式還有color:rgba(123,123,123,0.6);最後一個值用來調節字體的透明度。
1.3文字屬性
1.3.1文字對齊
text-again屬性規定了元素中文本的水平對齊方式。
|
值 |
描述 |
|---|---|
|
left |
左對齊，默認這種方式 |
|
right |
右對齊 |
|
center |
居中 |
|
justify |
兩端對齊 |
1.3.2文字裝飾
text-decoration給文字添加特殊的效果。
|
值 |
描述 |
|---|---|
|
none |
定義的標準文本 |
|
underline |
文本下方畫的一條線 |
|
overline |
文本上方畫的一條線 |
|
line |
穿過文本的一條線 |
|
|
繼承父元素的text-decoration的值 |
常用的應用場景：去掉a標籤自帶的的下劃線。
a{ text-decoration: none; }
1.3.3首行縮進
p{ text-indent:40px ; }
1.4背景屬性
添加背景圖片
background-image: url("圖片1.jpg"); background-color:black;只有不設置背景圖片時可以用 background-repeat:repeat-x;只在水平方向上平鋪背景圖片 background-repeat:repeat-y;只在豎直方向上平鋪背景圖片 background-repeat:no-repeat;不平鋪背景圖片 這三個功能只有在背景圖片小於網頁大小時才能夠使用，否則看不到效果，所謂平鋪就是幾個背景圖片把規定的區域鋪滿。 background-position: center;背景圖片的位置，可以設置x,y軸，也可以直接設置x，y軸的數值。 如background-position: 200px 200px;
可以對以上程式進行簡寫：
background: url("捕獲.PNG")no-repeat left top;
1.5邊框
1.5.1邊框的屬性
- border-width
- border-style
- border-color
直接對其邊框進行設置：
#a1{ border-width: 5px; border-style: solid; border-color: darkslateblue; }
可簡寫為如下：
border:5px solid darkslateblue;
邊框樣式
|
值 |
描述 |
|---|---|
|
none |
無邊框 |
|
dotted |
點狀虛線邊框 |
|
dashed |
矩形虛線邊框 |
|
solid |
實線邊框 |
邊框的上、下、左、右等的設置：
border-top-style: dotted; border-top-color: cornflowerblue; border-right-style: dotted; border-bottom-style: dotted; border-left-style: none;
1.5.2border-radius
border-radius給邊框的四角加弧度，當邊框是正方形時，設置半徑是邊框的一半可以得到一個圓形，如果邊框是長方形則可以得到一個橢圓。
border-radius: 50%;
1.6display屬性
display用於控制HTML元素的顯示效果。
|
值 |
描述 |
|---|---|
|
none |
HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript程式碼使用 |
|
block |
默認佔滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分,使行內元素變成塊級元素 |
|
inline |
按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。使塊級元素變成行內元素 |
|
inline-block |
使元素同時具有行內元素和塊級元素的特點 |
display的none和visibility的hidden的區別：兩者都可以隱藏元素，但是display將元素隱藏之後，元素所佔用的位置也會被其他元素佔用，而visibility的hidden只隱藏了元素，元素的位置還是存在的。
1.7css盒子模型
|
值 |
描述 |
|---|---|
|
margin |
控制元素與元素之間的距離 |
|
padding |
控制內容與邊框之間的距離 |
|
border |
內容外面的邊框 |
|
content |
內容 |
margin的設置與border的設置類似：
margin-top: 10px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;
也可以使用簡寫方式：
margin: 10px 10px 15px 20px; 這裡如果只寫第一個參數默認所有的邊框都按第一個參數，如果只寫兩個參數，默認第一個參數控制上下，第二個參數控制左右，如果寫三個參數則第一個控制上，第二個控制左右，第三個控制下，如果四個全寫則控制順序為上、右、下、左（順時針）。
此外padding的使用方式和margin相同。
1.8float（浮動）
在css中任何元素都可以浮動，浮動的特點：
浮動的框可以左右移動，直到碰到網頁的邊框或者另一個浮動的框，浮動的框可以覆蓋固定的框，而且浮動的框會把原來框佔有的位置讓出來。（需要說明的，浮動的框可以覆蓋固定的框，但是覆蓋不了固定框的文本內容，這些文本內容會被擠出到浮動框下方顯示）（另外本人試的浮動的p標籤改成的塊標籤無法覆蓋固定的塊標籤div，但是浮動的div可以。）
浮動的應用場景：
浮動多用於頁面的功能塊的搭建，如小米商城的頁面，就大量使用了浮動。
浮動常用的三種方式：l
- left 向左浮動
- right 向有浮動
- none 默認值，不浮動
1.8.1浮動帶來的影響
會使浮動框的父標籤塌陷，就是當邊框是父標籤的時，如果子標籤設置為浮動，則外邊框就會塌陷成一條線。
如：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:200px; height: 200px; background: cornflowerblue; float: right; } .c2{ border: 1px solid black ; } #d2{ width:200px; height: 200px; background: red; } p{ width: 100px; height: 300px; display: block; background: blueviolet; float: left; margin-top: 0px; } </style> </head> <body> <div id="d1" class="c2"> <div class="c1"></div></div> <div id="d2">div2</div> <p>p</p> </body>
clear屬性規定元素的哪一冊不允許其他浮動元素。
|
值 |
描述 |
|---|---|
|
left |
左側不允許浮動元素 |
|
right |
右側不允許浮動元素 |
|
both |
兩側不允許有浮動元素 |
|
none |
默認值，允許浮動元素 |
|
inherit |
從父元素繼承clear屬性的值 |
clear只會對自身起作用。
1.8.2清除浮動帶來的影響
解決浮動帶來的父標籤塌陷問題。
主要有三種方式：
- 固定高度（給父標籤加固定高度）
- 偽元素清除法（clearfix）
- overflow:hidden
偽元素清除法（使用較多）：
.clearfix:after { content: ""; display: block; clear: both; }
具體使用如下程式：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:200px; height: 200px; background: cornflowerblue; float: right; } .c2{ border: 1px solid black ; } #d2{ width:200px; height: 200px; background: red; } p{ width: 100px; height: 300px; display: block; background: blueviolet; float: left; margin-top: 0px; } .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <div id="d1" class="c2 clearfix"> <div class="c1"></div></div> <div id="d2">div2</div> <p>p</p> </body>
1.9overflow溢出屬性
溢出發生的原因是標籤的文本內容太多，標籤的尺寸放不下這麼多內容，導致標籤文本內容的溢出。
|
值 |
描述 |
|---|---|
|
visible |
默認值。內容不會被修剪，會呈現在元素框之外。 |
|
hidden |
內容會被修剪，並且其餘內容是不可見的。 |
|
scroll |
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。 |
|
auto |
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。 |
|
inherit |
規定應該從父元素繼承 overflow 屬性的值。 |
- overflow（水平和垂直均設置）
- overflow-x（設置水平方向）
- overflow-y（設置垂直方向）
具體程式如下：
#d2{ width:200px; height: 200px; background: red; overflow: auto; } 可以直接在id,或者繼承的類里寫。
1.9.1 圓形頭像示例
<head> <meta charset="UTF-8"> <title>圓頭像</title> <style> body{ background-color: cornflowerblue; } .c3{ height: 120px; width:120px; border: 5px solid black; border-radius: 50%; overflow: hidden; } img{ width: 150%; } </style> </head> <body> <div class="c3"> <img src="小狗.png" alt=""> </div> </body>
效果：
1.10定位（position）
1.10.1static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標籤對象的left、top等值是不起作用的的。
1.10.2relative（相對定位，了解）
相對定位是相對於該標籤原來的位置進行定位。有趣的是，即使設定了元素的相對定位以及偏移值，元素還佔有著原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
1.10.3absolute（絕對定位，重要）
定義：相對於已經定位過得父標籤再做定位。已經定位過指的是這個標籤的position不是static狀態。
重點：如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
粉紅色框藉助藍色框進行了絕對定位，具體程式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px 0px ; } .c1{ width: 100px; height: 100px; background-color: aqua; position: relative; } .c2{ position: absolute; height: 100px; width: 150px; background-color: fuchsia; left :100px; } </style> </head> <body> <div class="c1"> </div> <div class="c2"></div> </body>
1.10.4固定定位（fixed）
固定定位實現的功能是比如側邊功能調，不管你怎麼滑動網頁，它都會固定在某一個位置不變。
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px 0px ; } .c1{ height: 1000px; background-color: blue; } .c2{ height: 1000px; background-color: fuchsia; } .c3{ border: 5px solid black; background-color: aqua; position: fixed; bottom: 50px; right: 50px; } </style> </head> <body> <div class="c1"> </div> <div class="c2"></div> <div class="c1"></div> <div class="c2"></div> <div class="c3">回到頂部</div> </body>
脫離文檔流：
浮動的元素、絕對定位、固定定位
不脫離文檔流：
相對定位
1.10.5z-index
#i2 { z-index: 999; }
設置對象的層疊順序。
- z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位的元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
1.10.6opacity
用來定義透明效果。取值範圍是0~1，0是完全透明，1是完全不透明。
