1、什麼是盒子模型？
在網頁中，乙個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
2、css選擇符有哪些?哪些屬性可以繼承?
id選擇器（ # myid）
類選擇器（.myclassname）
標籤選擇器（div， h1， p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
萬用字元選擇器（*）
屬性選擇器（a[rel = 「external」]）
偽類選擇器（a:hover， li:nth-child）
可繼承的樣式： font-size font-family color
不可繼承的樣式：border padding margin width height ；
3、css優先順序演算法如何計算?
優先順序就近原則，同權重情況下樣式定義最近者為準。
載入樣式以最後載入的定位為準。
優先順序為：!important > id > class > tag important比內聯優先順序高
4、css3新增偽類有那些?舉例：
p:first-of-type 選擇屬於其父元素的首個 p元素的每個 p元素。
p:last-of-type 選擇屬於其父元素的最後 p元素的每個 p元素。
p:only-of-type 選擇屬於其父元素唯一的 p元素的每個 p元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 p元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 p元素。
:after 在元素之前新增內容，也可以用來做清除浮動。
:before 在元素之後新增內容
:enabled 控制表單可用
:disabled 控制表單控制項的禁用狀態。
:checked 單選框或核取方塊被選中。
5、display有哪些值?說明他們的作用。
block：像塊型別元素一樣顯示。
none：元素隱藏
inline-block：像行內元素一樣顯示，但其內容像塊型別元素一樣顯示。 一般很少用到
list-item：像塊型別元素一樣顯示，並新增樣式列表標記。
table：此元素會作為塊級**來顯示
inherit：規定應該從父元素繼承 display屬性的值
6、position包含幾種屬性?absolute和relative的區別?
static：預設狀態、沒有定位、正常流
inherit：從父元素整合position屬性的值
fixed：生成絕對定位的元素(相對於瀏覽器視窗進行定位)
absolute：生成絕對定位的元素(相位與static定位以外的第乙個父元素定位)
relative：生成相對定位的元素(相對於其正常位置定位)
absolute和relative區別：父元素的padding對relative的子元素布局有影響，absolute的子元素不受影響
7、css3有哪些新特性?
圓角：（border-radius:8px）
多列布局：（column-count/column-gap/column-rule） 不用，本身有bug
陰影和反射：（shadow\reflect）
文字特效：（text-shadow）
文字陰影文字渲染：（text-decoration）
下劃線之類的線性漸變（gradient）
轉換 （transform）
過渡（transition）
動畫（animation）
8、浮動元素引起的問題和解決辦法?
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若非第乙個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決辦法:
（1）使用空標籤清除浮動。弊端就是增加了無意義標籤。
style=「clear:both;
（2）使用overflow。給包含浮動元素的父標籤新增css屬性 overflow:auto
（3）使用after偽類：
#parent:after
9、css sprite是什麼，有什麼優缺點。
概念：將多個小拼接到乙個中。通過background-position和元素尺寸調節需要顯示的背景圖案。
優點：減少http請求數，極大地提高頁面載入速度。增加資訊重複度，提高壓縮比，減少大小。更換風格方便，只需在一張或幾張上修改顏色或樣式即可實現。
缺點：合併麻煩，維護麻煩，修改乙個可能需要從新布局整個，樣式。
10、如何通過css 實現元素的垂直水平居中？注意：前提是元素沒有固定的寬高
（實現方法有多種，以下是其中一種）
.ele
11、px和em的區別
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
12、display與visibility有何異同？
display可以有很多值，visibility只有兩個常用值：visible、hidden。
當display為none、visibility為hidden時都會隱藏元素。但display會隱藏掉元素空間，visibility會保留元素空間。
13、什麼是響應式設計?響應式設計的基本原理是什麼?
響應式設計就是為了實現根據不同裝置環境自動響應及調整網頁布局的一種設計方案。基本原理就是利用css的**查詢功能更具不同螢幕的大小，向下相容裝置、移動優先，達到響應的效果。
14、響應式布局的原理?
meta標籤定義：
使用 viewport meta 標籤在瀏覽器上控制布局
meta name=「viewport」 content=「width=device-width，initial-scale=1，maximumscale=1」 />
使用**查詢media queries適配對應樣式：
@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}
百分比布局：寬度不固定，可以使用百分比
#head
#content
響應式#wrap img
字型設定
乙個響應式的字型應關聯它的父容器的寬度，這樣才能適應客戶端螢幕。css3引入了新的單位叫做rem，和em類似，但相對於html元素，rem更方便使用，而em是相對於父級元素的：
html
完成後，可以定義響應式字型：
@media (min-width:640px)}
@media (min-width:960px)}
@media (min-width:1200px)}
前端開發常見面試題
1.盒子模型 所謂盒子模型 box model 就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。2.html5新特性 3.div垂直水平居中 child 1 f...
CSS常見面試題
1.盒子模型有幾種型別，區別是什麼 標準盒模型 寬度 內容的寬度 content padding border margin ie低版本盒模型 寬度 內容的寬度 content padding border margin 2.box sizing屬性 content box 內容的寬度是conten...
前端常見面試題一
js事件委託就是利用冒泡的原理，把本應該新增到某個元素上的事件委託給他的父級，從而減少dom互動達到網頁優化 var ulobj document.getelementbyid list ulobj.onclick function e nodename 屬性可依據節點的型別返回其名稱。如果節點是乙...