第一章：css進階【必備篇】

整理中高級前端系列,能夠看成面試複習，也能夠看成實戰來看，分享一下 方便本身，方便他人。有不足的地方歡迎評論～

第一趴：css進階

第二趴：js進階

第三趴：vue框架 - 正在整理

第四趴：工程化

盒模型

誕生原因：默認盒模型實際佔用空間爲： margin+border+padding+width(height) 這種計算方式很是不方便，好比：對於非px爲單位的寬高設置：

.div {
    width:50%;
    border: 1px solid #ccc;
}
複製代碼

咱們想要寬度爲50%，但實際大小倒是 50%+2px......

所以box-sizing有兩個經常使用值：content-box標準盒模型和border-box怪異盒模型

• content-box(默認值):  border+padding+ width
• border-box(推薦用法)：寬高是包含 border和padding的

BFC-塊級格式化上下文

• 浮動元素 (元素的 float 不是 none)
• 絕對定位元素 (元素具備 position 爲 absolute 或 fixed)
• display: inline-block(內聯塊)、table-cell(表格單元格)、
• 具備overflow 且值不是 visible 的塊元素，
• flex item 和 grid item

特色

• 塊級盒的垂直方向距離由上下 margin 決定，同屬於一個 BFC 中的兩個或以上塊級盒的相接的 margin 會發生重疊；
• BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此；
• 計算 BFC 的高度時，浮動元素也參與計算。

IFC-行內格式化上下文

• 水平方向上，當全部盒的總寬度小於匿名行盒的寬度時，那麼水平方向排版由 text-align 屬性來決定；
• 垂直方向上，行內級盒的對齊方式由 vertical-align 控制，默認對齊爲 baseline；
• 行盒的高度由內部子元素中實際高度最高的盒子計算出來，值得注意的是，行內盒（inline boxes）的垂直的 border，padding 與 margin 都不會撐開行盒的高度。

**問題1：**item之間會產生水平間隙，是由於換行產生空白符。兩種解決方案：

• 代碼不換行
• 設置父元素font-size爲0，重置子元素的font-size

問題2： 通常爲了不這個垂直的間隙，在設置 inline-block 的時候，還須要順手帶個 vertical-align: middle;

雙飛翼、聖盃

都是爲了實現一個兩側寬度固定，中間寬度自適應的三欄佈局。

聖盃佈局：

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
// 主設置 padding
#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%; // 能作到自適應的關鍵
}

#left {
  width: 200px; // 固定寬度
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; // 固定寬度
  margin-right: -150px; 
}
複製代碼

雙飛翼佈局

雙飛翼佈局的DOM結構與聖盃佈局的區別是用container僅包裹住center，另外將.column類從center移至container上。

<div id="container" class="column">
    <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

.container {
width: 100%;
}
.center {
margin-left: 200px;
margin-right: 300px;
}
.cloumn {
float: left;
}
.left {
margin-left: -100%;
width: 200px;
background-color: blue;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
複製代碼

彈性佈局flex

具體用法移步阮一峯的flex語法、flex實戰，講得很是通俗易懂.

注意點：

不肯定多少的列表展現，最後一行須要左對齊的時候，解決方案：

.list:after {
  content: "";
  flex: auto;
}
複製代碼

網頁生成的過程

1. HTML代碼轉化成DOM
2. CSS代碼轉換成CSSOM（CSS Object Model）
3. DOM和CSSOM結合，生成一顆渲染樹(render tree)包含每一個節點的視覺信息
4. 生成佈局（Layout）即將全部渲染樹的全部節點進行平面合成
5. 講佈局繪製（paint）在屏幕上

以上五步裏面，1-3都很是快，4-5是最耗時的。

生成佈局（flow）和繪製（paint）這兩步，合稱爲 渲染（render）

重繪(repaint)和重排(reflow)

如下三種狀況會致使網頁的從新渲染，此時就須要從新 佈局和繪製

• 修改DOM
• 修改樣式表
• 用戶事件（鼠標懸停、頁面滾動、輸入框文字、改變窗口大小等）

重繪：全部對頁面視覺表現屬性的修改，好比：背景色、文字顏色。 重排：修改佈局必然致使重繪，好比：DOM操做、元素大小、間距等。

詳情可查看：：www.ruanyifeng.com/blog/2015/0…

link和@import的區別？

• link屬於XHTML標籤，而@import是CSS提供的。
• 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
• link方式的樣式權重高於@import的權重。
• 使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

第一趴：css進階

第二趴：js進階

第三趴：vue框架 - 正在整理

第四趴：工程化

同窗以爲有幫助的能夠點個贊，以示鼓勵～ 😊