2022/5/23
overflow:hidden的作用
1.溢位隱藏：給一個元素中設定overflow:hidden，那麼該元素的內容若超出了給定的寬度和高度屬性，那麼超出的部分將會被隱藏，不佔位。
2.清除浮動：一般而言，父級元素不設定高度時，高度由隨內容增加自適應高度。當父級元素內部的子元素全部都設定浮動float之後，子元素會脫離標準流，不佔位，父級元素檢測不到子元素的高度，父級元素高度為0。下面的元素會頂上去，造成頁面的塌陷。因此，需要給父級加個overflow:hidden屬性，這樣父級的高度就隨子級容器及子級內容的高度而自適應。
3.解決外邊距塌陷：父級元素內部有子元素，如果給子元素新增margin-top
垂直居中的方式有哪些？
(1)定位版方法一：
當寬度和高度未知時使用
子元素設定了寬高且寬高小於父元素的情況下，設定position：absolute；之後給他的上下左右四個邊設定為0px，再通過設定 margin：auto；實現
position: absolute; left: 0px;top: 0px;right: 0px;bottom: 0px; margin: auto; 在父盒子中居中 margin: 0 auto; 水平居中 margin: auto 0; 垂直居中
(2)定位版方法二：
在子元素有寬高的情況下，先將子元素移動到父元素的最中心位置，再反向移動子元素寬高的一半。
height: 200px;
width: 200px;
position: absolute;
left: 50%;top: 50%;
margin-left: -100px;
margin-top: -100px;
(3)flex佈局
給父元素設定 display:flex; justify-content:center; align-items:center;
(4)利用內聯塊元素
.wrap { width: 300px; height: 300px; text-align: center; line-height: 300px; } .box { width: 100px; height: 100px; line-height: 100px; /* 重新設定子元素的行高，否則會繼承父元素的行高 */ display: inline-block; vertical-align: middle; /* middle 把此元素放置在父元素的中部 */ }
(5)absolute+transform
.wrap {
width: 300px;
height: 300px;
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
(6)grid網格佈局
.wrap {
width: 300px;
height: 300px;
display: grid;
}
.box {
width: 100px;
height: 100px;
align-self: center;
justify-self: center;
}
v-if和v-show的區別
v-if是 真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建；也是 惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 的 “display” 屬性進行切換。所以，v-if 適用於在執行時很少改變條件，不需要頻繁切換條件的場景；v-show 則適用於需要非常頻繁切換條件的場景。
vue-router的路由模式區別
hash模式 (預設)
- 使用URL的hash值來作為路由。支援所有瀏覽器。
- url地址中帶有#, 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入，其顯示的網路路徑中會有 “#” 號, 這是最安全的模式，因為他相容所有的瀏覽器和伺服器。
- 不能隨意的修改path地址
- 在 HTTP 請求中，對後端完全沒有影響，因此改變 hash 不會重新載入頁面。
history模式
- 整個地址重新載入，可以儲存歷史記錄，方便前進後退
- 使用 HTML5 API（舊瀏覽器不支援）和 HTTP服務端配置，沒有後臺配置的話，頁面重新整理時會出現404
- 可以隨意修改path地址，可以進入404
總結:
- hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如 http://www.abc.com，因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
- history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.abc.com/book/id。如果後端缺少對 /book/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裡如此描述：“不過這種模式要玩好，還需要後臺配置支援……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”
- 結合自身例子，對於一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 開發場景，用 history 模式即可，只需在後端（Apache 或 Nginx）進行簡單的路由配置，同時搭配前端路由的 404 頁面支援。
CSS選擇器及權重
選擇器含義：選擇器是查詢頁面元素的一種方式方法，選擇器的種類有很多種。
常用的選擇器有以下內容：
1、ID #id
2、class .class
3、標籤 p
4、通用 *
5、屬性 type="text"
6、偽類 :link :visited :hover :active
7、偽元素 ::first-line :first-letter
8、子選擇器 div>p
9、後代選擇器 div p
10、相鄰兄弟 div+p
11、通用兄弟 div~p
12、結構偽類 :nth-child :first-child :last-child
權重計算規則：
1、第一等：代表內聯樣式，如: style=””，權值為1000。
2、第二等：代表ID選擇器，如：#content，權值為0100。
3、第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
4、第四等：代表型別選擇器和偽元素選擇器，如div p，權值為0001。
5、萬用字元、*權值為0000。
6、繼承的樣式沒有權重值。
important > 內聯 > ID > 類| 偽類 | 屬性選擇|偽物件 > 標籤 > 繼承 > 萬用字元