html&css面試筆記

牧心發表於2019-02-16
HTMLCSS面試筆記

1、CSS選擇器有哪些？它們的優先順序是怎樣的？

  • 選擇器型別：

    id選擇器      （ # myid）
類選擇器      （.myclassname）
標籤選擇器    （div, h1, p）
相鄰選擇器    （h1 + p）
子選擇器      （ul > li）
後代選擇器    （li a）
萬用字元選擇器  （ * ）
屬性選擇器    （a[rel = "external"]）
偽類選擇器    （a:hover, li:nth-child）
  • 選擇器優先順序：就近原則，同權重情況下樣式定義最近者為準;載入樣式以最後載入的定位為準;
  • 優先順序為:!important > id > class > tag，同時important 比內聯優先順序高
  • 權重的規則：標籤的權重為1，class的權重為10，id的權重為100；如果權重相同，則最後定義的樣式會起作用

2、列出px、em、rem三者的區別

  • px：畫素，絕對單位，指定是多少就是多少，計算比較容易；
  • em：相對單位，相對於父元素的字型大小，如果當前物件沒有設定字型尺寸，則相對於瀏覽器預設字號，em的值不固定，並且em會繼承父級元素的字型大小；
  • rem：相對單位，相對於HTML根元素的字型大小；

    瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

3、寫出一個兩列等高，左列固定寬度為200px，右列自適應瀏覽器的佈局

  • 浮動
<div>
    <div id="left" style="float:left;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="float:left;margin-left:-100%;width:200px;height:200px;background-color:green;"></div> 
</div>
  • 父元素flex佈局，左側子元素flex-basis:200px，右側子元素flex:1；
<div style="display:flex;">
    <div id="left" style="flex-basis:200px;width:100%; height:200px;background-color:red;"></div>
    <div id="right" style="flex:1;height:200px;background-color:green;"></div> 
</div>

4、你做的頁面在哪些瀏覽器測試過？常見瀏覽器的核心分別是什麼？

  • 瀏覽器核心：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-相容模式Trident+極速模式Webkit

5、不定寬高的img在固定寬高的容器內水平垂直居中，寫出html和css

<div class="box">
    <img src="http://img1.gtimg.com/nice_mb/08/1c/24769.jpg" />
</div>
 .box{
    width:200px;
    height:200px;
    border:1px solid #06C;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    *font-family:simsun;
    *font-size:200px;
}
.box img{
    vertical-align:middle;
}

6、清除浮動的原理和實現方法

  • 父元素沒有給定高度的前提下，父元素內整體浮動的元素無法撐開父元素，需要清除浮動。
  • 父級上增加屬性overflow：hidden 
.parent{
    overflow:hidden;
}
  • 在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）
<div class="parent">
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <a href="">12</a>
    <div style="clear:both"></div>
</div>
  • 使用成熟的清浮動樣式類，clearfix 
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

7、rgba()和opacity的透明效果有什麼不同

  • 效果上的不同：opacity方案，子元素文字內容同時透明；rgba方案，子元素內容不透明

8、css實現，滑鼠放在一個div上時該元素在2s內旋轉180°

#lamp{
    width: 400px;
    height: 40px;
    background: #ff0000;
}
#lamp:hover{
    animation: rotate 2s;
    -webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
    from {transform: rotate(0deg);}
    to {transform: rotate(180deg);}
}

9、什麼是盒子模型？

  • 在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。
    這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

10、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

  • 行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
  • 塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
  • 空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

11、CSS實現垂直水平居中

  • 實現方法有很多種，以下是其中一種實現：
//HTML結構：
<div class="wrapper">
     <div class="content"></div>
</div>

//CSS：
.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設定為0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設定為auto*/
    margin:auto;
    border: 1px solid green;    
}

12、簡述一下src與href的區別

  • href標識超文字引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間建立聯絡
  • src表示引用資源，表示替換當前元素，用在img，script，iframe上，src是頁面內容不可缺少的一部分。

    補充：link和@import的區別

    兩者都是外部引用CSS的方式，但是存在一定的區別：

    區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。

    區別2：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。

    區別3：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。

    區別4：ink支援使用Javascript控制DOM去改變樣式；而@import不支援。

13、什麼叫優雅降級和漸進增強？

  • 漸進增強 progressive enhancement：
    針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
  • 優雅降級 graceful degradation：
    一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

    區別：

    a. 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給

    b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要

    c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶

14、html中title屬性和alt屬性的區別？

  • <img src="#" alt="alt資訊" />
    當圖片不輸出資訊的時候，會顯示alt資訊，滑鼠放上去沒有資訊，當圖片正常讀取，不會出現alt資訊
  • <img src="#" alt="alt資訊" title="title資訊" />
    當圖片不輸出資訊的時候，會顯示alt資訊 滑鼠放上去會出現title資訊
    當圖片正常輸出的時候，不會出現alt資訊，滑鼠放上去會出現title資訊
  • title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標籤
  • title屬性的功能是提示。額外的說明資訊和非本質的資訊請使用title屬性。title屬性值可以比alt屬性值設定的更長
  • title屬性有一個很好的用途，即為連結新增描述性文字，特別是當連線本身並不是十分清楚的表達了連結的目的。

15、標準盒子模型與IE怪異盒子模型

  • 當不對doctype進行定義時，會觸發怪異模式。
  • 在標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
  • 在怪異模式下，一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）
    CSS3的box-sizing
    當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
    當設定為box-sizing:border-box時，將採用怪異模式解析計算；

16、CSS3有哪些新增的屬性？

  • 分為邊框、背景，漸變，陰影、2D轉換 3D轉換、過渡、動畫、彈性盒子等。
  • 比如：邊框(border-radius、border-shadow、border-image)之類的 。

17、什麼是CSS Hack?

  • 一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
  • IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文件：css文件）。例如：
// 1、條件Hack
<!--[if IE]>
  <style>
    .test{color:red;}
  </style>
<![endif]-->
// 2、屬性Hack
.test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
}
// 3、選擇符Hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */

18、bootstrap響應式實現的原理

  • 百分比佈局+媒體查詢

19. 請簡要描述margin重合問題，及解決方式

  • 同向margin的重疊：
    在最外層的div中加入overflow:hidden;zoom:1
    在最外層加入padding:1px;屬性
    在最外層加入：border:1px solid #cacbcc;

  • 異向重疊問題：
    float:left（只能解決IE6瀏覽器中的異向重疊問題，可以解決IE8以上、chorme、firefox、opera下的同向重疊問題）

20、position的值，relative、absolute、fixed分別相對於進行誰定位，有什麼區別？

  • absolute 生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。
  • fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。
  • relative 生成相對定位的元素，相對於其正常位置進行定位。因此，”left:20″ 會向元素的 left位置新增 20 畫素。
  • static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
  • inherit 規定應該從父元素繼承 position 屬性的值。

21、瀏覽器是如何渲染頁面的？

  • 渲染的流程如下：
    1.解析HTML檔案，建立DOM樹。自上而下，遇到任何樣式（link、style）與指令碼（script）都會阻塞（外部樣式不阻塞後續外部指令碼的載入）。
    2.解析CSS。優先順序：瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式；
    3.將CSS與DOM合併，構建渲染樹（Render Tree）;
    4.佈局和繪製，重繪（repaint）和重排（reflow）;

22、對<meta>標籤有什麼理解

  • <meta> 標籤提供關於 HTML 文件的後設資料。它不會顯示在頁面上，但是對於機器是可讀的。
    可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
    還有一個用途是可以新增伺服器傳送到瀏覽器的http頭部內容

23、h5新特性

  • 新的語義標籤和屬性
  • 表單新特性
  • 視訊和音訊
  • Canvas繪圖
  • SVG繪圖
  • 地理定位
  • 拖放API

25、display none visibility hidden區別？

  • display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素；
  • 使用visibility:hidden效能要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建，此時就是迴流。所有頁面第一次載入時需要產生一次迴流），而visibility切換是否顯示時則不會引起迴流。

相關文章