前端面試題五

時間 2019-11-19

標籤端面試題简体版

原文原文鏈接

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？css

（1）有兩種，IE 盒子模型、W3C 盒子模型；
（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
（3）區別：IE的content部分把 border 和 padding計算了進去;

CSS選擇符有哪些？哪些屬性能夠繼承？html

*   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標籤選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul > li）
    6.後代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel = "external"]）
    9.僞類選擇器（a:hover, li:nth-child）

*可繼承的樣式： font-size font-family color, UL LI DL DD DT;

*不可繼承的樣式：border padding margin width height;

CSS優先級算法如何計算？前端

* 優先級就近原則，同權重狀況下樣式定義最近者爲準;

* 載入樣式以最後載入的定位爲準;

優先級爲:
   !important >  id > class > tag
    important 比 內聯優先級高

CSS3新增僞類有那些？android

舉例：
 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   單選框或複選框被選中。

如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？web

給div設置一個寬度，而後添加margin:0 auto屬性面試
```
div{
    width:200px;
    margin:0 auto;
 }
```

居中一個浮動元素算法

 肯定容器的寬高 寬500 高 300 的層
  設置層的外邊距

 .div {
      width:500px ; height:300px;//高度能夠不設
      margin: -150px 0 0 -250px;
      position:relative;     //相對定位
      background-color:pink; //方便看效果
      left:50%;
      top:50%;
 }

讓絕對定位的div居中chrome

 position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

display有哪些值？說明他們的做用。跨域

block        象塊類型元素同樣顯示。
none         缺省值。象行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item  象塊類型元素同樣顯示，並添加樣式列表標記。
table      此元素會做爲塊級表格來顯示
inherit    規定應該從父元素繼承 display 屬性的值

position的值relative和absolute定位原點是？瀏覽器

 absolute
   生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
  fixed （老IE不支持）
    生成絕對定位的元素，相對於瀏覽器窗口進行定位。
  relative
    生成相對定位的元素，相對於其正常位置進行定位。
  static
    默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
  inherit
    規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

 新增各類CSS選擇器  （: not(.input)：全部 class 不是「input」的節點）
  圓角           （border-radius:8px）
  多列布局        （multi-column layout）
  陰影和反射        （Shadow\Reflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  線性漸變      （gradient）
  旋轉          （transform）
  增長了旋轉,縮放,定位,傾斜,動畫，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
```
：）
```

用純CSS建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一個滿屏品字佈局如何設計?

簡單的方式：
    上面的div寬100%，
    下面的兩個div分別寬50%，
    而後用float或者inline使其不換行便可

常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

  這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從整體中逐漸排除局部。

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
          background-color:#f1ee18;/*全部識別*/
          .background-color:#00deff\9; /*IE六、七、8識別*/
          +background-color:#a200ff;/*IE六、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/
      }

*  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
   也可使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性。
   解決方法:統一經過getAttribute()獲取自定義屬性。

*  IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;
   Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性。

*  解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

*  Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
   可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。

爲何要初始化CSS樣式。

- 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, section, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
section, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：
一、若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
二、不然,則由這個祖先元素的 padding box 構成。
若是都找不到，則爲 initial containing block。

補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位爲absolute/relative的元素
3. fixed: 它的containing block一概爲根元素(html/body)，根元素也是initial containing block

CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

對BFC規範(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用。）
 一個頁面是由不少個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
 不一樣類型的 Box,會參與不一樣的 Formatting Context（決定如何渲染文檔的容器）,所以Box內的元素會以不一樣的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

css定義的權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}

若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式
移動端的佈局用過媒體查詢嗎？

使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS)

CSS優化、提升性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的？
在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
margin和padding分別適合什麼場景使用？
抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
元素豎向的百分比設定是相對於容器的高度嗎？
全屏滾動的原理是什麼？用到了CSS的那些屬性？
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）
::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用。
如何修改chrome記住密碼後自動填充表單的黃色背景？
你對line-height是如何理解的？
設置元素浮動後，該元素的display值是多少？（自動變成display:block）
怎麼讓Chrome支持小於12px 的文字？
讓頁面裏的字體變清晰，變細用CSS怎麼作？（-webkit-font-smoothing: antialiased;）
font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
position:fixed;在android下無效怎麼處理？

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

display:inline-block 何時會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

overflow: scroll時不能平滑滾動的問題怎麼處理？
有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，因此不如隔離開。

由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，提升了webserver的http請求的解析速度。

style標籤寫在body後與body前有什麼區別？

什麼是CSS 預處理器 / 後處理器？

- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，加強了css代碼的複用性，還有層級、mixin、變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

- 後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。