不斷更新中！收藏即可！
- FLEX
- BFC
- 實作元素水平垂直居中
- 浮動清除
- 如何讓一個元素消失
- 重繪和重排
- 塊級元素和行級元素
簡單說一下Flex 布局
設為flex 布局后 子元素的float clear vertical-align 失效
采用 Flex 布局的元素，稱為 Flex 容器
vertical-align 屬性設定元素的垂直對齊方式
對于flex布局 主要有六大屬性 分別是：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction 屬性 決定主軸的方向：
四種方向
css .box { flex-direction: row | row-reverse | column | column-reverse; }
row ：
row-reverse：
column:
column-reverse:
flex-wrap 屬性 當軸線無法排布時，決定如何換行：
css .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
wrap：
nowarp：
wrap-reverse：
flex-flow屬性 決定了flex-direction 和 flex-wrap屬性的復合屬性：
css .box{ flex-flow: row wrap; }
justify-content屬性 定義了元素在主軸上的：
css .box { justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start：
flex-end：
center：
space-between：
space-around：
align-items屬性 定義了屬性定義專案在交叉軸上如何對齊：
css .box { align-items: flex-start | flex-end | center | baseline | stretch; }
align-content屬性 定義了屬性定義專案在交叉軸上如何對齊：
css .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
——————————————————————————————————————————————
簡單說一下BFC
什么是BFC :
塊格式化背景關系 ，晦澀難懂，
- Block :可以簡單理解為 盒子模型的box block 塊 部分…
- Formatting context ：是css2.1中的一個概念，定義的是頁面中的一塊渲染區域，并且有一套適配的渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用，
可以看作為開辟了一塊獨立空間，空間以內的元素不會影響到外面的元素，
BFC 的實際用處
- https://juejin.cn/post/6844903544726749198 部分參考此博客
-
1.清除浮動
-
BFC 可以包含浮動的元素（清除浮動），只要設定容器overflow：hidden
-
2.布局：自適應 兩欄布局
未形成BFC：
顯示重疊
- 3.防止垂直margin 合并
- 當元素在同一個BFC中，垂直方向上的margin會重疊，解決方法是將其放在不同的 BFC 容器中，
可以看到margin 發生了重合 在垂直路徑上
注釋放開：即可創造區域bfc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bfc</title>
<style>
/* .wrap {
overflow: hidden;
} */
p {
color: rgb(1, 12, 3);
background: rgb(204, 253, 255);
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
</head>
<body>
<p>A-BFC</p>
<!-- <div class="wrap"> -->
<p>B-BFC</p>
<!-- </div> -->
</body>
</html>
觸發條件
最佳觸發條件：overflow:hidden
- float值非none
- overflow值非visible
- display值為inline-block、table-cell、table-caption、flex、inline-flex
- position值為absolute、fixed
實作元素的水平垂直居中
點擊查看我之前的博客
浮動清除
三種方式進行浮動清除- 使用帶clear屬性的空元素 或鄰接元素處理
在浮動元素后使用一個空元素
<div></div>
<div class="clear"></div>
.clear{clear:both;}
- 使用css的overflow屬性
給浮動元素的容器添加overflow：hidden；或者overflow：auto；可以清除浮動. BFC同理 - 偽元素處理
給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個：afer偽元素實作元素末尾添加一個看不見的塊元素清理浮動，
<div class="container clearfix">
<div class="wrap">aaa</div>
</div>
.clearfix:after{
content:""; /*設定內容為空*/
height:0; /*高度為0*/
line-height:0; /*行高為0*/
display:block; /*將文本轉為塊級元素*/
visibility:hidden; /*將元素隱藏*/
clear:both; /*清除浮動*/
}
.clearfix{
zoom:1; /*為了兼容IE*/
}
如何讓一個元素消失
以下三種方式均可：
display：none；
visibility：hidden；
opacity：0；
重繪和重排
https://segmentfault.com/a/1190000016990089 部分參考此博客
DOM的變化影響到了預算的幾何屬性如寬高，瀏覽器重新計算元素的幾何屬性，其他元素的幾何屬性也會受到影響，瀏覽器需要重新構造渲染書，這個程序稱之為重排，瀏覽器將受到影響的部分重新繪制在螢屏上的程序稱為重繪.
引起重排重繪的原因：
- 添加或者洗掉可見的DOM元素
- 元素尺寸位置的改變
- 瀏覽器頁面初始化
- 瀏覽器視窗大小發生改變，重排一定導致重繪，重繪不一定導致重排
減少重繪重排的方法：
- 不在布局資訊改變時做DOM查詢
- 使用csstext，className一次性改變屬性
減少重排的次數：以下的第一次案例中 對dom進行了三次修改，則可能會觸發三次瀏覽器的重排
var el = document.querySelector('.el');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
使用cssText 將多次的修改進行合并 這樣dom節點則只會被修改一次 ，避免了瀏覽器的多次重排
var el = document.querySelector('.el');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';
也可以對className 進行直接修改
// css
.active {
padding: 5px;
border-left: 1px;
border-right: 2px;
}
// javascript
var el = document.querySelector('.el');
el.className = 'active';
-
使用fragment
-
對于多次重排的元素，比如影片，使用絕對定位脫離檔案流，使其不影響其他元素
塊級元素和行級元素
- 塊元素：獨占一行，并且有自動填滿父元素，可以設定margin和padding以及width height，
- 行元素：不會獨占一行，width，height失效，并且在垂直方向的padding和margin會失效，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274416.html
標籤：其他