html+css基礎知識整理
/盒模型：1:所有標籤皆為盒子； 2：盒模型渲染在瀏覽器區域的計算：++++++++ padding一定會改變盒子在瀏覽器中渲染區域的大小； ⁃ padding的顏色和盒子設定的背景色相同；/ /1：margin：盒子設定margin之後，代表盒子的margin值的範圍內不允許再有其他盒子出現； 當盒子是巢狀關係時：子級的margin-top會傳遞給父級。導致父級隨著子級一起向下移動。/ /*背景圖的位置： background-position:center; background-position；top； bottom right background-position: right-bottom */ /overflow:hidden;超出盒子的內容隱藏
/一個值時：代表上下左右內邊距/ padding: 50px; /兩個值時：（上下） （左右) 內邊距/ padding: 10px 50px; /三個值時：（上） （左右） (下) 內邊距
/父級不設定邊框，子級會將margin-top傳遞給父級，所以父級要用padding來設定/
我是p標籤
我也是p標籤
斜體 我也是斜體 b標籤 strong粗體 研發11，哈哈標題標籤
標題標籤
標題標籤
標題標籤
標題標籤
標題標籤
- 刀哥
- 刀哥
- 刀哥
- 王俊凱
- 張秦琦
- 馬蓉
- 潘金蓮
- 張秦琦
- 標題1
- 語文
- 數學
- 英語
- 標題2
- 社會
- 自然
- 思想品德
- 人與科學
<!-- display；屬性：
block：塊級標籤
1：獨佔一行；
2：支援所有的css樣式設定；
3：預設在寬度不設定的情況下佔滿整個父級寬度；
inline：行級標籤或內嵌級標籤
1：相同型別的元素標籤可以在同一行排布，
如果同一行放不下，會自動擠到下一行。
2：不支援寬高設定，也不響應上下margin，響應左右margin和上下左右的padding；
3：寬高由內部的文字撐開；
4：相同型別的元素會解析結束標籤和開始標籤之間的回車符，產生固定的間隙；
解決方法：1：結束標籤和開始標籤之間的回車符刪除；
2：將父級設定font-size：0px；
inlin-block：內聯級標籤
1：相同型別的元素標籤可以在同一行排布，
如果同一行放不下，會自動擠到下一行。
2：支援所有的css樣式設定；
3：相同型別的元素會解析結束標籤和開始標籤之間的回車符，產生固定的間隙；
-->
/選擇器之間以逗號隔開，代表同時選中這些選擇器，給它們設定共同的樣式/ /*hover:代表滑鼠懸停在該標籤上時， 設定該標籤的樣式屬性； 用法：1：設定滑鼠懸停在某個標籤上時，該標籤或該標籤的子級發生樣式變化 2：選擇器1：hover 選擇器2{樣式} 選擇器2對應的標籤一定是選擇器1對應標籤的子級，選擇器2不寫時，代表對選擇器1設定樣式 3：兄弟標籤之間不能通過hover關聯起來設定樣式，例如： .div1和.div2是兄弟標籤 .div:hover .div2{ 樣式； }這種寫法是非法的。 4;通過父級關聯hover給子級設定樣式時，需要單獨給每個子級都設定樣式，不能使用群組的方式， 進行hover效果的設定； 5：通過父級給子級設定hover時，每個子級也屬於父級的一部分，因此滑鼠停在子級上，等同於懸停在父級上。 */ /寬度百分比是相對於父級定位設定的/
<!-- 定位position -->
<!-- 1:概念：用來描述一個盒子的位置，屬性值有4個；
1：static:預設文字流，在不設定盒子的position屬性時，盒子的預設位置屬性，表明盒子存在
於瀏覽器的二維平面之內。
2：relative:相對定位，表明盒子將按照自身當前位置的4條邊進行定位（top, right, bottom ,left）
定位特點：
2.1：不脫離當前文字流；
2.2：原始位置空間保留，不會被其他元素佔據；
2.3：對原有的佈局影響最小，通常為父級塊設定該位置屬性，來配合子級的absolute屬性，
實現定位疊加。(指定某一父級為子級絕對定位的基準盒子)。
3：fixed：固定定位，相對瀏覽器的四條邊進行定位，脫離原來的文字流。
4：absolute:絕對定位
特點：4.1：完全脫離文字流；
4.2：定位基準盒一定是其某一個父級，兄弟盒不能作為其定位的基準盒；他的父級不能是預設的static屬性；
4.3：基準盒標準：按照距離該子級最近的且位置屬性為非預設文字流的父級進行定位；
4.4：寬度百分比按照定位基準盒父級的寬度進行百分比變化；
4.5：當定位基準盒不設定高度，且所有子級全部脫離文字流後，該父級高度將消失；寬度坍塌。
解決方案：為該父級設定固定的高度
5：所有脫離原有文字流的塊級標籤，當不設定其寬度的時候，預設寬度不在佔滿整個父級寬度，而是由內容
寬度決定其大小的。
6：對於一個標籤設定其position屬性以後，必須要對其進行定位操作；-->
<!-- hover代表滑鼠懸停在該標籤時，設定該標籤的樣式屬性 -->
<!-- text-align:
1：當父級設定text-align:center；時，子級的display:inline或者inline-block型別時，
該元素會在父級水平方向上居中；
2：子級的display：block型別時，該元素不會在父級水平方向上居中，
但是該元素的文字內容會在該元素的水平方向上居中。 -->
<!-- box-shadow:
inset:陰影的投放方式，預設是外陰影，inset是內陰影
x軸的偏移量：可以是正值，可以是負值；
y軸的偏移量：可是是正值，可以是負值；
陰影的模糊半徑：只能是正值；
陰影的擴充套件半徑：正值時表示放大效果，向外擴充套件；
負值時表示縮小效果，向內縮小；
陰影的顏色：color-->
/z-index:設定同級兄弟元素之間的在垂直於瀏覽器平面方向上的顯示優先順序。 值沒有單位，可以是任意一個整數，值越大顯示優先順序越高，必須設定 該屬性，以保證渲染結果正確顯示。 另外，子級z-index受父級z-index限制，不同父級的子級之間進行z-index比較時， 只跟他們父級z-index值大小有關，跟子級的z-index大小無關。/
<!-- 清浮動：由於子級設定浮動，脫離原來的文字流，導致父級的高度塌陷，所以需要清除浮動來
解決這個問題：
1：給父級設定固定的高度：（可擴充套件性差）：
2：讓父級也浮動：（安全性差）；
3：overflow：hidden；給父級設定這個屬性；會改變塊的格式佈局（不必細究）；
讓其回到原來的文字流，從而解決來父級高度坍塌的問題（不常用）；
4：在父級後面新增一個空標籤，設定clear：both； 表示當前塊不允許所在文字行內有
其他的浮動的塊存在，保留一個塊來撐開父級的高度。
5：利用給父級新增偽類after樣式，利用程式碼的形式在父級最後面新增一個內容為空的子級，
它不允許所在文字行內有其他浮動的塊存在，height設定為0，來撐開父級的高度。
5.1：該盒子預設你的塊級型別是display：inline；
5.2：實現方式： ：after{
content：“”；
display：block；
clear：both：
}
5.3：目前最最主流的清浮動的方法：after偽類；
-->
<!-- input 中的屬性：
placeholder="" 預置輸入提示，主要用於文字框輸入
required表示該表單為必填項，不需要賦值，直接使用預設值就好；
enabled預設值表示該表單可以進行輸入，不需要賦值直接使用預設值就好。
disabled表示該表單不可以輸入，不需要賦值，直接使用預設值就好-->
| 建立單元格來決定列數； 2：樣式： 2.1：table-collapse:collapse可以消除每個單元格之間的間隙； 2.2border:"";按級別設定表格邊框的大小，沒有單位 2.3：無論表格是否有固定寬度，td ，th 的margin屬性都失效 2.4;表格一旦生成，一定會按行列對齊，如果需要錯行或者錯列對齊，只能通過行合併或者列合併來完成。 並且單行的高度是由所有元素中高度最高的那個決定； 單列的寬度是由本列中寬度最寬的元素決定；*/ /*border-collapse:collapse;用來設定每個單元格之間的邊界坍塌為1條邊界，預設值：separate*/ |
|---|