1.介紹一下標(biāo)準(zhǔn)的css的盒子模型？低版本IE的盒子模型有什么不同

標(biāo)準(zhǔn)模型由四部分組成：

• 內(nèi)容區(qū)域: 可以放置元素的區(qū)域如文本,圖像等，一般設(shè)置寬高指的是這個(gè)內(nèi)容的寬高
• 內(nèi)邊距的區(qū)域：內(nèi)容與邊框之間的距離
• 邊框區(qū)域: 邊框
• 外邊框區(qū)域：由外邊框限制，用空白區(qū)域擴(kuò)展邊框區(qū)域，開(kāi)分開(kāi)相鄰的元素

模型區(qū)分：
標(biāo)準(zhǔn)表型指的是設(shè)置box-sizing為content-box的盒子模型，一般width,height指的是content的寬高。IE盒模型指的是box-sizing為border-box的盒子。寬高的計(jì)算是content+padding+border;

專(zhuān)題推薦：2020年CSS面試題匯總（最新）

2. CSS選擇符有哪些？那些屬于可以繼承？

• id選擇器(#myid)
• 類(lèi)選擇器(.myclassName)
• 標(biāo)簽選擇器(p,h1,p)
• 子代選擇器(ul>li)
• 后代選擇器(li a)
• 通配符選擇器(*)
• 屬性選擇器(a[rel="external"])
• 偽類(lèi)選擇器(a:hover,li:nth-child)

可繼承的樣式： font-size font-family color
不可繼承的樣式： border padding margin height width

3. css優(yōu)先級(jí)如何計(jì)算?

• 優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近這位準(zhǔn)
• 載入樣式以最后載入的定位為準(zhǔn)

優(yōu)先級(jí)為：

• 同權(quán)重： 內(nèi)聯(lián)樣式(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)>外部樣式(外部文件中)
• !important >id >class >tag
• !important 比內(nèi)聯(lián)優(yōu)先級(jí)高

4. display有哪些值？說(shuō)明他們的作用

• block 塊類(lèi)型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示
• none 元素不顯示，并從文檔流中移除
• inline 行內(nèi)元素，默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示
• inline-block 默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示
• list-item 像塊類(lèi)型元素一樣，可以設(shè)置寬高，同行顯示
• table 此元素會(huì)作為會(huì)計(jì)表格來(lái)顯示
• inherit 規(guī)定應(yīng)該從父元素繼承display屬性的值

5. position的值releave和absolute定位遠(yuǎn)點(diǎn)是？

• absolute 生成絕對(duì)定位元素，相對(duì)與值部位static的第一個(gè)父元素進(jìn)行定位
• fixed 生成絕對(duì)的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
• relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位
• static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常出現(xiàn)的流中
• inherit 規(guī)定從父元素繼承position屬性的值

6. css有哪些特性?

• 過(guò)渡

  transition-property:width   transition-duration:1s   transition-timing-function:linear   transition-delay:2s

• 動(dòng)畫(huà)

animation:動(dòng)畫(huà)名稱(chēng)，一個(gè)周期花費(fèi)時(shí)間,云頂曲線(xiàn)(默認(rèn)ease),動(dòng)畫(huà)延遲(默認(rèn)0),動(dòng)畫(huà)播放次數(shù)(默認(rèn)1),是否反向播放動(dòng)畫(huà)(默認(rèn)normal),是否暫停動(dòng)畫(huà)(默認(rèn)running)

• 形狀轉(zhuǎn)換

transform: 使用于2D或3D轉(zhuǎn)換的元素 transform-origin: 裝換元素的位置(圍繞哪個(gè)點(diǎn)進(jìn)行裝換).默認(rèn)(x,y,z);

• 選擇器

• 陰影

box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開(kāi)始的方向(默認(rèn)是從里向外，設(shè)置inset就是從外往里)

• 邊框圖片

border-image: 設(shè)置圖片路徑 設(shè)置邊框背景圖的分割方式 設(shè)置或檢索對(duì)象的邊框厚度 設(shè)置或檢索對(duì)象的邊框背景圖向外擴(kuò)展 設(shè)置邊框圖片的平鋪方式

• 邊框圓角

  border-radius: n1 n2 n3 n4; /* n1-n4 四個(gè)值得順序是左上角，右上角，右下角，左下角 */

• 反射(倒影)

box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩圖片

• 文字

• 換行 word-break:normal(默認(rèn)使用瀏覽器默認(rèn)的換行規(guī)則)|break-all(允許在單詞內(nèi)換行)|keep-all(只能在半角空格或連字符處換行)
• 超出省略號(hào)

overflow: hidden; white-space: nowrap; text-overflow:ellipsis;

• 多行省略號(hào)

overflow:hiden; text-overflow:ellipsis;用省略號(hào)"..."隱藏超出范圍的文本 display:-webkit-box;  //將對(duì)象作為彈性伸縮盒子模型顯示 -webkit-line-clamp:2; //用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù) -webkit-box-orient:vertical;設(shè)置彈性盒對(duì)象的子元素的排列方式

• 文字陰影

text-shadow: 水平陰影 垂直陰影 模糊陰影 陰影顏色

• 顏色

rgba(rgb顏色值，a為透明度)

• 漸變

線(xiàn)性漸變和徑向漸變

• filter(濾鏡)

filter: 濾鏡效果(透明度)

• 彈性布局

彈性布局就是flex布局

-柵格布局

柵格化布局。就是grid

• 盒模型

• border-box 邊框和內(nèi)邊距包含在元素的寬高之內(nèi)
• content-box 邊框和內(nèi)邊距不包含在元素的寬高之內(nèi)

7. 請(qǐng)解釋一下css3的flex(彈性盒布局模型)以及使用場(chǎng)景

一個(gè)用于頁(yè)面布局的全新css3功能，flexbox可以把列表放在同一個(gè)方向(從上到下排列，從左到右)，并且列表能延伸到占用可用的空間，較為復(fù)雜的布局還可以嵌套一個(gè)伸縮容器(flex container)來(lái)實(shí)現(xiàn)。采用flex布局的元素，成為flex容器。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而flex布局是基于flex布局flex-flow流可以很方便的用來(lái)做居中，能對(duì)不同屏幕大小自適應(yīng)，在布局上有了比以前更加靈活的空間

8. 經(jīng)常遇到的瀏覽器的兼容性問(wèn)題有哪些，原因，解決方法是什么

• png24位的圖片在Ie6瀏覽器上出現(xiàn)背景。解決方案是做成png8
• 瀏覽器默認(rèn)的margin和padding不同。解決方案是假一個(gè)全局的*{margin:0;padding:0}來(lái)統(tǒng)一
• IE6雙邊距bug；礦屬性變遷float后，又有橫向的margin情況下，在Ie6顯示margin比設(shè)置的大。解決方案是在float的標(biāo)簽控制中加入display:inline；將其妝花為行內(nèi)漸進(jìn)識(shí)別的方式，從總體中逐步排除局部。
• 設(shè)置較小高度標(biāo)簽(一般小于10px)，在IE6，IE7中高度超出自己設(shè)置高度。解決方法:給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-hieght小于你設(shè)置的高度
• chrome中文界面默認(rèn)或?qū)⑿∮?2px的文本強(qiáng)制按照12px的文本強(qiáng)制按照12px顯示，可通過(guò)加入css屬性 -webkit-text-size-adjust:none 解決

移動(dòng)端

• 1px邊框問(wèn)題。解決方案采用微元素模擬的方式

 .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; }

• 點(diǎn)透問(wèn)題，在安卓某些版本觸發(fā)兩次點(diǎn)擊問(wèn)題。解決方案：引入fastclick處理點(diǎn)透問(wèn)題
• 安卓部分版本input里的placeholder位置偏上。解決方案：把input的line-height設(shè)為normal
• ios的body位置overflow：hidden后仍然可以滾動(dòng)。解決方案：一般在所有元素最外層再包一大盒子.wrapper

 .wrapper{    position:relative;    overflow:hidden;  }

• ios滾動(dòng)卡頓。解決方案：在滾動(dòng)的容器上加上webkit-over-flow-scrolling:touch;

9. 請(qǐng)解釋一下為什么需要清浮動(dòng)？清浮動(dòng)的方式

清浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使頁(yè)面后面的布局不能正常顯示

• 父級(jí)p定義height
• 在浮動(dòng)元素后面添加class為clear的空p元素，給這個(gè)p設(shè)置樣式.clear{clear:both}
• 給父容器添加overflow:hidden或者auto樣式
• 給父容器添加clearfix的class，用偽類(lèi)clearfix:after；來(lái)這個(gè)樣式。清除浮動(dòng)

.clearfix{     zoom:1; } .clear:after{     content:'.';     height:0;     clear:both;     display:block;     visibility:hidden; }

10. margin和padding分別適合什么場(chǎng)景使用？

margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin是用來(lái)布局分開(kāi)元素，使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容與元素之間有一段間距

11.什么是偽類(lèi)，什么是偽元素，他們的區(qū)別？

• 偽類(lèi)的受體是文檔樹(shù)中已有的元素，而偽元素則創(chuàng)建了一個(gè)DOM外的元素
• 偽類(lèi)用于添加元素的特殊效果，而偽元素則是添加元素的內(nèi)容
• 偽類(lèi)使用的一個(gè)冒號(hào)，為元素使用兩個(gè)冒號(hào)
• 偽類(lèi)更常用一些簡(jiǎn)單的動(dòng)畫(huà)或者交互的樣式，例如滑入滑出，而為偽元素更常用語(yǔ)字體圖標(biāo)，清除浮動(dòng)等

12. 什么是外邊距合并

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中較大者

13. 實(shí)現(xiàn)水平垂直居中

示例：

<p class="md-warp">     <span class="md-main"></span> </p> .md-warp{     width: 400px;     height: 300px;     max-width: 100%;     border: 1px solid #000; } .md-main{     display: block;     width: 100px;     height: 100px;     background: #f00; }

水平居中

• margin法
  需要滿(mǎn)足三個(gè)條件

• 元素定寬
• 元素為塊級(jí)元素或行內(nèi)元素設(shè)置display:block
• 元素的margin:left或者margin-right都必須設(shè)置auto
  三個(gè)條件缺一不可

.md-main{     margin: 0 auto }

• 定位法

• 元素定寬
• 元素絕對(duì)定位，并設(shè)置left:50%;
  +元素負(fù)做邊距margin-left為寬度的一半

.md-wrap{     position:relative; } .md-main{     position:absolute;     left:50%;     margin-left:-50px }

有些時(shí)候元素寬度不是固定的，依然可以使用定位法實(shí)現(xiàn)水平居中用到css3中的transform屬性中的translate

.md-warp{     position: relative; } // 注意此時(shí)md-main不設(shè)置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即可

垂直居中

• 定位法

和水平居中類(lèi)似，只是把left:50%換成top:50%,副邊距和transform屬性進(jìn)行對(duì)應(yīng)更改即可

優(yōu)點(diǎn)：能在各個(gè)瀏覽器下工作，結(jié)構(gòu)簡(jiǎn)單明了，不需要增加額外的標(biāo)簽

 .md-warp{     position: relative; } .md-main{     position: absolute;     /* 核心 */     top: 50%;     margin-top: -50px; }

不確定高度的時(shí)候

.md-warp{     position: relative; } .md-main{     position: absolute;     top: 50%;     // 注意此時(shí)md-main不設(shè)置height為100px     -webkit-transform: translate(0,-50%);     -ms-transform: translate(0,-50%);     -o-transform: translate(0,-50%);     transform: translate(0,-50%); }

• 單行文本垂直居中

需要滿(mǎn)足兩個(gè)條件：

• 元素內(nèi)容是單行，并且其高度是固定不變的
• 將其line-height設(shè)置成height的值一樣

p{     width: 400px;     height: 300px;     border: 1px solid #000; } span{     line-height: 300px; }

視窗單位的解決辦法

讓元素在視窗中居中，使用vh實(shí)現(xiàn)

.md-warp{     position: relative; } .md-main{     position: absolute;     margin: 50vh auto 0;     transform: translateY(-50%); }

Flexbox的解決方案

完成這項(xiàng)工作只需要兩個(gè)樣式，在需要水平垂直居中的父元素中設(shè)置display:flex和在水平存執(zhí)居中的元素設(shè)置margin:auto

.md-wrap{     display:flex } .md-main{     display:auto }

Flexbox的實(shí)現(xiàn)文本的水平垂直居中同樣很簡(jiǎn)單

 .md-warp{     display:flex; } .md-main{     display: flex;   align-items: center;   justify-content: center;     margin: auto; }

絕對(duì)垂直居中

.md-wrap{     position: relative; } .md-main{     position:absolute;     top:0'     right:0     bottom:0;     left:0;     margin:auto; }

最好不要使用絕對(duì)定位，因?yàn)樗麑?duì)整體的布局影響相當(dāng)?shù)拇?/p>

相關(guān)教程推薦：CSS視頻教程