7.25 面經。怕忘記記錄一下比較常見的一些樣式問題
1. margin外邊距重疊問題：因為
bfc的特性，同乙個
bfc容器的元素會發生，但是兩個
bfc容器不會
1. 能產生
bfc- body 根元素
- 浮動元素：
float
除 none
以外的值
- 絕對定位元素：
position (absolute
、fixed)
- display 為
inline-block
、table-cells
、flex
- overflow 除了
visible
以外的值
(hidden
、auto
、scroll)
2. 包含浮動：如果盒子沒給高度，裡面有浮動元素，因為浮動元素脫標，盒子如果有邊框就只有
2px的邊框，觸發
bfc就能清除浮動，把元素包裹在裡面
3. 左或者右自適應：乙個盒子左右兩個元素，左邊左浮動右邊正常，左邊會遮蓋右邊，觸發
bfc然後左邊固定寬度右邊自適應或者也固定寬度也不會被遮蓋
2. div水平垂直居中：
1. 絕對定位
+transform
2. 絕對定位方法
+margin
3. 絕對定位方法：絕對定位下
top left right bottom
都設定0
4. flex
5. table-cell實現水平垂直居中
: table-cell middle center
組合使用
3. 隱藏元素
1. ### display: none;
1. dom 結構：瀏覽器不會渲染
display
屬性為
none
的元素，不佔據空間；
2. 事件監聽：無法進行
dom
事件監聽；
3. 效能：動態改變此屬性時會引起重排，效能較差；
4. 繼承：不會被子元素繼承，畢竟子類也不會被渲染；
5. transition：
transition
不支援
display
。2. ### visibility: hidden;
1. dom 結構：元素被隱藏，但是會被渲染不會消失，佔據空間；
2. 事件監聽：無法進行
dom
事件監聽；
3. 性 能：動態改變此屬性時會引起重繪，效能較高；
4. 繼 承：會被子元素繼承，子元素可以通過設定
visibility: visible;
來取消隱藏；
5. transition：
visibility
會立即顯示，隱藏時會延時
3. ### opacity: 0;
1. dom 結構：透明度為
100%
，元素隱藏，佔據空間；
2. 事件監聽：可以進行
dom
事件監聽；
3. 性 能：提公升為合成層，不會觸發重繪，效能較高；
4. 繼 承：會被子元素繼承
,且，子元素並不能通過
opacity: 1
來取消隱藏；
5. transition：
opacity
可以延時顯示和隱藏
4. 重繪和回流
1. 重繪：會驗證節點可見性
2. 回流：布局或者幾何大小改變引起，乙個元素的回流可能會導致了其所有子元素以及
dom中緊隨其後的節點、祖先節點元素的隨後的回流。
**回流必定會發生重繪，重繪不一定會引發回流。
**5. 瀏覽器渲染機制：
1. 瀏覽器把
html
解析成dom
樹，css
解析成cssom
，這兩個合併成
render tree
2. 通過
render tree
就知道所有節點的樣式，計算節點在頁面的大小和位置，然後放在頁面
6.
bootstrap樣式問題記錄
方法一 不建議使用 選擇器，因為在一些其他樣式外掛程式 特殊部分會有更好的字型樣式設定，用 就會全部覆蓋。正常引入bootstrap的css樣式後，記得將自定義的樣式表放到其之後，在main.css中第一句加上 body,button,input,select,textarea,h1 h2,h3,h...
CSS 樣式記錄
1 element.style.border加邊框時會改變原有div等元素的size 可以改成設定輪廓，即改為element.style.outline 2px dotted 清除時設定為 2px dotted transparent 2 獲取頁面元素的座標 var rect element.get...
css簡單樣式
p style color yellow 一段文字 p 選擇器 內部樣式 外聯樣式 建立.css檔案層疊優先順序 內聯 內部 外部 style 元素選擇器 p 類選擇器 first id 選擇器 sec style id 選擇器命名是唯一的奇偶選擇器odd even.first nth child ...