前端面試題（HTML、CSS部分）

時間  2019-11-10
標籤 端面 試題 html css 部分 欄目 HTML 简体版
原文   原文鏈接

HTML、CSS部分：css

1、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？html

  新特性：前端

  HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
  拖拽釋放(Drag and drop) API
  語義化更好的內容標籤（header,nav,footer,aside,article,section）
  音頻、視頻API(audio,video)
  畫布(Canvas) API
  地理(Geolocation) API
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除
  表單控件，calendar、date、time、email、url、search
  新的技術webworker, websocket, Geolocationhtml5

  移除元素：
  純表現的元素：basefont，big，center，font, s，strike，tt，u；
  對可用性產生負面影響的元素：frame，frameset，noframes；
  h5新標籤兼容：
  IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
  固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
  <!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->
  如何區分：
  DOCTYPE聲明\新增的結構元素\功能元素web

2、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？算法

  CSS 選擇符：json

  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 ;

  優先級：

  !important > id > class > tag

  important 比 內聯優先級高,但內聯比 id 要高

  CSS3新增僞類舉例：

  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> 元素。

  :enabled :disabled 控制表單控件的禁用狀態。

  :checked 單選框或複選框被選中。

3、CSS3有哪些新特性？

  CSS3實現圓角（border-radius），陰影（box-shadow），

  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

  增長了更多的CSS選擇器 多背景 rgba

  在CSS3中惟一引入的僞元素是::selection.

  媒體查詢，多欄佈局

  border-image

4、解釋盒模型寬高值得計算方式，邊界塌陷，負值做用，box-sizing概念？ 

  1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內容寬度； chrom、IE9+、(添加doctype) 使用標準盒模型， 寬度 = 內容寬度。
  2. box-sizing : 爲了解決標準黑子和IE盒子的不一樣，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承 父盒子模型；
  3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合並（塌陷）爲單個外邊距（合併後最大的外邊距），這樣的現象稱之爲 外邊距塌陷。
  4. 負值做用：負margin會改變浮動元素的顯示位置，即便個人元素寫在DOM的後面，我也能讓它顯示在最前面。

5、BFC（Block Formatting Context） 是什麼？應用？ 

  1. BFC 就是 ‘塊級格式上下文’ 的格式，建立了BFC的元素就是一個獨立的盒子，不過只有BLock-level box能夠參與建立BFC，它規定了內部的Bloc-level Box 如何佈局，而且與這個獨立盒子裏的佈局不受外部影響，固然它也不會影響到外面的元素。
  2. 應用場景：
  1. 解決margin疊加的問題
  2. 用於佈局（overflow: hidden）,BFC不會與浮動盒子疊加。
  3. 用於清除浮動，計算BFC高度。

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

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

7、簡要說一下CSS的元素分類

  塊級元素：div,p,h1,form,ul,li;
  行內元素 : span,a,label,input,img,strong,em;

8、解釋下浮動和它的工做原理？清除浮動的方法

  浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

  1.使用空標籤清除浮動。

  這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。

  2.使用after僞對象清除浮動

　該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

    #parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

  3.設置overflow爲hidden或者auto

  4.浮動外部元素

9、CSS隱藏元素的幾種方法（至少說出三種）

  Opacity:元素自己依然佔據它本身的位置並對網頁的佈局起做用。它也將響應用戶交互;
  Visibility:與 opacity 惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
  Display:display 設爲 none 任何對該元素直接打用戶交互操做都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素徹底不存在;
  Position:不會影響佈局，能讓元素保持能夠操做;
  Clip-path:clip-path 屬性尚未在 IE 或者 Edge 下被徹底支持。若是要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

10、如何讓一個盒子水平垂直居中

//已知寬高
<div class="div1"></div>
<style>
    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;
    }   
</style>

//未知寬高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

//未知寬高方法二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

11、請描述一下cookies，sessionStorage和localStorage的區別？

  相同點：都會在瀏覽器端保存，有大小和同源限制。
  不一樣點：
  一、cookie會隨請求發送到服務器，做爲會話表示，服務器可修改cookie。web storage不會隨請求大宋到服務器。
  二、cookie有path的概念，子路徑能夠訪問父路徑的cookie，父路徑不能夠訪問子路徑的cookie。
  三、有效期： cookie在設置的有效期內有效，默認爲瀏覽器關閉消失。sessionStorage在會話窗口關閉後失效，localStorage長期有效，需主動刪除。
  四、sessionStorage不能共享，localStorage在同源文檔之間能夠共享，cookie在同源且符合path規則的文檔之間能夠共享。
  五、localStorage的修改會觸發其餘文檔的update事件。
  六、cooie有secure屬性要求HTTPS傳輸。
  七、瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每一個cookie不能超過4k。webStorage能夠支持5M的存儲。

12、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直爲100px，右邊的div跟隨瀏覽器大小變化（好比瀏覽器爲500，右邊div爲400，瀏覽器爲900，右邊div爲800），請寫出大概的css代碼。

// 方法一：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 200px;
            background-color: #ccc;
            float: left;
        }
        .div2{
            background-color: #ff0;
            margin-left: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

//方法二：
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .div1{
            flex-basis: 100px;
            background-color: #ccc;
            height: 300px;
        }
        .div2{
            background-color: #ff0;
            height: 300px;
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>

十3、什麼是語義化的HTML?

  直觀的認識標籤 對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！
  html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
  在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

十4、link和@import有什麼區別？

  link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
  頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
  import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

十5、常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

十6、如何解決跨域問題

  JSONP、CORS、經過修改document.domain來跨子域、使用window.name來進行跨域、HTML5中新引進的window.postMessage方法、在服務器上設置代理頁面

  一、JSONP

  原理是：動態插入script標籤，經過script標籤引入一個js文件，這個js文件載入成功後會執行咱們在url參數中指定的函數，而且會把咱們須要的json數據做爲參數傳入。

  因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求，而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

  優勢是兼容性好，簡單易用，支持瀏覽器與服務器雙向通訊。缺點是隻支持GET請求。

  二、CORS

  服務器端對於CORS的支持，主要就是經過設置Access-Control-Allow-Origin來進行的。若是瀏覽器檢測到相應的設置，就能夠容許Ajax進行跨域的訪問。

  三、經過修改document.domain來跨子域

  將子域和主域的document.domain設爲同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!並且所用的協議，端口都要一致，不然沒法利用document.domain進行跨域

  主域相同的使用document.domain

  四、使用window.name來進行跨域

  window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的

十7、前端性能優化的方式

  一、減小DOM操做
  二、部署前，圖片壓縮，代碼壓縮
  三、優化js代碼結構，減小冗餘代碼
  四、減小http請求，合理設置HTTP緩存
  五、使用內容分發cdn加速
  六、靜態資源緩存
  七、圖片延遲加載

十8、對前端工程化的理解 

  開發規範
  模塊化開發
  組件化開發
  開發倉庫
  性能優化
  項目部署
  開發流程
  開發工具

（若是有不錯的，再補充）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程