HTML+CSS基礎知識個人筆記_3
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_3
一、CSS顯示模式
（一）塊級元素: block-level
1.總是從新行開始
2.寬高可調
3.預設寬度為容器的100%
4.內可含其他塊級元素或者行內元素
div { /*塊級元素，block-level 1.總是從新行開始 2.高寬，內外邊距皆可調 3.內可放內聯元素和其他塊元素，但 p h dt 等文字類塊級元素，不能放 其他塊級元素 4.預設寬度，容器的100%*/ height: 200px; width: 200px; background-color: pink; }
（二）行內元素: inline-level
1.和相鄰元素在同一行
2.寬高不可調
3.預設寬度就是內容寬度
4.內只能含行內或者文字元素，（a不可含a，可含塊級元素）
/*行內元素，inline-level
1.和相鄰元素在同一行
2.寬高無效
3.預設寬度就是本身內容寬度
4.只能容納文字或其他行內元素，a除外，a可以放塊級元素，不能再放連結！！！*/
span {
height: 100px;
width: 100px;
background-color: purple;
}
（三）行內塊元素: inline-block
1.和相鄰元素在同一行
2.寬高可調
3.預設寬度是內容寬度
/*行內塊元素，屬於行內元素，inline-block
1.處於一行，但之間有空隙
2.預設寬度為本身內容寬度
3.寬高可調
如:<input /> <img /> <td> </td>*/
input {
width: 300px;
height: 20px;
background-color: deeppink;
}
（四）顯示模式轉換
div { /*塊級元素*/
width: 100px;
height: 100px;
background-color: red;
}
span { /*行內元素轉換為塊級元素*/
width: 150px;
height: 150px;
background-color: green;
display: block;
}
a { /*行內元素轉換為行內塊*/
width: 80px;
height: 20px;
background-color: blue;
display: inline-block;
}
a:hover {
background-color: orange;
}
（五）顯示模式注意點
-
p h dt 等文字型標籤不可放其他塊級元素
-
a不可含a
-
a可含其他塊級元素
<!-- 1.錯誤，p h dt等文字型標籤不可以放其他塊元素 --> <p> <div></div> </p> <!-- 2.錯誤，a不可再包含a --> <a href="#"> <a href="#"></a> </a> <!-- 3.正確，a可包含其他塊級元素 --> <a href=""> <img src="" alt=""> </a>
二、CSS行高的處理
行高分為上距離，下距離和內容高度三部分，上距離 == 下距離。
故可以推出，在過盒子重心的水平線與行的中線重合時，是為垂直居中。
一般的，盒子的水平分割線就是所要求的行的中線，
那麼inline-height = height 如此設定就是垂直居中。
若有偏差，通過除錯校準即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_行高.html</title>
<style>
.nav {
width: 50px;
height: 50px;
background-color: orange;
color: #fff;
display: inline-block;
text-align-last: center;
/*行高 等於盒子高度，一般可以居中，針對於盒子水平中線與背景等顯
示內容水平中線一致時
行高本質上的理解，分為上距離 + 下距離 + 內容高度 三塊，而上距離
與下距離適中相等
defaul，上下 = 0，當盒子高度和行高相同時，剛好內容居於盒子中間
注意，是盒子中間，對非均勻幾何形狀及其他水平重心線未重合的情況，
可適當通過瀏覽器inspect調試出合適行高*/
line-height: 50px;
/*行高例項見04_尖叫導航欄*/
}
</style>
</head>
<body>
<a class="nav">123</a>
</body>
</html>
特殊例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_尖叫導航欄</title>
<style>
.talk {
width: 200px;
height: 129px;
background-color: pink;
display: inline-block;
text-decoration: none;
text-align: center;
background-image: url(images/talk.png);
color: white;
line-height: 100px; /*行高調小合適*/
}
</style>
</head>
<body>
<div class="nav"><a href="#" class="talk">talk</a></div>
</body>
</html>
尖叫導航欄
三、CSS三大特性
（一）層疊性
當有多個選擇器，對同一個標籤，設定相同的屬性時，會發生衝突。
在權重相同的時候，根據層疊性處理衝突。
故，在樣式衝突，且權重相同不為零，發生層疊性處理
其他情況，不層疊
層疊性：後來的有效，就近原則
/*樣式衝突，後來者為準，或者說就近原則
樣式不衝突，則不層疊
CSS,cascading style sheets*/
div {
color: red;
font-size: 20px;
}
div {
color: blue;
}
（二）繼承性
指的是，從 父級 繼承而來的屬性值
個人理解成，先向父級繼承，如果父級沒有對應屬性值，就再向上繼承
故，如此，不單單是子代可以繼承，後代皆可以繼承
1.一般font- text- line- color 等文字相關的，可以繼承
2.a標籤的文字顏色和下劃線是不能被繼承的 -->
3.h標籤的文字大小是不能被繼承的
4.只有當一個元素的某個屬性沒有被直接指定時,才會繼承父級元素的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_繼承性.html</title>
<style>
/*p {
color: red;
}*/
.father {
color: pink;
font-size: 50px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="father">
<!-- 一般font- text- line- color 等文字相關的，可以繼承 -->
<p>son</p>
</div>
<div class="father">
<!-- a 這裡只繼承了font-size，原因暫不明 -->
<!-- https://blog.csdn.net/haha_hello/article/details/54972876 -->
<!-- a標籤的文字顏色和下劃線是不能被繼承的 -->
<!-- h標籤的文字大小是不能被繼承的 -->
<!-- 繼承是向父級繼承！父級沒有指定，則再向上面找！ -->
<a href="#">son2</a>
</div>
</body>
</html>
（三）優先順序
1.特殊性（權重）
一般的，優先順序：
行內>id>類（偽類）>標籤
內部與外部樣式表，好像是根據層疊性，暫時不理
| name | 權值 |
|---|---|
| !important | 無窮大 |
| 行內 | 1，0，0，0 |
| id | 0，1，0，0 |
| 類（偽類） | 0，0，1，0 |
| 標籤 | 0，0，0，1 |
| 萬用字元* | 0，0，0，0 |
| 繼承 | 0，0，0，0 但是繼承比萬用字元還要低！可理解成空 |
1.比較時，從左向右，相同就向右繼續比，不然大者優先
2.是四個數，相互獨立，沒有進位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_優先順序.html</title>
<style>
div { /*無窮大*/
color: orange!important;
}
#na { /*0, 1, 0, 0*/
color: pink;
}
.name { /*0, 0, 1, 0*/
color: blue;
}
div { /*0, 0, 0, 1*/
color: red;
}
/* 繼承 無 為最小
* 萬用字元選擇器 0，0，0，0
標籤選擇器 0，0，0，1
類 或者 偽類選擇器 0，0，1，0
id選擇器 0，1，0，0
!important 無窮大
行內樣式 1，0，0，0*/
/*計算方法， 四位單獨計算 沒有進位制，自左向右，相同再比 皆相同，層疊性
解決*/
</style>
</head>
<body>
<!-- 行內樣式 1，0，0，0 -->
<div class="name" id="na" style="color: green">123</div>
</body>
</html>
2.權重的計算
計算方法，四位單獨計算，沒有進位制，自左向右，相同再比。皆相同，層疊性解決。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_權重計算.html</title>
<style>
/*計算方法， 四位單獨計算 沒有進位制，自左向右，相同再比 皆相同，層疊性解決*/
/*注意以下兩個計算，特殊性值是一樣的，但所表達的物件不完全同，注意空格，同理，id的#也是如此*/
/*所以，CSS對權重的處理，當有衝突時，按照權值以大為主，相同時，層疊處理，繼承時權值為空，比0小*/
.nav li.sum { /*0010 + 0001 + 0010 = 0021*/
color: green;
}
.nav li .sum { /*0010 + 0001 + 0010 = 0021*/
color: pink;
}
div { /*0001*/
color: red;
}
.sum {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="sum">和</li>
<li>
<p class="sum">test</p>
</li>
</ul>
</div>
<p class="nav">name</p>
</body>
</html>
（四）三大特性小結
對於判斷盒子的效果是生效於哪裡，一般如此判斷：
1.確認是否繼承
只有當一個元素的某個屬性沒有被直接指定時,才會繼承父級元素的值，如果繼承，則權值為空，比萬用字元還要低。
1.1 發生繼承（沒有直接指定）
如果多個繼承，則權值都是0000，先繼承父級的。
1.2 沒有繼承（有直接指定）—> 2
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10_從父級繼承</title>
<style>
* {
color: orange;
}
span {
color: green;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<span>
<p>
test
</p>
</span>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_繼承的權重為空.html</title>
<style>
/* * { 0000 > 空
color: red;
}*/
/*任你權重再高，繼承後就是0*/
/*https://www.aliyun.com/jiaocheng/639195.html*/
/*繼承而來的屬性值,權重永遠低於明確指定到元素的定義。*/
/*只有當一個元素的某個屬性沒有被直接指定時,才會繼承父級元素的值。*/
/*所以，對下面的同樣是inherit, .nav 和 div 都是父級，而.nav 比 div 大，所以繼承.nav 的值*/
.nav {
color: green;
}
div {
color: orange;
}
/*繼承向父級找，父級沒有，再向上找，所以此處，.sec是父級，而div和.nav在更高的地方，雖然都是繼承，但繼承了.sec的值*/
.sec {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="sec">
<p>name</p>
</li>
</ul>
</div>
</body>
</html>
2. 計算權重，進行比較
2.1 如果權重相同
2.1.1 權重相同不為0，—> 3
2.1.2 權重相同等於0
一般為萬用字元，因為已知沒有繼承。
2.2 如果權重不同
權重大的優先。
3.層疊性處理
（五）L V H A 的由來
連結偽類選擇器：
a:link a:visited a:hover a:active
首先這四個都是偽類，0，0，1，0，一致，
則hover權重要大於link，
active權重要大於link和hover，
visited和其他三個無關，故位置可任意，只要滿足 L H A
則，
V L H A
L V H A
L H V A
L H A V
這都是可以的。