前端那些事二（CSS）

1. Flex佈局（彈性佈局，默認主軸，交叉軸，講下flex: 1）

2. flex佈局是一種彈性佈局，將容器設置爲flex佈局後，float,clear,vertical-align將會失效，容器默認有兩個軸（主軸，垂直交叉軸），默認沿主軸排列。

3. 說下flex有哪些屬性

外層容器屬性：

flex-direction：控制主副軸 【軸向】

flex-wrap：控制換行(默認不換行)

flex-flow：是上兩個的結合，簡寫

justify-content：主軸對齊方式 【對齊】

align-items：交叉軸對齊方式

align-content：多個軸線對齊

flex： 【彈性】

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <flex-direction> <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子項目屬性：

order：0 越小越靠前。

flex-grow：1 等分空間

flex-shrink：1 縮小比例

flex-basis: auto

flex 上面三個的縮寫

align-self 對齊方式

1. 使用flex實現垂直居中

2. justify-content:center+align-items:center實現水平垂直居中排列

3. flex: 1

4. flex: 1是flex-grow、flex-shrink、flex-basis的縮寫，等分大小

5. 使用flex實現九宮格

6. 響應式佈局

7. 你知道哪幾種響應式佈局的方式

• 媒體查詢
• 百分百
• rem
• UI框架

1. 塊元素有哪些

2. 說下塊元素和行內元素的區別和特色

• 塊級元素會獨佔一行，默認狀況下，其寬度自動填滿其父元素寬度
• 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏

1. 知道哪些空元素 (相似於img這樣的單標籤元素)

br、meta、hr、link、input、img

1. css中有哪些屬性是能夠繼承的

• 不可繼承的：display、baimargin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
• 全部元素可繼承：visibility和cursor。
• 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
• 塊狀元素可繼承：text-indent和text-align。
• 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。
• 表格元素可繼承：border-collapse。

1. 瞭解css的動畫嗎？說下transform

• 2D：translate(x,y)平移，scale(x[,y]?)縮放，rotate(angle)旋轉
• 3D：translate3d(x,y,z)，scale3d(x,y,z)，rotate3d(x,y,z,angle)

1. CSS3新特性，僞類，僞元素，錨僞類

2. 增長不少選擇器：（E:nth-child(n)，E:last-child:，E:disabled，E:checked）
3. CSS3動畫相關：Transition過渡，Transform變換（3D旋轉）和Animation動畫
4. 邊框，陰影，圓角，背景（background-size）
5. 文字效果（word-wrap，多行顯示省略號）
6. 漸變（linear-gradient，radial-gradient）
7. 盒模型

常見僞類：:focus、:hover、:link、visited、:first-child等；單冒號；僞類的概念

常見僞元素：::after、::before等（單冒號爲了兼容IE，是CSS2的語法）。雙冒號；用於建立不存在的DOM樹元素。

錨僞類：用來表示連接的狀態，順序：a:link - a:visited - a:hover - a:actived。

1. css垂直居中的n種方法

• 寬高不定，水平垂直居中：

  • 絕對定位+transform：

position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);

• flex佈局：（主軸居中，交叉軸居中）

display: flex;justify-content:center;align-items:center;

• 父元素設置display: table-cell+vertical-align: middle實現

• 寬高固定：

  • 絕對定位+margin:auto

position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;

• 絕對定位+margin負間距水平垂直居中

position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-right: -50px;

• line-height：針對單行文本

1. 盒模型哪兩種模式？什麼區別？如何設置

• 標準模式: box-sizing: content-box; 寬高不包括內邊距和邊框
• 怪異模式: box-sizing: border-box（IE）

1. 請談談對px、em、rem、vh、wh等單位的理解。你還用過哪些單位

• px，若是顯示器屏幕分辨率相同則可看作是絕對單位，若是顯示器屏幕分辨率不一樣則相對於顯示器屏幕分辨率。
• em，相對於該元素font-size屬性值，因爲font-size是可繼承屬性，所以若是該元素未被顯式設置font-size屬性值，則會繼承該元素的父元素的font-size值，若是該元素的父元素也未顯式設置font-size屬性值… …最終繼承自根元素（HTML元素），若是根元素也沒有被顯示設置font-size屬性值，則使用用戶代理默認的font-size屬性值。
• rem，root em, 是CSS3新增的一個相對單位，與em的區別在於：使用rem爲元素設置font-size屬性值時，僅相對於根元素（HTML元素）。
• vh，viewpoint height，視窗高度，1vh等於視窗高度的1%。
• vw，viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
• in，pt

1. 說下rem,em,px的區別

• rem相對於根元素（html）
• em相對於最近一個設置字體大小的父元素
• px絕對單位，相對於顯示器分辨率

1. 說下rem的實現

• rem相對於根元素（html），移動端設置html的font-size: calc(100vw / 7.5);

1. 如何解決不一樣瀏覽器的樣式兼容性問題？

• 在肯定問題緣由和有問題的瀏覽器後，使用單獨的樣式表，僅供出現問題的瀏覽器加載。這種方法須要使用服務器端渲染。
• 使用已經處理好此類問題的庫，好比 Bootstrap。
• 使用 autoprefixer 自動生成 CSS 屬性前綴。
• 使用 Reset CSS 或 Normalize.css。

1. display: none與 visibility：hidden的區別：

2. display: none與 visibility：hidden雖然都是隱藏元素。但前者是使元素從dom結構中消失，後者是dom中依然存在只是不在界面顯示。所以前者爲迴流（須要改變dom結構），後者爲重繪。

3. CSS優先級

• !improtant的優先級最高
• 行內樣式
• id>class
• 優先級相同時，選擇寫在後面的樣式
• 總結：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

improtant影響哪些，權重值

• 元素選擇符： 1 div{ }
• class選擇符： 10 .class{ }
• id選擇符：100 #id{ }
• 內聯樣式：1000 style="..."
• !important聲明的樣式優先級最高，該樣式聲明會覆蓋CSS中任何其餘的聲明，使用 !important 不是一個好習慣，由於它改變了你樣式表原本的級聯規則，從而難以調試。要優化考慮使用樣式規則的優先級來解決問題而不是 !important。

1. base64圖，優缺點

base64編碼能夠將圖片添加到css中，實現css請求下載圖片。

優勢：減小圖片請求，（雪碧圖也能夠減小請求）

缺點：圖片的加載會影響css文件大小比源文件大1/3，且IE8如下不兼容。

1. 性能優化：骨架屏

骨架屏能夠理解爲是當數據還未加載進來前，頁面的一個空白版本，在頁面徹底渲染完成以前，用戶會看到一個樣式簡單，描繪了當前頁面的大體框架的骨架屏頁面，而後骨架屏中各個佔位部分被實際資源徹底替換，這個過程當中用戶會以爲內容正在逐漸加載即將呈現，下降了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

骨架屏實現原理很簡單，就是經過佔位線框元素，漸進式加載數據。

骨架屏是結合了懶加載功能，在頁面沒有加載完成以前，先呈現頁面基本結構。

1. 什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是形成這個問題的罪魁禍首。

IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

解決方法：只要在<head>之間加入一個<link>或者<script>元素就能夠了。

1. 什麼是bfc，如何建立bfc？那些能夠建立BFC?

BFC(Block formatting context)直譯爲"塊級格式化上下文"。

1. 建立BFC來避免垂直外邊距疊加，邊界崩塌
2. 建立BFC來清除浮動
3. 建立BFC來實現自適應佈局

absolute fixed inline-block table overflow

1. 迴流和重繪（爲何要儘可能減小），頁面渲染

• 迴流：影響頁面佈局時會發生迴流
• 重繪：不影響頁面佈局，
• 迴流：DOM結構的增刪改
• 重繪: 顏色,背景, 字體等視覺上頁面的改變

爲何要減小：

迴流必定會觸發重繪，重繪不必定觸發迴流，當頁面很大的時候，迴流時會從新加載頁面。

---

css3新特性：https://juejin.im/entry/6844903486618861575