<1>css的三大特性
1.1 層疊性
相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一份沖突的樣式。層疊式主要解決樣式沖突的問題。
層疊性原則：
-樣式沖突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
-樣式不沖突，不會層疊
?1.2 繼承性
css中的繼承：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。
-恰當的使用繼承可以簡化代碼，降低css樣式的復雜性
-子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭可以繼承，以及color屬性）
&行高的繼承性
font: 12px/1.5 'Microsoft YaHei'這個1.5是指行高是當前元素文字大小font-size的1.5倍
1.3 優先級
當一個元素指定多個選擇器，就會有優先級產生
-選擇器相同，則執行層疊性（就近原則）
-選擇器不同，則根據選擇器權重執行（誰權重大則選誰）
| 選擇器 | 選擇器權重 |
| 繼承 或者 * | 0,0,0,0 |
| 標簽選擇器 | 0,0,0,1 |
| 類選擇器，偽類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內樣式style=" " | 1,0,0,0 |
| !important 重要的 | 無窮大 |
注意：
-權重是由4組數字組成，但是不會有進位
-登記判斷從左到右，如果某一位數值相同，則判斷下一位數值
-繼承的權重是0，如果該元素沒有直接選中，不管父元素權重多高，子元素得到的權重都是0
-繼承的是樣式，不會繼承權重
1.3.1 權重的疊加
若是復合選擇器，則會有權重疊加，需要計算權重
注意：權重雖然可以會疊加，但是不會進位
如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 權重為 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2*/ul li{color: yellow;}/* 權重為 0,0,0,1 1 */li {color: red;}/* .nav li 權重為 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */.nav {color: green;}</style>
</head>
<body><ul class="nav"><li>lalala</li><li>heihei</li><li>haha</li></ul>
</body>
</html>div ul li ——> 0,0,0,3 .nav ul li ——> 0,0,1,2 a:hover ——> 0,0,1,1 .nav a ——> 0,0,1,1 .nav .a ——> 0,0,10,0 |
<2>css盒子模型
頁面布局要學習的三大核心：盒子模型，浮動和定位，學習好盒子模型能非常好地幫助我們布局頁面。
頁面布局過程：
1.先準備好相關的網頁元素，網頁元素基本都是盒子Box。
2.利用css設置好盒子樣式，然后擺放到相應位置。
3.往盒子里面裝內容。
2.1?盒子模型組成
所謂盒子模型：就是把html頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。
css本質上就是盒子，封裝周圍的html元素，它包括：邊框。外邊距、內邊距、和實際內容
??
2.2 邊框（border）
border可以設置元素的邊框。邊框有三部分組成：邊框寬度（粗細） 邊框樣式 邊框顏色
| 屬性 | 作用 |
| border-width | 定義邊框粗細，單位是px |
| border-style | 邊框樣式 |
| border-color | 邊框顏色 |
邊框樣式的參數：
| none | 無邊框 |
| hidden | 隱藏邊框 |
| dotted | 點線 |
| dashed | 虛線 |
| solid | 實線邊框 |
| double | 雙線邊框 |
| groove | 根據border-color的值畫3D凹槽 |
| ridge | 根據border-color的值畫菱形邊框 |
| inset | 根據border-color的值畫3D凹邊 |
| outset | 根據border-color的值畫3D凸邊 |
注意：
-若提供四個參數值，按上右下左順序作用于四個邊框
-若只提供一個，將用于全部的四條邊
-若提供兩個，第一個用于上-下，第二個用于左-右
-若提供三個，第一個用于上，第二個用于左-右，第三個用于下
&要使用該屬性，必須設定對象的height或width屬性，或者設定position屬性為absolute
如果border-width不大于0，本屬性將失去作用
2.2.1?邊框的復合寫法
邊框簡寫：
border: 1px solid red;沒有順序邊框分開寫法：
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid green;
border-right: 1px solid yellow;2.2.2?表格的細線邊框
border-collapse屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框。
語法：
border-collapse: collapse;-collapse單詞是合并的意思
-border-collapse: collapse;表示相鄰邊框合并在一起
2.3 盒子內邊距padding
padding屬性用于設置內邊距，即邊框與內容之間的距離。
| 屬性 | 作用 |
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
2.3.1 內邊距的復合寫法
| 值的個數 | 表達意思 |
| padding：5px | 1個值，代表上下左右都有5像素內邊距 |
| padding：5px? 10px； | 2個值，代表上下內邊距都是5像素，左右內邊距是10像素 |
| padding：5px? 10px? 20px； | 3個值，代表上內邊距是5像素，左右內邊距是10像素，下內邊距是20像素 |
| padding：5px? 10px? 20px? 30px?? | 4個值，上是5像素，右是10像素，下是20像素，左是10像素 |
注意：
-內容好熱邊框有了距離，添加了內邊距
-padding影響了盒子實際大小
也就是說，如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子
解決方案：
若要保證盒子跟效果圖大小保持一致，則讓width/height減去多出來的內邊距大小即可。
2.3.2 padding不會撐開盒子的情況
如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小
2.4 盒子模型外邊距margin
margin屬性用于設置外邊距，即控制盒子和盒子之間的距離
| 屬性 | 作用 |
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin簡寫和padding完全相同
2.4.1 外邊距的典型應用
外邊距可以讓塊級盒子水平居中，但必須滿足兩個條件：
-盒子必須指定了寬度（width）
-盒子左右的外邊距都設置為auto
&這對行內元素和行內塊元素無效。
那么如何讓行內元素和行內塊元素水平居中呢？
ans：給父元素添加text-align：center即可
2.4.2 外邊距合并
使用margin定義塊元素的垂直外邊距時，可能出現外邊距的合并
2.4.2.1 相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素（兄弟關系）相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并。
解決方案：
盡量只給一個盒子添加margin的值。? ? ??
2.4.2.2 嵌套塊元素垂直外邊距的塌陷
對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方案：
1.可以為父元素定義上邊框
2.可以為父元素定義上內邊框
3.可以為父元素添加overflow: hidden;
還有其他方法，如浮動，固定，絕對定位的盒子不會有塌陷問題
2.5 清除內外邊距
網頁元素很多都帶有默認的內外邊距，而且不同瀏覽器默認的也不一致，因此我們在布局前，首先要清除下網頁元素的內外邊距。
* {padding: 0;/*清除內邊距*/margin: 0;/*清除外邊距*/
}注意：
行內元素為了照顧兼容性，盡量只設置左右內外邊距，不要設置上下內外邊距，但是轉換為塊級和行內塊元素就可以了。
到Word2Vec：自然語言處理中的詞向量學習)
![第十六屆藍橋杯青少組C++省賽[2025.8.9]第二部分編程題（1 、慶典隊列）](http://pic.xiahunao.cn/第十六屆藍橋杯青少組C++省賽[2025.8.9]第二部分編程題（1 、慶典隊列）)
