CSS面試題

1. 介紹一下標准的css的盒子模型？低版本IE的盒子模型有什么不同

標准模型由四部分組成：

• 內容區域: 可以放置元素的區域如文本,圖像等，一般設置寬高指的是這個內容的寬高
• 內邊距的區域：內容與邊框之間的距離
• 邊框區域: 邊框
• 外邊框區域：由外邊框限制，用空白區域擴展邊框區域，開分開相鄰的元素

模型區分：
標准表型指的是設置box-sizing為content-box的盒子模型，一般width,height指的是content的寬高。IE盒模型指的是box-sizing為border-box的盒子。寬高的計算是content+padding+border;

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

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

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

3. css優先級如何計算?

• 優先級就近原則，同權重情況下樣式定義最近這位准
• 載入樣式以最后載入的定位為准

優先級為：

• 同權重： 內聯樣式(標簽內部)> 嵌入樣式表(當前文件中)>外部樣式(外部文件中)
• !important >id >class >tag
• !important 比內聯優先級高

4. display有哪些值？說明他們的作用

• block 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示
• none 元素不顯示，並從文檔流中移除
• inline 行內元素，默認寬度為內容寬度，不可設置寬高，同行顯示
• inline-block 默認寬度為內容寬度，可以設置寬高，同行顯示
• list-item 像塊類型元素一樣，可以設置寬高，同行顯示
• table 此元素會作為會計表格來顯示
• inherit 規定應該從父元素繼承display屬性的值

5. position的值releave和absolute定位遠點是？

• absolute 生成絕對定位元素，相對與值部位static的第一個父元素進行定位
• fixed 生成絕對的元素，相對於瀏覽器窗口進行定位
• relative 生成相對定位的元素，相對於其正常位置進行定位
• static 默認值。沒有定位，元素出現在正常出現的流中
• inherit 規定從父元素繼承position屬性的值

6. css有哪些特性?

• 過渡

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

• 動畫

animation:動畫名稱，一個周期花費時間,雲頂曲線(默認ease),動畫延遲(默認0),動畫播放次數(默認1),是否反向播放動畫(默認normal),是否暫停動畫(默認running)

• 形狀轉換

transform: 使用於2D或3D轉換的元素
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(默認使用瀏覽器默認的換行規則)|break-all(允許在單詞內換行)|keep-all(只能在半角空格或連字符處換行)
• 超出省略號

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

• 多行省略號

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

• 文字陰影

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

• 顏色

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

• 漸變

線性漸變和徑向漸變

• filter(濾鏡)

filter: 濾鏡效果(透明度)

• 彈性布局

彈性布局就是flex布局

-柵格布局

柵格化布局。就是grid

• 盒模型

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

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

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

8. 經常遇到的瀏覽器的兼容性問題有哪些，原因，解決方法是什么

• png24位的圖片在Ie6瀏覽器上出現背景。解決方案是做成png8
• 瀏覽器默認的margin和padding不同。解決方案是假一個全局的*{margin:0;padding:0}來統一
• IE6雙邊距bug；礦屬性變遷float后，又有橫向的margin情況下，在Ie6顯示margin比設置的大。解決方案是在float的標簽控制中加入display:inline；將其妝花為行內漸進識別的方式，從總體中逐步排除局部。
• 設置較小高度標簽(一般小於10px)，在IE6，IE7中高度超出自己設置高度。解決方法:給超出高度的標簽設置overflow:hidden;或者設置行高line-hieght小於你設置的高度
• chrome中文界面默認或將小於12px的文本強制按照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;
}

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

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

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

9. 請解釋一下為什么需要清浮動？清浮動的方式

清浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使頁面后面的布局不能正常顯示

• 父級div定義height
• 在浮動元素后面添加class為clear的空div元素，給這個div設置樣式.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是用來隔開元素與內容的間隔。margin是用來布局分開元素，使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容與元素之間有一段間距

11.什么是偽類，什么是偽元素，他們的區別？

• 偽類的受體是文檔樹中已有的元素，而偽元素則創建了一個DOM外的元素
• 偽類用於添加元素的特殊效果，而偽元素則是添加元素的內容
• 偽類使用的一個冒號，為元素使用兩個冒號
• 偽類更常用一些簡單的動畫或者交互的樣式，例如滑入滑出，而為偽元素更常用語字體圖標，清除浮動等

12. 什么是外邊距合並

外邊距合並指的是，當兩個垂直外邊距相遇時，他們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中較大者

13. 實現水平垂直居中

示例：

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

水平居中

• margin法
  需要滿足三個條件

• 元素定寬
• 元素為塊級元素或行內元素設置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
}

有些時候元素寬度不是固定的，依然可以使用定位法實現水平居中用到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屬性進行對應更改即可

優點：能在各個瀏覽器下工作，結構簡單明了，不需要增加額外的標簽

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

• 單行文本垂直居中

需要滿足兩個條件：

• 元素內容是單行，並且其高度是固定不變的
• 將其line-height設置成height的值一樣

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

視窗單位的解決辦法

讓元素在視窗中居中，使用vh實現

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

Flexbox的解決方案

完成這項工作只需要兩個樣式，在需要水平垂直居中的父元素中設置display:flex和在水平存執居中的元素設置margin:auto

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

Flexbox的實現文本的水平垂直居中同樣很簡單

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

最好不要使用絕對定位，因為他對整體的布局影響相當的大