前端知識總結（二）--CSS相關

一、兩種CSS盒模型？

在使用CSS進行佈局和設計時，全部的HTML元素均可以看做一個盒子模型，包括外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。以下圖

• 標準盒模型（box-sizing: content-box）與怪異（IE）盒模型（box-sizing: border-box）的區別：前者content的寬度/高度不變，後者的content的寬度/高度把padding和 border部分也計算進去。

二、水平居中的方法？

• 元素爲行內元素，設置父元素text-align: center
• 若是元素寬度固定，能夠設置左右margin: 0 auto;
• 若是元素爲絕對定位，設置父元素position: relative，元素設left: 0；right: 0；margin: auto;
• 使用flex-box佈局，指定justify-content: center；
• display設置爲tabel-ceil；

三、垂直居中的方法？

• 使用display: flex佈局，用align-item: center實現；
• 絕對定位中設置top: 0和bottom: 0，margin: 0 auto實現；
• 絕對定位中固定高度時設置top:50%，margin-top值爲高度一半的負值；
• 文本垂直居中設置line-height爲height值。

四、flex佈局的用法和經常使用屬性？

flex佈局即彈性佈局，能夠經過display: flex來設置一個彈性容器，容器內的子元素會根據設置的屬性進行排列；

經常使用的屬性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

詳見www.runoob.com/w3cnote/fle…

五、BFC規範？

塊格式化上下文(Block Formatting Context，BFC)是Web頁面中盒模型佈局的CSS渲染模式。它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用，主要體如今浮動清除、浮動定位和阻止父子元素的margin摺疊。

建立規則：

• 根元素

• 浮動元素（float不取值爲none）

• 絕對定位元素（position取值爲absolute或fixed）

• display取值爲inline-block、table-cell、table-caption、flex、inline-flex之一的元素

• overflow不取值爲visible的元素

六、清除浮動的方法

經常使用的方法有:

• overflow: hidden或者overflow: auto;
• 在浮動元素以後添加一個空元素如<div class="clear"></div>，經過CSS賦予clear: both；
• 給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素清除浮動。

總結：要麼使用clear屬性，要麼觸發浮動元素父元素的BFC，使父元素能夠包含浮動元素。

七、CSS優先級？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準；
• 載入樣式以最後載入的定位爲準；
• 優先級爲: !important > 行內樣式 > id > class > tag > 通配符 > 系統默認;

八、LESS和Sass?

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助Node.js);

而Sass 是一款強化CSS的輔助工具，它在CSS語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令CSS 更增強大與優雅。使用Sass以及Sass的樣式庫（如 Compass)有助於更好地組織管理樣式文件，以及更高效地開發項目。須要Ruby環境

九、CSS3的animation？

animation是css3新增的動畫屬性，這個css3動畫的每一幀是經過@keyframes來聲明的，keyframes聲明瞭動畫的名稱，經過from、to或者是百分比來定義。