前端面試題整理—HTML/CSS篇

時間 2019-11-09

標籤端面試題整理 html css 欄目 HTML 简体版

原文原文鏈接

一、簡述一下你對HTML語義化的理解css

　1）用正確的標籤作正確的事情html

　2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析webpack

　3）即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的css3

　4）搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEOweb

　5）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解算法

二、Doctype做用？標準模式與兼容模式之間區別？canvas

　　<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html>標籤以前，告知瀏覽器的解析器用什麼文檔標準解析這個文檔瀏覽器

　　DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現sass

　　標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行服務器

　　在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器以防止站點沒法工做

三、什麼是盒模型？你是怎麼理解的

　　簡單的說頁面是由若干個盒模型（BOX）堆砌起來的，能夠說每一個HTML元素就是一個盒模型

　　盒模型由外到內包括邊距(margin)、邊框（border）、填充(padding)、內容(content)

　　盒子模型有兩種分別是W3C標準模型和IE模型

　　不一樣之處：

　　標準模型寬高是指content，不包括padding和border

　　IE模型的寬高是指content+padding+border的總寬高

四、談談對BFC的理解

　　BFC：塊格式化上下文(Block Formatting Context)

　　BFC 是一個獨立的佈局環境,能夠理解爲一個容器,在這個容器中按照必定規則進行物品擺放,而且不會影響其它環境中的物品

　　BFC的特性：

　　1）bfc 是一個獨立的容器，容器內子元素不會影響容器外的元素

　　2）bfc的區域不會與float的元素區域重疊

　　3）計算bfc的高度時，浮動元素也參與計算

　　4）垂直方向上的距離由margin決定

　　5）內部的Box會在垂直方向上一個接一個的放置

　　如下條件會造成BFC：

　　1）浮動元素 float:left | right | inherit（none除外）

　　2）position:absolute 或 fixed 定位

　 3）display:inline-block | inline-flex | table-cell

　　4）overflow:hidden | auto | scroll (visible除外)

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

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

　　可繼承的樣式： font-size font-family color, ul li dl dt dd

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

六、CSS優先級算法如何計算？

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

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

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

七、你理解的僞類與僞元素　

　　僞類：用於向某些選擇器添加特殊的效果。好比span:first-child{}
　　僞元素：用於將特殊的效果添加到某些選擇器。好比span:before{}

　　僞類只要不是互斥能夠疊加使用

　　僞元素在一個選擇器中只能出現一次，而且只能出如今末尾
　　僞類與僞元素優先級分別與類、標籤優先級相同
　　它們的本質區別：是否抽象創造了新元素

八、display有哪些值？box-sizing 經常使用的屬性有哪些？說明他們的做用

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

　　box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
　　box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
　　box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

九、什麼是外邊距重疊？重疊的結果是什麼？

　　外邊距重疊就是 margin-collapse

　　相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊　　

　　摺疊結果遵循下列計算規則：
　　1）兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值
　　2）兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值
　　3）兩個外邊距一正一負時，摺疊結果是二者的相加的和

十、請列舉幾種隱藏元素的方法　　

　　1）display: none; 元素會變得不可見，而且不會再佔用文檔的空間
　　2）visibility: hidden; 只是簡單的隱藏某個元素，可是元素佔用的空間還存在
　　3）opacity: 0; 設置0可使一個元素徹底透明
　　4）position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域以外
　　5）transform: scale(0); 將一個元素設置爲縮放無限小，元素不可見原來位置將被保留

十一、你對line-height是如何理解的？

　　line-height 指一行字的高度，包含了字間距，其實是下一行基線到上一行基線距離

　　一個容器沒有設置高度，那麼撐開容器高度的是 line-height 而不是容器內的文字內容

　　把 line-height 值設置爲 height 同樣大小的值能夠實現單行文字的垂直居中

　　line-height和height都能撐開一個高度，height會觸發 haslayout，而line-height不會

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

　　行內元素有：a b span img input select strong

　　塊級元素有：div ul ol li dl dt dd h1-h6 p

　　常見的空元素: <br> <hr> <img> <input> <link> <meta>

1三、position有哪些值，他們各自的區別

　　absolute：生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位

　　relative：生成相對定位的元素，相對於其正常位置進行定位

　　fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位（固定定位）

　　static：默認值,無定位,元素出如今正常的流中（忽略top,bottom,left,right z-index）

1四、HTML5有哪些新特性，新技術，如何區分HTML和HTML5？

　　語意化更好的內容元素。好比header、footer、nav、section、article

　　用於媒介回放的 video 和 audio 元素

　　繪畫 canvas

　　拖放Drag

　　表單控件，calendar、date、time、email、url、search

　　存儲功能localStorage和sessionStorage

　　localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
　　sessionStorage的數據在瀏覽器關閉後自動刪除

　　新的技術webworker, websocket（通信協議）, Geolocation（地理定位）

　　區分HTML和HTML5:

　　DOCTYPE聲明上不一樣

　　結構語義上不一樣

　　添加了新的功能媒體標記標籤，如audio、video

1五、SVG 與 Canvas二者間的區別

　　SVG 是一種使用 XML 描述 2D 圖形的語言

　　Canvas 經過 JavaScript 來繪製 2D 圖形

　　SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的，在SVG 中，每一個被繪製的圖形均被視爲對象

　　若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形

　　Canvas 是逐像素進行渲染的

　　在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注

　　若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象

1六、爲何要初始化CSS樣式

　　由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的

　　若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別

　　可使用 reset.css 或 Normalize.css 作 CSS 初始化

1七、rgba() 和 opacity 的透明效果有什麼不一樣？

　　opacity 做用於元素以及元素內的全部內容（包括文字）的透明度

　　rgba() 只做用於元素自身的顏色或其背景色，子元素不會繼承透明效果

1八、請描述一下 cookies，sessionStorage 和 localStorage 的區別

　　cookie是網站爲了標示用戶身份而儲存在用戶本地終端上的數據（通常加密）

　　sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

　　存儲大小：

　　cookie數據大小不能超過4k

　　sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

　　有效時間：

　　localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據

　　sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除

　　cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

1九、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的？

　　1）在線的狀況下，瀏覽器發現 html 標籤有 manifest 屬性，它會請求 manifest 文件

　　2）若是是第一次訪問app，那麼瀏覽器就會根據 manifest 文件的內容下載相應的資源而且進行離線存儲

　　3）若是已經訪問過app且資源已經離線存儲了，瀏覽器會對比新的 manifest 文件與舊的 manifest 文件，若是文件沒有發生改變，就不作任何操做。若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲

　　4）離線的狀況下，瀏覽器就直接使用離線存儲的資源

20、頁面導入樣式時，使用 link 和 @import 有什麼區別？

　　link 屬於HTML標籤，除了加載CSS外，還能用於定 RSS等；@import 只能用於加載CSS

　　頁面加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載

　　@import 只在 IE5 以上才能被識別，而 link 是HTML標籤，無兼容問題

2一、列舉幾種清除浮動的方法

　　1)給父級使用:after 僞元素

　　2）末尾處添加空div標籤clear:both

　　3）父元素設置 overflow：hidden; （必須定義width或zoom:1）

　　4）父元素也設置浮動

　　5）結尾處加br標籤clear:both

2二、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

　　響應式設計就是網站可以兼容多個終端（包括PC端，手機平板終端），而不是爲每一個終端作一個特定的版本

　　基本原理是利用CSS3媒體查詢，爲不一樣尺寸的設備適配不一樣樣式

　　對於低版本的IE，可採用JS獲取屏幕寬度，而後經過resize方法來實現兼容

2三、水平居中、垂直居中的方法有哪些？

　　水平居中：

　　1）inline-block實現水平居中（text-align:center;）

　　2）margin和width實現水平居中

　　3）絕對定位實現水平居中

　　4）使用flex實現水平居中

　　5）使用柵格佈局grid實現水平居中

　　垂直居中：

　　1）新增 inline-block 兄弟元素，設置 vertical-align

　　2）絕對定位配合 transform 位移

　　3）使用flex彈性盒子display:flex

　　4）未知高度的塊級子元素，採用table-cell配合vertical-align

　　5）已知高度的塊級子元素，採用絕對定位和負邊距

　　6）經過css3的translate變形實現

2四、你理解的flex彈性盒子佈局

　　Flexbox用於不一樣尺寸屏幕中建立可自動擴展和收縮佈局

　　任何一個容器均可以指定爲Flex佈局

　　使用彈性佈局能夠有效的分配一個容器的空間

　　即便咱們的容器元素尺寸改變，它內部的元素也能夠調整它的尺寸來適應空間

　　設置了flex佈局後，子元素的float、clear和vertical-align屬性就會失效

2五、闡述px與em、rem的區別，以及你知道的其餘css單位

　　px就是pixel像素的縮寫，相對長度單位。經常使用於PC端的字體單位

　　em相對於當前父元素的font-size（並非固定的）

　　rem相對於HTML根元素的font

　　其餘css單位：

　　%百分比，通常來講就是相對於父元素

　　vw是相對視口（viewport）的寬度而定的，長度等於視口寬度的1/100

　　vh是相對視口（viewport）的高度而定的，長度等於視口高度的1/100

　　vm css3新單位，相對於視口的寬度或高度中較小的那個

2六、實現左邊固定寬度，右邊自適應（不限於一種方法）

　　1）浮動佈局（左側固定寬度而且左浮動，右側使用margin-left）

　　2）使用定位（左側固定寬度而且絕對定位，右側使用margin-left）

　　3）overflow（左側固定寬而且左浮動，右側加overflow：hidden）

　　4）flex佈局（父級元素設置display:flex，左側設置固定寬，右側flex:1）

2七、使用css實現一個持續的動畫

.animat{
     width:20px;
     height:20px;
     background:red;
     position:relative;
     animation:mymove 3s infinite;        
}
@keyframes mymove{
     from{left:0px;}
     to{left:200px;}
}

2八、css實現三角形

.triangle{ 
     width:0;
     height:0;
     border-width:20px;
     border-style:solid;
     border-color:transparent transparent red transparent;
}

2九、移動端開發中有哪些經常使用的佈局？

　　百分比流式佈局

　　flex佈局

　　媒體查詢+rem佈局

　　固定寬度作法

30、什麼是聖盃佈局和雙飛翼佈局，並說下實現原理

　　聖盃佈局：

　　三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬

　　好處：重要的內容放在文檔流前面能夠優先渲染

　　原理：利用相對定位、浮動、負邊距佈局，而不添加額外標籤

　　雙飛翼佈局：

　　雙飛翼佈局：對聖盃佈局（使用相對定位對之後佈局有侷限性）的改進，消除相對定位

　　原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位

3一、align-content與align-items的區別？

　　align-content:center對單行是沒有效果的

　　而align-items:center無論是對單行仍是多行都有效果

　　咱們平常開發中用的比較多的就是align-items

3二、列舉去除inline-block出現間距的幾種方法

　　1）給父級font-size：0

　　2）使用margin負值

　　3）使用letter-spacing

　　4）使用word-spacing

　　5）移除空格

3三、title與h1的區別、b與strong的區別、i與em的區別？

　　title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取有很大的影響

　　b是一個實體標籤，展現強調內容。strong是標明重點內容，有語氣增強的含義

　　i內容展現爲斜體，em表示強調的文本

3四、<script>、<script defer>、<script async>三者之間區別

　　沒有defer或async屬性，瀏覽器會當即加載並執行相應的腳本

　　有了async屬性，表示後續文檔的加載和渲染與js腳本的加載和執行是並行進行的，即異步執行

　　有了defer屬性，加載後續文檔的過程和js腳本的加載是並行進行的
　　（此時僅加載不執行）

　　defer和async在網絡加載過程是一致的，都是異步執行

　　二者的區別在於腳本加載完成以後什麼時候執行

　　若是存在多個有defer屬性的腳本，那麼它們是按照加載順序執行腳本的

　　對於async，它的加載和執行是緊挨的，不管聲明順序如何，只要加載完成馬上執行

3五、data-的用法，以及他的優點

　　data-表明自定義屬性，能夠在全部的 HTML 元素中嵌入數據

　　自定義的數據可讓頁面擁有更好的交互體驗

　　屬性名不要包含大寫字母，在 data- 後必須至少有一個字符

　　該屬性能夠是任何字符串

　　自定義屬性前綴 "data-" 會被客戶端忽略

3六、如何實現瀏覽器內多個標籤頁之間的通訊?

　　WebSocket、SharedWorker

　　也能夠調用localstorge、cookies等本地存儲方式

3七、實現不使用border畫出1px高的線

注：在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

3八、怎麼讓Chrome支持小於12px 的文字

.shrink{
      -webkit-transform:scale(0.8);
       -o-transform:scale(1);
       display:inline-block;
}

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

　　上面的div寬100%

　　下面的兩個div分別寬50%

　　而後用float或者inline使其不換行便可

40、常常遇到的瀏覽器的兼容性有哪些？解決方法是什麼？

　　1）PNG24位的圖片在ie6瀏覽器上出現背景，解決方案是作成PNG8

　　2）瀏覽器默認的margin和padding不一樣。解決方案：*{margin:0;padding:0;}

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

　　4）IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義的屬性

　　在FireFox下，只能使用getAttribute()獲取自定義屬性；解決方法：統一經過getAttribute()獲取自定義屬性

　　5）IE下，even對象有x,y屬性，可是沒有pageX,pageY屬性

　　在Firefox下，even對象有pageX,pageY屬性，可是沒有x,y屬性

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

4一、less如何定義一個函數，好比圓角

//定義圓角
   @radius 
       .round(@radius:5px){
        border-radius:@radius;
            -webkit-border-radius: @radius;
            -moz-border-radius: @radius;
        }
        .round7{
           .round(7px);
        }

4二、如何平移放大一個元素

transform:translateX(100px)
transform:scale(2)

4三、CSS中動畫實現的方式有幾種

　　transition、keyframes(animation)

4四、你知道的CSS預處理器，以及預處理器做用

　　less、sass、Stylus

　　做用：
　　幫助更好地組織CSS代碼
　　提升代碼複用率
　　提高可維護性

4五、如何解決CSS模塊化

　　less sass 等CSS預處理器

　　webpack處理CSS(css-loader+style-loader)

　　PostCSS插件(postCSS-import/precss等)

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

　　瀏覽器的默認行爲會把inline元素間的空白字符渲染成一個空格，空格會佔用一個字符的寬度

　　解決方案：給父級font-sieze設置爲0。或者採用letter-spacing方式

4七、描述一下你對漸進加強和優雅降級的理解

　　漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗

.transition{
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
         -o-transition: all .5s;
           transition: all .5s;  
 }

　　優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

        .transition{ 
        　　     transition: all .5s;
        　　  -o-transition: all .5s;
          　-moz-transition: all .5s;
         -webkit-transition: all .5s;
        }

4八、解釋css sprites，如何使用

　　css精靈又稱雪碧圖

　　將多個小圖片整個到一張大的背景圖上，再利用repeat、position進行精準操做

　　雪碧圖減輕了服務器的請求次數，提升了頁面性能

4九、針對移動瀏覽器端開發頁面，不指望用戶放大屏幕，且要求「視口（viewport）」寬度等於屏幕寬度，視口高度等於設備高度，如何設置？

50、簡述幾個css hack

　　(1) 圖片間隙　　在div中插入圖片，圖片會將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；　　dt li 中的圖片間隙。hack：給<img>添加display：block；　　(2) 默認高度，IE6如下版本中，部分塊元素，擁有默認高度（低於18px）　　hack1：給元素添加：font-size：0；　　hack2：聲明：overflow：hidden；　　表單行高不一致　　hack1：給表單添加聲明：float：left；height：；border： 0；　　鼠標指針　　hack：若統一某一元素鼠標指針爲手型：cursor：pointer；　　當li內的a轉化塊元素時，給a設置float，IE裏面會出現階梯狀　　hack1：給a加display：inline-block；　　hack2：給li加float：left；