[TOC]
# 題1、元素浮動時，外層元素會收縮，如何解決？
答： 1. 設置父元素： overflow: hidden;
2.添加一個空的 div ，并設置為 clear: both;
3.偽類
~~~css
.clearfix::after {
content: "";
divplay: "block";
clear: both;
}
~~~
# 題2、CSS 隱藏一個元素有幾種辦法？
答：1.dispaly：none; (不占位)
2.visibility:hidden; （占位）
3.opacity: 0; (占位)
4.定位到屏幕外面
~~~css
position: relative;
left: -2000;
~~~
# 題3、如何讓一個盒子水平垂直居中？
答： 定位 + 平移。
~~~css
.box {
// 讓盒子的左上角居中
position: absolute;
left: 50%;
top: 50%;
// 向上、左平移自身的50%
transform: translate(-50%,-50%);
}
~~~
# 題4、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊div為400，瀏覽器為900，右邊div為800），如何實現？
答： 設置左邊寬100px并向左浮動即可，下面的 div 自動會向右布滿。
# 題5、如何實現一個滿屏的品字布局？
答：放三個 div，高度都是50%，然后讓第二個 div，寬度 50% 并且向左浮動即可。
注意：要先設置 html 和 body 的 height 位 100%，否則沒有高度。
# 題6、在一個 div 中有兩個 div 垂直排列，上面的 div 高度 100px，如何讓下面的 div 鋪滿剩余空間？
答： 設置下面的元素絕對定位，并設置 top:100px;bottom: 0;
# 題7、CSS 選擇器有哪些？
答： id選擇器，如： #id
類選擇器，如： .class
標簽選擇器，如： span
通配符選擇器， *
包含選擇器， p a
父子選擇器， p>a
分組選擇器， p,a
交集選擇器， p.clear
偽類選擇器， a::hover
偽元素選擇器， .clear::after
兄弟選擇器， div~ul
屬性選擇器，[href^="http"]
等等
# 題8、哪些屬性可以繼承？
答： font-開頭
text-開頭
color
opacity
cursor
visibility
line-height
white-space
等等
# 題9、盒模型和哪些部分組成？box-sizing 兩個重要屬性值是什么？含義是什么？
答：
盒模型組成： （內->外）width、height、padding、border、margin
box-sizing: 影響盒子占用寬高的計算方式
content-box; （默認）
border-box;
content-box：實際寬 = width + 左右內邊距 + 左右邊框
```
.box {
width: 100px;
padding: 5px;
border: 1px solid red;
box-sizing: content-box;（默認）
}
最終寬度= 100 + 2*5 + 2*1 = 112px
```
border-box：實際寬= width
```
.box {
width: 100px;
padding: 5px;
border: 1px solid red;
box-sizing: border-box;
}
最終寬度= 100px
```
# 題10、 CSS 的優先級是如何計算的？
答： !important > 內聯樣式 > #id > .class選擇器 > 標簽選擇器
如果優先級相同，那么后面的會覆蓋前面的。
# 題11、行級元素、塊級元素、行級塊元素分別有什么特點？如何使用 display 來設置？
答：
~~~css
display: block; // 塊級元素
display: inline-block; // 行級塊
display: none; // 隱藏，不占位
display: flex; // flex 布局
~~~
# 題12、 position 屬性有幾個值？分別的特點是什么？
答：
stativ（默認，靜態定位）：正常文檔流，從上向下，從左向右，依次顯示。
absolute（絕對）：脫離文檔流（飛起來）。可以 left、top、bottom、right 來設置坐標定位。定位進先找它上級中的相對定位的元素，如果有就相對這個元素定位。如果上面沒有相對定位的元素，那么它就相對于瀏覽器的邊緣定位。
relative（相對）：不脫離文檔流（原位置保留）。可以 left、top、bottom、right 來設置坐標。定位是相對于它原來文檔流中的位置定位。
fixed（固定）：脫離文檔流（飛起來）。可以 left、top、bottom、right 來設置坐標定位。它就相對于瀏覽器的邊緣定位。不會隨頁面滾動而滾動，定在屏幕上不動。
# 題13、 CSS3 中有哪些新特性？對應的屬性名稱是什么？
答：
動畫 animation
過渡 transition
轉換 transform
陰影 box-shadow
弧度 border-radius
漸變色
flex 布局
等等
# 題14、什么是外邊距合并？
答：
1. 上下兩個標簽的 margin 會合并成最大的值。比如，上面 div 向下外邊距50px，下面 div 向上外邊距 10 px ，最后兩個元素的外邊距為 50px （合并成外邊距最的大的，不是 60px）
2. 父子元素，子元素的向上外邊距會被合并加到父元素的上外邊距
# 題15、如何使用 CSS 創建一個三角形？
答：
1. 放一個 div
2. 設置這個 div 的寬高為 0
3. 設置四個邊框，其中三個邊框顏色透明 （transparent），剩下的邊框就是三角形
# 題16、什么是媒體查詢？通過哪個屬性可以實現？
答：可以根據瀏覽器的尺寸來設置不同的樣式。使用 `@media` 屬性來實現。
# 題17、如何實現屏幕在375px 以下時背景色是灰色，375px~750px 時背景色是紅色，750px以上時背景色是綠色。
答：
```
/* 375 以下 */
@media screen and (max-width: 375px) {
body {
background-color: gray;
}
}
@media screen and (min-width: 375px) and (max-width: 750px) {
body {
background-color: red;
}
}
/* 750以上 */
@media screen and (min-width: 750px) {
body {
background-color: green;
}
}
```
# 題18、使用過 CSS 的預處理器嗎？
答：常用的三種：less、sass、stylus。
# 題19、style 寫在 body 前和寫在 body 后有什么區別？
答： styles 都要寫在前面。因為，頁面是從上向下解析的，如果把 styles 寫在后面，就會導致先渲染一遍 HTML 頁面，渲染完之后再渲染 CSS ,會導致前面已經渲染頁面內容再重新根據樣式再渲染一次。
# 題20、 overflow 屬性有幾個值？分別含義是什么？
答：overfflow：用來控制一個標簽中的內容超出范圍時如何顯示。
值：
visible:默認，超出的直接顯示。
auto：超出的有滾動條
hidden:超出的隱藏。
scroll：左右都有滾動條、
scroll-x：X軸有滾動條
scroll-y：Y軸有滾動條
# 題21、什么是精靈（雪碧）圖？干什么用的？
答：把多個小圖標放到一起制作成一張圖片來使用。
目的：減少圖片下載的次數（減少和服務器連接次數）。比如：有20個小圖標，分別下載需要連接服務器 20 次來下載，制作成一張圖片就只需要連接下載一次。
用法：1. 先放一個標簽，讓這個標簽的寬、高只夠顯示一個圖標的尺寸
\2. 讓雪碧圖做為這個標簽的背景圖
\3. 通過 background-position 來調背景圖上的位置 ，以顯示不同的圖標
# 題22、浮動用哪個屬性？浮動有幾種？
答：float。 浮動兩種：float:left;（左浮動） , float:right（右浮動）
# 題23、清除用哪個屬性？有幾種值？為什么要使用清除？
答：屬性：clear。
值：clear: left; （清除左浮動）
clear: right: (清除右浮動）
clear: both; （同時清除左右浮動）
使用清除的原因：當一個元素浮動之后，就會脫離文檔流，就會導致：1. 父元素坍塌 2. 后面的元素向前補位導致頁面亂了。所以需要清除浮動對父和后面元素的影響。
# 題24、為什么在制作頁面前要進行樣式的初始化？
答：不同的瀏覽器中默認的樣式是不一樣的，所以為了統一樣式，我們需要在制作頁面之前先對默認樣式進行初始化。
