導讀CSS盒子模型1.盒模型分為標準盒模型和怪異盒模型(IE模型)2.box-sizing：content-box//標準盒模型3.box-sizing：bor....CSS盒子模型

1. 盒模型分為標準盒模型和怪異盒模型(IE模型)

2. box-sizing：content-box //標準盒模型

3. box-sizing：border-box //怪異盒模型

4. 標準盒模型：元素的寬度等于style里的width margin border padding寬度

如下代碼，整個寬高還是120px

div{ box-sizing: content-box; margin: 10px; width: 100px; height: 100px; padding: 10px;}

5. 怪異盒模型：元素寬度等于style里的width寬度

如下代碼，整個寬高還是100px

div{ box-sizing: border-box; margin: 10px; width: 100px; height: 100px; padding: 10px;}

注意：如果你在設計頁面中，發現內容區被撐爆了，那么就先檢查一下border-sizing是什么，最好在引用reset.css的時候，就對border-sizing進行統一設置，方便管理

rem與em的區別

1. rem是根據根的font-size變化，而em是根據父級的font-size變化

2. rem：相對于根元素html的font-size，假如html為font-size：12px，那么，在其當中的div設置為font-size：2rem,就是當中的div為24px

3. em：相對于父元素計算，假如某個p元素為font-size:12px,在它內部有個span標簽，設置font-size：2em,那么，這時候的span字體大小為：12*2=3D24px

CSS常用選擇器

1. 通配符：*

2. ID選擇器：#ID

3. 類選擇器：.class

4. 元素選擇器：p、a 等

5. 后代選擇器：p span、div a 等

6. 偽類選擇器：a:hover 等

7. 屬性選擇器：input[type=3D”text”] 等

css選擇器權重

!important -> 行內樣式 -> #id -> .class -> 元素和偽元素 -> * -> 繼承 -> 默認

CSS新特性

1. transition：過渡

2. transform：旋轉、縮放、移動或者傾斜

3. animation：動畫

4. gradient：漸變

5. shadow：陰影

6. border-radius：圓角

絕對定位和相對定位的區別

1. position: absolute絕對定位：是相對于元素最近的已定位的祖先元素

2. position: relative相對定位：相對定位是相對于元素在文檔中的初始位置

水平垂直居中

1. flex布局

1). display: flex //設置Flex模式

2). flex-direction: column //決定元素是橫排還是豎著排

3). flex-wrap: wrap //決定元素換行格式

4). justify-content: space-between //同一排下對齊方式，空格如何隔開各個元素

5). align-items: center //同一排下元素如何對齊

6). align-content: space-between //多行對齊方式

2. 水平居中

1). 行內元素：display: inline-block;

2). 塊級元素：margin: 0 auto;

3). Flex: display: flex; justify-content: center

3. 垂直居中

1). 行高 =3D 元素高：line-height: height

2). flex: display: flex; align-item: center

2.8. Less,Sass,Styus三者的區別

1. 變量

1). Sass聲明變量必須是『$』開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號：分隔開。

2). Less 聲明變量用『@』開頭，其余等同 Sass。

3). Stylus 中聲明變量沒有任何限定，結尾的分號可有可無，但變量名和變量值之間必須要有『等號』。

2. 作用域

1). Sass：三者最差，不存在全局變量的概念

2). Less：最近的一次更新的變量有效，并且會作用于全部的引用！

3). Stylus：Sass 的處理方式和 Stylus 相同，變量值輸出時根據之前最近的一次定義計算，每次引用最近的定義有效；

3. 嵌套

三種 css 預編譯器的「選擇器嵌套」在使用上來說沒有任何區別，甚至連引用父級選擇器的標記 & 也相同

4. 繼承

Sass和Stylus的繼承非常像，能把一個選擇器的所有樣式繼承到另一個選擇器上。使用『@extend』開始，后面接被繼承的選擇器。Stylus 的繼承方式來自 Sass，兩者如出一轍。 Less 則又「獨樹一幟」地用偽類來描述繼承關系；

5. 導入@Import

6. Sass 中只能在使用 url() 表達式引入時進行變量插值

$device: mobile;@import url(styles.#{$device}.css);

7. Less 中可以在字符串中進行插值

@device: mobile;@import "styles.@{device}.css";

8. Stylus 中在這里插值不管用，但是可以利用其字符串拼接的功能實現

device = "mobile"@import "styles." device ".css"

9. 總結

1). Sass和Less語法嚴謹、Stylus相對自由。因為Less長得更像 css，所以它可能學習起來更容易。

2). Sass 和 Compass、Stylus 和 Nib 都是好基友。

3). Sass 和 Stylus 都具有類語言的邏輯方式處理：條件、循環等，而 Less 需要通過When等關鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus

4). Less 在豐富性以及特色上都不及 Sass 和 Stylus，若不是因為 Bootstrap 引入了 Less，可能它不會像現在這樣被廣泛應用

link與@import區別與選擇

<style type="text/css"> @import url(CSS文件路徑地址);</style><link href="CSSurl路徑" rel="stylesheet" type="text/css" />

1). link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css；

2). 當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載；

3). @import需要 IE5 以上才能使用；

4). link可以使用 js 動態引入，@import不行

多行元素的文本省略號

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical

什么是BFC?

BFC全稱 Block Formatting Context 即塊級格式上下文，簡單地說，BFC是頁面上的一個隔離的獨立容器，不受外界干擾或干擾外界

如何觸發BFC

1. float不為 none

2. overflow的值不為 visible

3. position 為 absolute 或 fixed

4. display的值為 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染規則是什么

1. BFC是頁面上的一個隔離的獨立容器，不受外界干擾或干擾外界

2. 計算BFC的高度時，浮動子元素也參與計算（即內部有浮動元素時也不會發生高度塌陷）

3. BFC的區域不會與float的元素區域重疊

4. BFC內部的元素會在垂直方向上放置

5. BFC內部兩個相鄰元素的margin會發生重疊

BFC的應用場景

1. 清除浮動：BFC內部的浮動元素會參與高度計算，因此可用于清除浮動，防止高度塌陷

2. 避免某元素被浮動元素覆蓋：BFC的區域不會與浮動元素的區域重疊

3. 阻止外邊距重疊：屬于同一個BFC的兩個相鄰Box的margin會發生折疊，不同BFC不會發生折疊

2.15. CSS3有哪些新特性？

1. 圓角 （border-radius:8px）

2. 新增各種CSS選擇器、偽類 （經常用到 :nth-child）

3. 文字渲染 （Text-decoration）

4. 轉化為簡寫屬性，可設置text-decoration-color, text-decoration-style, text-decoration-line三個屬性，默認值為currentcolor solid none。

5. 透明色 & 透明度（opacity）

6. 旋轉 （transform）

7. 旋轉 rotate，縮放 scale，傾斜 skew，平移 translate

8. 動畫(animation) & 過渡效果(transition)

9. 陰影（box-shadow, text-shadow）

10. 新的布局方式，如 多列布局 multi-columns 、 彈性布局 flexible box 與 網格布局 grid layouts

11. 線性漸變（gradient）

12. 多背景（background-image可以設置多個url或linear-gradient）

13. 媒體查詢(@media MDN) (可以看看這個)

14. 邊框可以設置圖片（border-image）

說一下CSS3的flex box（彈性盒布局模型）

1. 什么是flex box?

1). CSS3新增布局。

2). Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。

3). 較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現。

4). 采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。

5). 它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

6). 常規布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流可以很方便地用來做局中，能對不同屏幕大小自適應。

7). 在布局上有了比以前更加靈活的空間。

2. 應用場景?

1). 水平垂直居中

2). 一邊定寬，一邊自適應

3). 多列等分布局

4). sticky footer

用純CSS創建一個三角形的原理是什么？

div { width: 0; height: 0; /* div里沒內容，可不寫 */ border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;}/* 或者這樣寫 */div { width: 0; border: 100px solid transparent; border-bottom-color: #343434;}