搜尋

首頁 >web前端 >css教學 >HTML+CSS部分前端基礎面試題

HTML+CSS部分前端基礎面試題

coldplay.xixi
coldplay.xixi轉載
2020-08-03 15:44:185143瀏覽

HTML+CSS部分前端基礎面試題

1.行內元素與區塊級元素?img算什麼?行內元素怎麼轉化為區塊級元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文字或其他行內元素；其中img是行元素
區塊級元素：總是在新行上開始，高度、行高及外邊距和內邊距都可控制，可以容納內斂元素和其他元素；
行元素轉換為區塊級元素方式：display：block；

專題推薦：2020年CSS面試題彙整（最新）

2.將多個元素設定為同一行?清除浮動有幾種方式?

將多個元素設為同一行：float，inline-block
清除浮動的方式：方法一：新增新的元素、應用clear：both;
方法二：父級p定義overflow: hidden;
方法三：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。
.clear{zoom:1;}
.clear:after{content:」」;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

#3.怪異盒子模型box-sizing？彈性盒模型|盒佈局?

在標準模式下的盒模型：盒子總寬度/高度=width/height padding border margin
在怪異模式下的盒模型下，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height margin = 內容區寬度/高度padding border margin;
box-sizing有兩個值一個是content-box，另一個是border-box。
當設定為box-sizing:content-box時，將採用標準模式解析計算；
當設定為box-sizing:border-box時，將採用怪異模式解析計算。

4.簡述幾個css hack?

(1) 圖片間隙
在p中插入圖片，圖片會將p下方撐大3px。 hack1：將e388a4556c0f65e1904146cc1a846bee與a1f02c36ba31691bcfe87b2722de723b寫在同一行。 hack2：給a1f02c36ba31691bcfe87b2722de723b加上display：block；
dt  li 中的圖片間隙。 hack：為a1f02c36ba31691bcfe87b2722de723b新增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;

5.href和src區別?title和alt

href (Hypertext Reference)指定網路資源的位置（超文本引用），從而在目前元素或目前文件和由目前屬性定義的需要的錨點或資源之間定義連結或關係，在link和a 等元素上使用。
src (Source)屬性僅嵌入目前資源到目前文件元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標籤，又是html屬性，title作為屬性時，用來提供元素額外說明資訊.
alt：alt是html標籤的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息.

6.transform？ animation？區別?animation-duration

Transform:它和width、left一樣，定義了元素很多靜態樣式實現變形、旋轉、縮放、移位及透視等功能，透過一系列功能的組合我們可以實現很酷的靜態效果（非動畫)。
Animation:作用於元素本身而不是樣式屬性,屬於關鍵幀動畫的範疇，它本身被用來替代一些純粹表現的javascript代碼而實現動畫,可以通過keyframe顯式控制當前幀的屬性值.
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。

7.nth-of-type | nth-child?

舉例說明：
ff6d136ddc5fdfeffaf53ff6ee95f185 e388a4556c0f65e1904146cc1a846bee11194b3e26ee717c64999d7867364b1b4a3 45a2772a6b6107b401db3c9b82c049c222254bdf357c58b8a65c66d7c19c8e4d114 25edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62< 25edfb22a4f469ecb59f1190150159c61bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62bed06894275b65c1ab86501b08a632eb ;li>3bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
li:nth-of-type(2):表示ul下的第二個li元素 
li:nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）。
建議一般使用nth-of-type，不容易出問題。

8. :before 和::before 區別?

#單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。對於CSS2之前已有的偽元素，例如:before，單冒號和雙冒號的寫法::before作用是一樣的。

9.如何讓一個p 上下左右居中?

#答案：有三種方法。 

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 和css3.0

#答案：css3加強了css2的功能，增加了新的屬性和新的標籤，並且刪除了一些冗餘的標籤，在佈局方面減少了程式碼量。以前比較複雜的佈局現在一個屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動畫之類的)，還有在盒子模型和列表模組都進行了改進。不過CSS3相容性不好，只有一些進階版本的瀏覽器支援。

11.彈性盒子模型?flex|box區別?

(1) 引入彈性盒佈局模型的目的是提供一種更有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。

即便容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的運作。在這個佈局模型中，容器會根據佈局的需要，調整其中包含的條目的尺寸和順序來最佳地填滿所有可用的空間。

當容器的尺寸因螢幕大小或視窗尺寸而變化時，其中包含的條目也會被動態地調整。例如當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。

在傳統的佈局方式中，block 佈局是把區塊在垂直方向從上到下依序排列的；
而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制，可以由開發者自由操作。

(2) flex與box的差別: display：box 是舊規範，要兼顧古董機子就加上它；父級元素有display:box;屬性之後。他的子元素裡面加上box-flex屬性。可以讓子元素依照父元素的寬度進行一定比例的分佔空間。 flex是最新的，董機老機子不支援的；

父元素設定display:flex後，子元素寬度會隨父元素寬度的改變而改變，而display:box不會。 Android UC瀏覽器只支援display: box語法；而iOS UC瀏覽器則支援兩種方式。

12.viewport 所有屬性 ？

(1)width :設定layout viewport的寬度，為一個正整數，或字串'device-width';
(2)initial-scale:設定頁面的初始縮放值，為一個數字，可以帶小數。
(3)minimum-scale:允許使用者的最小縮放值，為一個數字，可以帶小數。
(4)maximum-scale:允許使用者的最大縮放值，為一個數字，可以帶小數。
(5)height:設定layout viewport的高度，這個屬性對我們來說並不重要，很少使用
(6)user-scalable:是否允許使用者進行縮放，值為'no'或'yes' 。
安卓中也支援：target-densitydpi，表示目標設備的密度等級，作用是決定css中的1px    代表多少物理像素
(7)target-densitydpi:值可以為一個數值或high-dpi 、 medium-dpi、low-dpi、device-dpi 這幾個字串中的一個

13.如何理解HTML結構的語意化？

所謂標籤語意化，就是指標籤的意思。語意化的主要目的就是讓大家直觀的認識標籤(markup)和屬性(attribute)的用途和作用，對搜尋引擎友好，有了良好的結構和語義我們的網頁內容便自然容易被搜尋引擎抓取，這種符合搜尋引擎收索規則的做法，網站的推廣便可以省下不少的功夫，而且可維護性更高，因為結構清晰,十分易於閱讀。這也是搜尋引擎優化SEO重要的一步。

14.偽類選擇器和偽元素？ c3中引入的偽類選擇器有？ c3中偽元素有?

偽類別用一個冒號來表示，而偽元素則用兩個冒號來表示。

偽類選擇器：
由於狀態是動態變化的，所以一個元素達到特定狀態時，它可能會得到一個偽類別的樣式；當狀態改變時，它又會失去這個樣式。

偽元素選擇器：
並不是針對真正的元素所使用的選擇器，而是針對CSS中已經定義好的偽元素所使用的選擇器；

c3中引入的偽類選擇器：
:root()選擇器，根選擇器，符合元素E所在文件的根元素。在HTML文件中，根元素始終是100db36a723c770d327fc0aef2ce13b1。 :root選擇器等同於100db36a723c770d327fc0aef2ce13b1元素。

:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當作頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，並且跳到target元素後起作用。

:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

:nth-child()選擇某個元素的一個或多個特定的子元素。

:nth-last-child()從某父元素的最後一個子元素開始計算，來選擇特定的元素

:nth-of-type(n)選擇器和: nth-child(n)選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。

:only-child表示的是一個元素是它的父元素的唯一一個子元素。

:first-line為某個元素的第一行文字使用樣式。

:first-letter 為某個元素中的文字的首字母或第一個字使用樣式。

:before  在某個元素之前插入一些內容。

:after  在某個元素之後插入一些內容。

c3中偽元素：
::first-line選擇元素的第一行，比如說改變每個段落的第一行文字的樣式
::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常用"content"配合使用，見過最多的就是清除浮動
::selection用來改變瀏覽網頁選中文的預設效果

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

* 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  新的技術刪除」 websocket, Geolocation
* 移除的元素純表現的元素：basefont，big，center，font, s，strike，tt，u；  
對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：  
* IE8/IE7/IE6支援透過document.createElement方法產生的標籤， 可以利用此特性讓這些瀏覽器支援HTML5新標籤， 瀏覽器支援新標籤後，還需要新增標籤預設的樣式：  
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架6fc79538f41ba7309e847292db36ab30 3f1c4e4b6b16bbbd69b2ee476dc4f83a         src="html5shim.googlecode.com"2cacc6d41bbb37262a98f745aa00fbf0  ef8d428f62053f467d29023cecb49d94
* 如何區分： DOCTYPE宣告\新增的結構元素\功能元素

#16.placeholder?如何在ie8上相容placeholder這個效果

#
方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；

当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可

此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。
HTML：<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>CSS：.phcolor{ color:#999;}JS$(function(){  
  //判断浏览器是否支持placeholder属性  supportPlaceholder=&#39;placeholder&#39;in document.createElement(&#39;input&#39;),
  placeholder=function(input){
    var text = input.attr(&#39;placeholder&#39;),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数  if(!supportPlaceholder){
    $(&#39;input&#39;).each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }});
方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。
CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){  
   //判断浏览器是否支持placeholder属性   supportPlaceholder=&#39;placeholder&#39; in document.createElement(&#39;input&#39;);
   if(!supportPlaceholder){
     //初始状态添加背景图片     $("#uname").attr("class","phbg");
     //初始状态获得焦点     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，添加背景图片；有值时去掉背景图片     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按键按下的第一时间去掉背景图片      $("#uname").removeClass("phbg");
     });
   }});
方法三：
使用插件：Placeholders.js

17.常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）   #box{ float:left; width:10px; margin:0 0 0 100px;}  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

*  渐进识别的方式，从总体中逐渐排除局部。    首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。    接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。  
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9;        +background-color:#a200ff;  _background-color:#1e0bd1;  }  

*  IE下,可以使用获取常规属性的方法来获取自定义属性,    也可以使用getAttribute()获取自定义属性;    Firefox下,只能使用getAttribute()获取自定义属性.     解决方法:统一通过getAttribute()获取自定义属性。

* IE下,event对象有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 {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](w3.org/TR/html5/single-)推荐的写法：`0583f58d9786e05a39f68209743461b5`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1、盡量減少HTTP請求次數
2、減少DNS查找次數
3、避免跳轉
4、可快取的AJAX
5、延遲載入內容
6、預載入
7、減少DOM元素數量
8、根據網域劃分頁面內容
9、讓iframe的數量最小
10、不要出現404錯誤
11、使用內容分發網路
12、為檔案頭指定Expires或Cache-Control        13、Gzip壓縮檔案內容
14、設定ETag
15、儘早刷新輸出緩衝
16、使用GET來完成AJAX要求
#17、請把樣式表置於頂部
18、避免使用CSS表達式（Expression）
19、使用外部JavaScript和CSS
20、削減JavaScript和CSS
21、用2cdf5bf648cf2f33323966d7f58a7f3f代替@ import
22、避免使用濾鏡
23、把腳本置於頁面底部
24、剔除重複腳本

19.jquery版本?1.11相容?

Query 2.x系列和jQuery 1.x擁有相同的API，但不再支援IE6、7、8。
建議使用 1.x version，除非你確定IE6、7、8用戶不再造訪網站。
jquery1.11屬於1.x 版本，其相容IE6、7、8，所以也支援IE9.

20.區塊級？行內？空元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或其他行內元素
區塊級元素：總是在新行上開始，高度、行高及外邊距和內邊距都可控制，可以容納內斂元素和其他元素；
空元素：在HTML元素中，沒有內容的HTML 元素稱為空元素。空元素是在開始標籤中關閉的。 0c6dc11e160d3b678d68754cc175188a 就是沒有關閉標籤的空元素。

21.media屬性？ screen？ All？ max-width?min-width?

media 屬性規定被連結文件會顯示在什麼裝置上。 media 屬性用於為不同的媒介類型規定不同的樣式。 Screen電腦預設螢幕，all適用於所有設備，max-width超過最大寬度就不執行，min-width必須大於最小寬度才會執行。

22.meta標籤的name屬性值？

name 屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是方便搜尋引擎機器人尋找資訊和分類資訊用的。
meta標籤的name屬性語法格式是：＜meta name="參數" content="具體的參數值"＞。
其中name屬性主要有以下幾個參數：
A 、Keywords(關鍵字)說明：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼。
B 、description(網站內容描述) 說明：description用來告訴搜尋引擎你的網站主要內容.
C 、robots(機器人精靈)說明：robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。
content的參數有all,none,index,noindex,follow,nofollow,預設是all。
範例：＜meta name="robots" content="none"＞D 、author(作者)

23.一般做手機頁面切圖有幾種方式?

響應式佈局，彈性佈局display：flex，利用js編寫設定比例，為根元素設定像素，使用rem為單位。

24.px/em/rem有什麼差別？為什麼通常給font-size 設定的字體為62.5%

相對於目前物件內文字的字體尺寸。如目前對行內文字的字體尺寸未被人為設置，則相對於瀏覽器的預設字體尺寸。
1、em的值並不是固定的；
2、em會繼承父級元素的字體大小。使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，透過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。
rem是相對於瀏覽器進行縮放的。 1rem預設是16px，在響應式佈局中，一個個除來轉換成rem，太麻煩，所以重置rem
body{font-size=62.5%    } 此時1rem = 10px;若是12px則是1.2rem .

25.sass和scss有什麼差別?sass一般怎麼樣編譯的

檔副檔名不同，Sass 是以「.sass」字尾為副檔名，而SCSS 是以“.scss”後綴為擴展名；語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而SCSS 的文法書寫和我們的CSS 文法書寫方式非常類似。

26.如果css進行最佳化如何處理？

壓縮打包，圖片整合，避免使用Hack，解決相容問題，使用簡寫，讓CSS能保證日後的維護。

27.css檔如何壓縮合併?gulp ?

#
使用gulp, 首頁全域安裝gulp。
1、npm install --global gulp
2、其次局部安裝gulp。 npm install gulp --save-dev
3、在專案根目錄下建立一個名為gulpfile.js 的檔案
var gulp = require('gulp');
gulp.task('default' , function() {
// 將你的預設的任務代碼放在這});
4、執行gulp。 （預設的名為default 的任務（task）將會被運行，想要單獨執行特定的任務（task），請輸入gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869）
gulp
合併和壓縮JS 、CSS檔案
壓縮JS，CSS檔案需要引用以下元件：
gulp-minify-css: 壓縮css

28.元件?模組化程式設計？

元件化程式設計: 將js css html包裝一起提供方法和效果；
模組化化: 將相同的功能抽出來存放在一個位置進行程式設計

29.圖片和文字在同一行顯示?

1 在css中為p添加上「vertical-align:middle」屬性。
2 分別把圖片和文字放入不同的p中，然後用「margin」屬性定位，就可以讓他們顯示在同一行。
3 把圖片設定為背景圖片。

30.禁止事件冒泡

event.stopPropagation()

31.禁止預設事件

#event.preventDefault()

32. 資料標籤中active hover link visited 正確的設定順序是什麼?

a標籤的link、visited、hover、 active是有一定順序的​​
a:link  
a:visited  
a:hover
a:active

33.a標籤中如何停用href 跳轉頁面或定位連結

e.preventDefault();
href="javascript:void(0);

34.手機端上圖片長時間點擊會選取圖片，如何處理?

onselect=function() {
return false
}

35.video標籤的幾個個屬性方法

src：影片的URL   poster：影片封面，沒有播放時顯示的圖片  preload：預先載入   autoplay：自動播放  loop：循環播放 controls：瀏覽器自帶的控制條   width：視訊寬度  controls：瀏覽器自帶的控制條 ：視訊高度

36.常見的視訊編碼格式有幾種?視訊格式有幾種?

視訊格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式
視訊編碼格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

37.canvas在標籤上設定寬高和在style中設定寬高有什麼區別？

canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒有指定或值不正確，就被設定成預設值。

38.border-image？box -sizing?

Border-image : 圖形化邊框
Box-sizing : 屬性可讓您以特定的方式定義符合某個區域的特定元素。
語法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height之內。物件的實際寬度等於設定的width值和border、padding之和，即( Element width = width border padding) 此屬性表現為標準模式下的盒子模型.
Border-box : padding和border被包含在定義的width和height之內。物件的實際寬度就等於設定的width值，即使定義有border和padding也不會改變物件的實際寬度，即 ( Element width = width ) 此屬性表現為怪異模式下的盒子模型。

39.漸進增強與優雅降級

#
漸進增強 progressive enhancement：針對低版本瀏覽器進行建立頁面，保證最基本的功能，然後再針對進階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation：一開始就建立完整的功能，然後再針對低版本瀏覽器進行相容。
區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時確保其根基處於安全地帶。
「優雅降級」觀點
「優雅降級」觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為「過時」或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段，並將測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這個設計範例下，舊版的瀏覽器被認為只能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
「漸進增強」觀點
「漸進增強」觀點則認為應關注內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進增強」成為更合理的設計範例。這也是為什麼它立即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支援 (Graded Browser Support)」策略的原因所在。
那麼問題來了。現在產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（CSS3），要求相容（使用圖片背景，放棄CSS3），你會如何說服他？

40.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型和彈性盒模型?  

IE當padding border的值小於width或者height:
盒子模型的寬度=margin(左右) width（width已經包含了padding和border的值）
盒子模型的高度=margin(上下) height（height已經包含了padding和border的值）
當padding border的值大於width或height:
盒子模型的寬度=margin(左右) padding(左右) border(左右)
盒子模型的高度=margin(上下) padding(上下) border (上下) 19px （加一預設行高19px）   所以相當於是padding border和width或height比大小，誰大取誰。
以上幾種DOCTYPE都是標準的文件類型，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式） CSS3box -sizing有兩個值一個是content-box，另一個是border-box。
當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；
當設定為box-sizing:border-box時，將採用怪異模式解析計算；
Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個盒子在其他盒子中的分佈方式以及如何處理可用的空間。使用該模型，可以輕鬆的創建自適應瀏覽器視窗的流動佈局或自適應字體大小的彈性佈局。

41.animation對應的屬性

寫法：animation: name duration timing-function delay iteration-count direction;
下面是對應的屬性的介紹
animation-name        規定需要綁定到選擇器的keyframe 名稱。
animation-duration        規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function        規定動畫的速度曲線。
animation-delay        規定在動畫開始前的延遲。
animation-iteration-count        規定動畫應該播放的次數。
animation-direction        規定是否應該輪流反向播放動畫。

42.transition?

css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值注意區別transform，transform是進行2D轉換的如移動，比例化，反過來，旋轉，和拉伸元素。

43.h5新特性？

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.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

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：CSS视频教程

以上是HTML+CSS部分前端基礎面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：zhihu.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：2019 CSS經典面試題下一篇：2019 CSS經典面試題

相關文章

看更多