[TOC] # link 標簽和 @import 的區別 * link 屬于 html 標簽，而 @import 是 css 提供的，用于在樣式文件中引入其他樣式文件 * 頁面被加載時，link 會同時被加載，而 @import 引用的 css 會等到頁面加載結束后加載。 * link 是 html 標簽，因此沒有兼容性，而 @import 只有 IE5 以上才能識別。 * link 方式樣式的權重高于 @import 的 簡而言之，使用 @import 的關鍵點在于其可以先加載 HTML，后加載 CSS；另外，如果要動態地添加 CSS 樣式的話（比如切換主題的實現）還是得用 link 標簽； 另外，我們寫 sass 時也是使用 @import "mixin.scss" 而不是 link "mixin.scss"，scss 拓展了 @import 的功能使得其可以導入 .scss 文件。 # BFC 及其應用 <span style="font-size: 20px;">定義</span> BFC(Block formatting context) 直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有 Block-level box 參與，它規定了內部的 Block-level Box 如何布局，并且與這個區域外部毫不相干。 <span style="font-size: 20px;">生成</span> CSS2.1 中規定滿足下列 CSS 聲明之一的元素便會生成 BFC。 1. 根元素 2. float 的值不為 none 3. overflow 的值不為 visible 4. display 的值為 inline-block、table-cell、table-caption 中的任何一個; display：table也認為可以生成 BFC，其實這里的主要原因在于 table 會默認生成一個匿名的 table-cell，正是這個匿名的 table-cell 生成了 BFC 5. position 的值為 absolute 或 fixed <span style="font-size: 20px;">約束</span> 1. 內部的 Box 會在垂直方向上一個接一個的放置 2. 屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊（塌陷），與方向無關。（重疊后的 margin 取大者） 3. 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明 BFC 中子元素不會超出他的包含塊，而 position 為 absolute 的元素可以超出他的包含塊邊界） 4. BFC 的區域不會與 float 的元素區域重疊 5. 計算 BFC 的高度時，浮動子元素也參與計算 6. BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然 <span style="font-size: 20px;">應用</span> - 解決垂直和水平方向上 margin 重疊，一般設置 overflow:hidden - 清除內部浮動（根據規則5 -“計算 BFC 的高度時，浮動元素也參與計算”）   # 清除浮動 參考鏈接：[https://blog.csdn.net/h\_qingyi/article/details/81269667](https://blog.csdn.net/h_qingyi/article/details/81269667) 方案1：觸發 BFC 實現清除浮動 ```css .fahter{ width: 400px; overflow: hidden; } ``` 缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素 ***** 方案2：使用 after 偽元素清除浮動 ```css .clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/ } ``` 優點：符合閉合浮動思想，結構語義化正確 缺點：ie6-7 不支持偽元素：after，使用 zoom:1 觸發 hasLayout. ***** 方案3：使用 before 和 after 雙偽元素清除浮動 ```css .clearfix:after,.clearfix:before{ content: ""; display: table; /* ??? */ } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } ``` # 內聯元素與塊級元素 **塊級元素**：記憶方式（H5 語義化標簽、p、div、h 標題） | 標簽 | 用途 | 標簽 | 用途 | | --- | --- |--- | --- | --- | |\<address\>| 聯系方式信息| \<article>| 文章內容| |\<aside> |伴隨內容| \<audio> |音頻播放| |\<blockquote>| 塊引用 |\<canvas> |繪制圖形| |\<dl> |定義列表| \<dt>|\<dd>| 定義列表上層/下層項目| |\<div>| 分檔分區 |\<fieldset>| 表單元素分組| |\<figure> |圖文信息組| \<footer> |區段尾或頁尾| |\<form> |表單 |\<h1~h6> |標題| |\<header>| 區段頭或頁頭 |\<hgroup> |標題組| |\<hr> |水平分割線| \<noscript> |不支持腳本或禁用腳本時顯示的內容| |\<ol>| 有序列表 |\<output>| 表單輸出| |\<p> |行 |\<pre> |預格式化文本| |\<section>| 一個頁面區段 |\<table> |表格| |\<ul> |無序列表| \<video>| 視頻| **內聯元素**：記憶方式（鏈接 a、文本樣式之類 span、small，表單相關 input、 button） 只列出常見的，MDN 上詭異的就不列出來了： - b, big, i, small, tt - abbr, cite, code, em, strong - a, br, img, q, script, span, sub, sup - button, input, label, select, textarea 內聯元素與塊級元素的主要區別： |塊級元素 | 內聯元素 | | --- | --- | |獨占一行,默認情況下，其寬度自動填滿其父元素寬度 |相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化| |可以設置 width，height 屬性 |行內元素設置 width，height 屬性無效| |可以設置 margin 和 padding 屬性 |行內元素起邊距作用的只有 margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。| |對應于 display: block |對應于 display: inline；| > 使用了 display: flex 后行內元素設置上下邊距是有效的，why？ # JS 幀動畫和 CSS3 動畫的比較 - 功能涵蓋面，JS 比 CSS3 大 - 定義動畫過程的 @keyframes 不支持遞歸定義，如果有多種類似的動畫過程，需要調節多個參數來生成的話，將會有很大的冗余，而 JS 則天然可以以一套函數實現多個不同的動畫過程 - 時間尺度上，@keyframes 的動畫粒度粗，而 JS 的動畫粒度控制可以很細 - CSS3 動畫里被支持的時間函數非常少，不夠靈活 - 以現有的接口，CSS3 動畫無法做到支持兩個以上的狀態轉化 - 實現/重構難度不一，CSS3 比 JS 更簡單，性能調優方向固定 - 對于幀速表現不好的低版本瀏覽器，CSS3 可以做到自然降級，而 JS 則需要撰寫額外代碼 - CSS 動畫有天然事件支持（TransitionEnd、AnimationEnd，但是它們都需要針對瀏覽器加前綴），JS 則需要自己寫事件 - CSS3 有兼容性問題，而 JS 大多時候沒有兼容性問題 # 水平垂直居中 ## 水平居中 1.行內元素：父元素設置`text-align: center;` 2.塊級元素：設置`margin: 0 auto;` 3.行內或塊級元素都可用以下方法： - 使用 flex 實現 ```css .son { display: flex; justify-content: center; } ``` - 使用 CSS3 的 transform 屬性，子元素設置如下 ```css .son { position:absolute; left:50%; transform:translate(-50%,0); } ``` ## 垂直居中 1.單行文本：設置`line-height`等于父元素高度 2.多行的行內元素：父元素設置`display:table-cell;`和`vertical-align: middle;` ```css .father { display: table-cell; vertical-align:middle; } ``` 3.使用 flex ```css .father { display: flex; align-items: center; } ``` ## 水平垂直居中 1.設置父元素為相對定位，給子元素設置絕對定位 ```css .father { position: relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } ``` 2.使用 flex ```css .father { display: flex; justify-content: center; align-items: center; } ``` 3.利用位移，用 margin 也行（注意 margin-left 使用百分比是相對于父元素的，而 translate 是相對于元素自身） ```css .father { position: relative; } .son { position: absolute; left: 50%; /* 該百分比相對于父元素 */ top: 50%; transform: translate(-50%, -50%); /* 該百分比相對于元素自身 */ } ``` # 兩側寬度固定、中間寬度自適應的三欄布局 參考鏈接 [https://blog.csdn.net/Cinderella\_hou/article/details/52156333](https://blog.csdn.net/Cinderella_hou/article/details/52156333) [https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout](https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout) [https://www.cnblogs.com/hfdj/p/7554933.html](https://www.cnblogs.com/hfdj/p/7554933.html) [https://www.jianshu.com/p/81ef7e7094e8](https://www.jianshu.com/p/81ef7e7094e8) 解決方案：絕對定位、圣杯布局及雙飛翼布局方案、 flex 方案 <span style="font-size: 20px;">圣杯布局</span> 原理： * 圣杯布局的關鍵點是通過 margin-left 與 left 屬性將左右兩列放置到準確的位置 * 圣杯布局的關鍵點父元素需要設置 padding * 圣杯布局的關鍵點 margin-left 取值為百分比時，是以其父元素的寬度為基準的 縮放瀏覽器能看到自適應效果，分析過程見鏈接1 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三欄自自適應布局</title> </head> <style> body { min-width: 550px; margin: 0; padding: 0; } #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; height: 100vh; } #center { width: 100%; background: red; } #left { width: 200px; margin-left: -100%; position: relative; right: 200px; background: green; } #right { width: 150px; margin-right: -150px; background: blue; } #footer { clear: both; } </style> <body> <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> </body> </html> ``` <span style="font-size: 20px;">雙飛翼布局</span> 雙飛翼布局左中右三列布局，渲染順序中間列書寫在前保證提前渲染，左右兩列定寬，中間列自適應剩余寬度。 雙飛翼布局與圣杯布局的不同之處，圣杯布局的的左中右三列容器，中間middle多了一個子容器存在，**通過控制 middle 的子容器的 margin 或者 padding 空出左右兩列的寬度**。 * 雙飛翼布局的關鍵點是通過 margin-left 屬性將左右兩列放置到準確的位置，通過控制 middle 的子容器的 margin 或者 padding 空出左右兩列的寬度 * 雙飛翼布局的關鍵點父元素不需要設置 padding * 雙飛翼布局的關鍵點 margin-left 取值為百分比時，是以其父元素的寬度為基準的 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三欄自自適應布局</title> </head> <style> body { min-width: 500px; margin: 0; padding: 0; } #container { width: 100%; } .column { float: left; height: 100vh; } #center { margin-left: 200px; margin-right: 150px; background: orange; height: 100vh; } #left { width: 200px; margin-left: -100%; background: greenyellow; } #right { width: 150px; margin-left: -150px; background: skyblue; } #footer { clear: both; } </style> <body> <div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> </body> </html> ``` > 我感覺 float 布局就是玄學吧....... <span style="font-size: 20px;">使用 flex </span> ```html <!-- DOM結構 --> <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> ``` ```css #container { display: flex; } #center { flex: 1; // 1 1 auto } #left { flex: 0 0 200px; order: -1; } #right { flex: 0 0 150px; } ``` # 隱藏元素的幾種方式及其區別 [參考文章](http://www.divcss5.com/jiqiao/j50687.shtml) 1.`display: none;` 會移除 DOM（不占據頁面空間），觸發回流與重繪 2.`visibility: hidden;` 不會移除 DOM，只會觸發重繪不會觸發回流 3.`opacity: 0;` 不會移除 DOM，只觸發重繪不會觸發回流 其還有如下一些差異性： | 方案 | 事件綁定 | 動畫屬性 | | :---- | :---- | :---- | | display: none | 綁定的事件不再生效 | 定義 transition 無效 | | visibility: hidden | 元素不再觸發綁定的事件 | 會在 transition 設置的時間內消失，但是沒有動畫效果 | | opacity: 0 | 元素仍然會觸發綁定的事件 | 與正常元素一樣有動畫效果 | # calc 方法的使用 calc 是 CSS3 中新增的一個方法，可以通過該方法來自動計算元素的寬度、高度等數值類型的樣式屬性值。可以使用 calc() 給元素的 border、margin、pading、font-size 和width 等屬性設置動態值。 運算規則： - 使用“+”、“-”、“*” 和 “/”四則運算； - 可以使用百分比、px、em、rem等單位； - 可以混合使用各種單位進行計算； - 表達式中有“+”和“-”時，其前后必須要有空格，如 `widht: calc(12%+5em)` 這種沒有空格的寫法是錯誤的； - 表達式中有 '*' 和 '/' 時，其前后可以沒有空格，但建議留有空格。 可以用來處理“元素撐破容器”和一些自適應布局的情況 # 媒體查詢 ***** 語法：@media 設備類型 and （設備特性） {樣式代碼} 常用的設備類型 | 取值 | 描述 | | --- | --- | |all| 用于所有設備| |print| 用于打印機和打印預覽| |screen| 用于電腦屏幕，平板電腦，智能手機等。| |speech| 應用于屏幕閱讀器等發聲設備| 常用的設備特性（大部分接受 min / max 前綴，用來表示大于等于或小于等于的邏輯，以避免使用 < > 這些字符） |特性 |可指定值 |是否允許 min / max 前綴| 特性說明| | :---- | :---- | :---- | :---- | |width |帶單位的長度數值如 px| 允許| 瀏覽器窗口的寬度| |height| 同上| 允許 |瀏覽器窗口的高度| |device-width| 同上 |允許| 設備屏幕分辨率的寬度值| |device-height| 同上| 允許| 設備屏幕分辨率的高度值| |orientation| portrait \| landscape |不允許| 瀏覽器窗口的方向是縱向還是橫向，當窗口的高度值大于寬度值時該特性為 portrait,否則為 landscape| 使用 and 關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式 ```css @media screen and (max-width: 639px) {…} // 指定了當設備窗口寬度小于 640px 時的樣式 ``` 可以使用多條語句來將同一個樣式應用于不同的設備類型和設備特性中 ```css @media handheld and (min-width:360px), screen and (min-width:480px) {…} ``` 可以在表達式中加上 not 關鍵字或 only 關鍵字，not 關鍵字表示對后面的表達式執行取反操作 ```css @media not handheld and (color) {…} // 樣式代碼將被使用在除便攜設備之外的其他設備或非彩色便攜設備中 @media all and (not color) {…} // 樣式代碼將被使用在所有非彩色設備中 ``` 可以支持對外部樣式表的引入 ```css @import url(color.css) screen and (min-width: 1000px); <link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="style.css" /> ```