備戰-CSS篇

前言

今天小編整理一下關於樣式部分的一些點包括咱們經常使用的一些實現樣式方法，而後就是迴流重繪的一些認識。

BFC

什麼是BFC

它是由CSS2.1規範定義的，全稱爲Block Formatting Context。通俗來理解就是當元素被定義爲塊格式上下文的話，自身就造成了一個獨立的盒子，讓處於BFC內部的元素與外部的元素相互隔離。

說起到CSS首先咱們就要弄清楚BFC這個點。小編以前有結合實例介紹過，就不浪費時間再寫一次了BFC介紹，這邊就簡單說一下。

怎樣建立BFC

• 浮動
• 絕對定位
• 行內塊級元素
• overflow的值不爲visible的元素
• 彈性盒子

flex佈局

常常去用它但此次一回顧確實瞭解的不是很夠，這邊作一下記錄

flex容器

咱們去用到flex佈局前提要求就是咱們要將父級盒子定義爲彈性盒子,當時設置 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將會失效。

.father {
    display: flex | inline-flex;
}
複製代碼

flex相關屬性

咱們實現flex佈局就是根據他的相關屬性配合咱們先來了解介紹一下，具體屬性值就不一一寫了能夠到文檔裏面去查閱。

• flex-direction
  定義主軸方向

  .container {
      flex-direction: row | row-reverse | column | column-reverse;
                    /*左到右 右到左 上到下 下到上*/
  }
  複製代碼

• flex-wrap
  容器內盒子是否能換行

• justify-content
  定義了項目在主軸的對齊方式。

• align-content
  定義了多根軸線的對齊方式，若是項目只有一根軸線，那麼該屬性將不起做用

啊啊啊啊啊寫不動這裏了，跟再抄官方文檔一下，過！咱們到下一個地方

水平垂直居中

這個點老生常談了，估計面試也會問到，小編這邊就作一個整理複習 咱們先寫上咱們的工具盒子。

<div class="father">
    <div class="box size">content</div>
</div>
<style> .father { width: 200px; height: 200px; } .box { background: green; } .size{ width: 100px; height: 100px; } </style>
複製代碼

定位+負margin

最開始學前端看到的就是這個哈哈哈，有點親切，劣勢也很明顯，須要知道居中盒子寬高。

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    /*下面兩個是去子盒子對應寬高的一半*/
    margin-left: -50px;
    margin-top: -50px;
}
複製代碼

定位+margin auto

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
複製代碼

定位+calc

calcC3的一個計算屬性，實現與定位+負margin相似也是須要知道居中盒子的寬高

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}
複製代碼

定位+transform

transform的translate屬性對於當前盒子移動

.father {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

flex佈局

這種狀況確定不能少了咱們萬能的flex，果真仍是最方便的。

.father {
    display: flex;
    justify-content: center; /*左右居中*/
    align-items: center; /*上下居中*/
}
複製代碼

瀏覽器迴流重繪

概念內容

告別一下樣式咱們來總結一下回流重繪，瀏覽器內核解析樣式代碼使用的是流式佈局模型，解析html成DOM，解析CSS爲CSSOM，而後結合Render Tree。而後瀏覽器就根據結合的Render Tree來繪製頁面

• 迴流
  當Render Tree中部分或所有元素的尺寸、結構、或某些屬性發生改變時，瀏覽器從新渲染部分或所有文檔的過程稱爲迴流
• 重繪
  當頁面中元素樣式的改變並不影響它在文檔流中的位置時，瀏覽器會將新樣式賦予給元素並從新繪製它，這個過程稱爲重繪。

如何避免

很明顯迴流要付出的代價是更高的，即便是一個元素髮生變化，一連串的會致使Render Tree的變化頁面更新就須要更大的資源成本。

CSS方面

• 避免使用table佈局。
• 儘量在DOM樹的最末端改變class。
• 避免設置多層內聯樣式。
• 將動畫效果應用到position屬性爲absolute或fixed的元素上。

JS方面

• 避免頻繁操做DOM
• 能夠先爲元素設置display:none，操做結束後再把它顯示出來。由於在display屬性爲none的元素上進行的DOM操做不會引起迴流和重繪。