1.介紹一下標準的css的盒子模型？低版本IE的盒子模型有什么不同標準模型由四部分組成：
內(nèi)容區(qū)域: 可以放置元素的區(qū)域如文本,圖像等，一般設置寬高指的是這個內(nèi)容的寬高內(nèi)邊距的區(qū)域：
內(nèi)容與邊框之間的距離邊框區(qū)域: 邊框外邊框區(qū)域：
由外邊框限制，用空白區(qū)域擴展邊框區(qū)域，開分開相鄰的元素模型區(qū)分：
標準表型指的是設置box-sizing為content-box的盒子模型，一般width,height指的是content的寬高。
IE盒模型指的是box-sizing為border-box的盒子。
寬高的計算是content+padding+border;
專題推薦：
2020年CSS面試題匯總（最新）2. CSS選擇符有哪些？那些屬于可以繼承？id選擇器(#myid)類選擇器(.myclassName)標簽選擇器(p,h1,p)子代選擇器(ul>li)后代選擇器(li a)通配符選擇器(*)屬性選擇器(a[rel="external"])偽類選擇器(a:hover,li:nth-child)可繼承的樣式：
font-size font-family color不可繼承的樣式：
border padding margin height width3. css優(yōu)先級如何計算?優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近這位準載入樣式以最后載入的定位為準優(yōu)先級為：
同權(quán)重：
內(nèi)聯(lián)樣式(標簽內(nèi)部)> 嵌入樣式表(當前文件中)>外部樣式(外部文件中)!important >id >class >tag!important 比內(nèi)聯(lián)優(yōu)先級高4. display有哪些值？說明他們的作用block 塊類型。
默認寬度為父元素寬度，可設置寬高，換行顯示none 元素不顯示，并從文檔流中移除inline 行內(nèi)元素，默認寬度為內(nèi)容寬度，不可設置寬高，同行顯示inline-block 默認寬度為內(nèi)容寬度，可以設置寬高，同行顯示list-item 像塊類型元素一樣，可以設置寬高，同行顯示table 此元素會作為會計表格來顯示inherit 規(guī)定應該從父元素繼承display屬性的值5. position的值releave和absolute定位遠點是？absolute 生成絕對定位元素，相對與值部位static的第一個父元素進行定位fixed 生成絕對的元素，相對于瀏覽器窗口進行定位relative 生成相對定位的元素，相對于其正常位置進行定位static 默認值。
沒有定位，元素出現(xiàn)在正常出現(xiàn)的流中inherit 規(guī)定從父元素繼承position屬性的值6. css有哪些特性?過渡 transition-property:width transition-duration:1s transition-timing-function:linear transition-delay:2s動畫animation:動畫名稱，一個周期花費時間,云頂曲線(默認ease),動畫延遲(默認0),動畫播放次數(shù)(默認1),是否反向播放動畫(默認normal),是否暫停動畫(默認running)形狀轉(zhuǎn)換transform: 使用于2D或3D轉(zhuǎn)換的元素 transform-origin: 裝換元素的位置(圍繞哪個點進行裝換).默認(x,y,z);
選擇器陰影box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始的方向(默認是從里向外，設置inset就是從外往里)邊框圖片border-image: 設置圖片路徑 設置邊框背景圖的分割方式 設置或檢索對象的邊框厚度 設置或檢索對象的邊框背景圖向外擴展 設置邊框圖片的平鋪方式邊框圓角 border-radius: n1 n2 n3 n4;
/* n1-n4 四個值得順序是左上角，右上角，右下角，左下角 */反射(倒影)box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩圖片文字換行 word-break:normal(默認使用瀏覽器默認的換行規(guī)則)|break-all(允許在單詞內(nèi)換行)|keep-all(只能在半角空格或連字符處換行)超出省略號overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
多行省略號overflow:hiden;
text-overflow:ellipsis;
用省略號"..."隱藏超出范圍的文本 display:-webkit-box;
//將對象作為彈性伸縮盒子模型顯示 -webkit-line-clamp:2;
//用來限制在一個塊元素顯示的文本的行數(shù) -webkit-box-orient:vertical;
設置彈性盒對象的子元素的排列方式文字陰影text-shadow: 水平陰影 垂直陰影 模糊陰影 陰影顏色顏色rgba(rgb顏色值，a為透明度)漸變線性漸變和徑向漸變filter(濾鏡)filter: 濾鏡效果(透明度)彈性布局彈性布局就是flex布局-柵格布局柵格化布局。
就是grid盒模型border-box 邊框和內(nèi)邊距包含在元素的寬高之內(nèi)content-box 邊框和內(nèi)邊距不包含在元素的寬高之內(nèi)7. 請解釋一下css3的flex(彈性盒布局模型)以及使用場景一個用于頁面布局的全新css3功能，flexbox可以把列表放在同一個方向(從上到下排列，從左到右)，并且列表能延伸到占用可用的空間，較為復雜的布局還可以嵌套一個伸縮容器(flex container)來實現(xiàn)。
采用flex布局的元素，成為flex容器。
常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而flex布局是基于flex布局flex-flow流可以很方便的用來做居中，能對不同屏幕大小自適應，在布局上有了比以前更加靈活的空間8. 經(jīng)常遇到的瀏覽器的兼容性問題有哪些，原因，解決方法是什么png24位的圖片在Ie6瀏覽器上出現(xiàn)背景。
解決方案是做成png8瀏覽器默認的margin和padding不同。
解決方案是假一個全局的*{
margin:0;
padding:0}
來統(tǒng)一IE6雙邊距bug；礦屬性變遷float后，又有橫向的margin情況下，在Ie6顯示margin比設置的大。
解決方案是在float的標簽控制中加入display:inline；將其妝花為行內(nèi)漸進識別的方式，從總體中逐步排除局部。
設置較小高度標簽(一般小于10px)，在IE6，IE7中高度超出自己設置高度。
解決方法:給超出高度的標簽設置overflow:hidden;
或者設置行高line-hieght小于你設置的高度chrome中文界面默認或?qū)⑿∮?2px的文本強制按照12px的文本強制按照12px顯示，可通過加入css屬性 -webkit-text-size-adjust:none 解決移動端1px邊框問題。
解決方案采用微元素模擬的方式 .scale{
position: relative;
border:none;
}
.scale:after{
content: '
'
;
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
點透問題，在安卓某些版本觸發(fā)兩次點擊問題。
解決方案：
引入fastclick處理點透問題安卓部分版本input里的placeholder位置偏上。
解決方案：
把input的line-height設為normalios的body位置overflow：
hidden后仍然可以滾動。
解決方案：
一般在所有元素最外層再包一大盒子.wrapper .wrapper{
position:relative;
overflow:hidden;
}
ios滾動卡頓。
解決方案：
在滾動的容器上加上webkit-over-flow-scrolling:touch;
9. 請解釋一下為什么需要清浮動？清浮動的方式清浮動是為了清除使用浮動元素產(chǎn)生的影響。
浮動的元素，高度會塌陷，而高度的塌陷使頁面后面的布局不能正常顯示父級p定義height在浮動元素后面添加class為clear的空p元素，給這個p設置樣式.clear{
clear:both}
給父容器添加overflow:hidden或者auto樣式給父容器添加clearfix的class，用偽類clearfix:after；來這個樣式。
清除浮動.clearfix{
zoom:1;
}
.clear:after{
content:'
.'
;
height:0;
clear:both;
display:block;
visibility:hidden;
}
10. margin和padding分別適合什么場景使用？margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。
margin是用來布局分開元素，使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容與元素之間有一段間距11.什么是偽類，什么是偽元素，他們的區(qū)別？偽類的受體是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個DOM外的元素偽類用于添加元素的特殊效果，而偽元素則是添加元素的內(nèi)容偽類使用的一個冒號，為元素使用兩個冒號偽類更常用一些簡單的動畫或者交互的樣式，例如滑入滑出，而為偽元素更常用語字體圖標，清除浮動等12. 什么是外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，他們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中較大者13. 實現(xiàn)水平垂直居中示例：

.md-warp{
width: 400px;
height: 300px;
max-width: 100%;
border: 1px solid #000;
}
.md-main{
display: block;
width: 100px;
height: 100px;
background: #f00;
}
水平居中margin法需要滿足三個條件元素定寬元素為塊級元素或行內(nèi)元素設置display:block元素的margin:left或者margin-right都必須設置auto三個條件缺一不可.md-main{
margin: 0 auto }
定位法元素定寬元素絕對定位，并設置left:50%;
+元素負做邊距margin-left為寬度的一半.md-wrap{
position:relative;
}
.md-main{
position:absolute;
left:50%;
margin-left:-50px }
有些時候元素寬度不是固定的，依然可以使用定位法實現(xiàn)水平居中用到css3中的transform屬性中的translate.md-warp{
position: relative;
}
// 注意此時md-main不設置width為100px .md-main{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}
文字水平居中直接使用text-align:center即可垂直居中定位法和水平居中類似，只是把left:50%換成top:50%,副邊距和transform屬性進行對應更改即可優(yōu)點：
能在各個瀏覽器下工作，結(jié)構(gòu)簡單明了，不需要增加額外的標簽 .md-warp{
position: relative;
}
.md-main{
position: absolute;
/* 核心 */ top: 50%;
margin-top: -50px;
}
不確定高度的時候.md-warp{
position: relative;
}
.md-main{
position: absolute;
top: 50%;
// 注意此時md-main不設置height為100px -webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
}
單行文本垂直居中需要滿足兩個條件：
元素內(nèi)容是單行，并且其高度是固定不變的將其line-height設置成height的值一樣p{
width: 400px;
height: 300px;
border: 1px solid #000;
}
span{
line-height: 300px;
}
視窗單位的解決辦法讓元素在視窗中居中，使用vh實現(xiàn).md-warp{
position: relative;
}
.md-main{
position: absolute;
margin: 50vh auto 0;
transform: translateY(-50%);
}
Flexbox的解決方案完成這項工作只需要兩個樣式，在需要水平垂直居中的父元素中設置display:flex和在水平存執(zhí)居中的元素設置margin:auto.md-wrap{
display:flex }
.md-main{
display:auto }
Flexbox的實現(xiàn)文本的水平垂直居中同樣很簡單 .md-warp{
display:flex;
}
.md-main{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
絕對垂直居中.md-wrap{
position: relative;
}
.md-main{
position:absolute;
top:0'
right:0 bottom:0;
left:0;
margin:auto;
}
最好不要使用絕對定位，因為他對整體的布局影響相當?shù)拇笙嚓P(guān)教程推薦：
CSS視頻教程以上就是CSS面試題（參考）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
CSS面試題本文轉(zhuǎn)載于：
cnblogs，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
2020 CSS3面試題
下一篇：
2020年CSS面試題匯總（最新）相關(guān)文章相關(guān)視頻HTML css面試題_html/css_WEB-...【css面試題】三個DIV要求水平對齊，左右兩個D...經(jīng)典CSS面試題七道重要CSS面試題CSS面試題（參考）CSS的樣式選擇器（下）CSS屬性（一）CSS屬性（二）CSS屬性（三） [做網(wǎng)站css教程]