前端面試題整合（基礎篇）-有解無憂

瀏覽器的內核
IE: trident內核，Firefox：gecko內核，Safari:webkit內核，Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核，Chrome:Blink(基于webkit，Google與Opera Software共同開發)
HTML中的Doctype有什么作用
此標簽可告知瀏覽器檔案使用哪種 HTML 或 XHTML 規范，（重點：告訴瀏覽器按照何種規范決議頁面）
div+css的布局較table布局有什么優點
改版的時候更方便只要改css檔案，頁面加載速度更快、結構化清晰、頁面顯示簡潔，表現與結構相分離，易于優化（seo）搜索引擎更友好，排名更容易靠前
img的alt與title有何異同？ strong與em的異同？
alt(alt text):為不能顯示影像、表單或applets的用戶代理（UA），alt屬性用來指定替換文字，替換文字的語言由lang屬性指定，(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性為設定該屬性的元素提供建議性的資訊，
strong:粗體強調標簽，強調，表示內容的重要性，
em:斜體強調標簽，更強烈強調，表示內容的強調點，
漸進增強和優雅降級之間的不同
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、互動等改進和追加功能達到更好的用戶體驗，優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容，區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要，降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶，
為什么利用多個域名來存盤網站資源會更有效？
CDN快取更方便
突破瀏覽器并發限制
節約cookie帶寬
節約主域名的連接數，優化頁面回應速度
防止不必要的安全問題
cookies，sessionStorage和localStorage的區別
sessionStorage用于本地存盤一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問并且當會話結束后資料也隨之銷毀，因此sessionStorage不是一種持久化的本地存盤，僅僅是會話級別的存盤，而localStorage用于持久化的本地存盤，除非主動洗掉資料，否則資料是永遠不會過期的，Cookie的作用是與服務器進行互動，作為HTTP規范的一部分而存在，而Web Storage僅僅是為了在本地“存盤”資料而生，Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域呼叫，
src與href的區別
簡單來講，src用于替換當前元素，href用于在當前檔案和參考資源之間確立聯系，
src：src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到檔案中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到檔案內，例如js腳本，img圖片和frame等元素，
當瀏覽器決議到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內，這也是為什么將js腳本放在底部而不是頭部，
harf：href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前檔案（鏈接）之間的鏈接，如果我們在檔案中添加 <link href=”common.css” rel=”stylesheet”/> 那么瀏覽器會識別該檔案為css檔案，就會并行下載資源并且不會停止對當前檔案的處理，這也是為什么建議使用link方式來加載css，而不是使用@import方式，
什么是微格式，談談理解
微格式（Microformats）是一種讓機器可讀的語意化XHTML詞匯的集合，是結構化資料的開放標準，是為特殊應用而制定的特殊格式，優點：將智能資料添加到網頁上，讓網站內容在搜索引擎結果界面可以顯示額外的提示，
在css/js代碼上線之后開發人員經常會優化性能，從用戶重繪網頁開始，一次js請求一般情況下有哪些地方會有快取處理？
dns快取，cdn快取，瀏覽器快取，服務器快取
優化大型網站加載圖片方案
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優先加載，如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載，如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗，如果圖片展示區域小于圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后大小與展示一致，
HTML結構的語意化
html本身是沒有表現的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認為這是html的表現，這些其實html默認的css樣式在起作用，所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語意化的HTML結構的優點，但是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語意，可以說瀏覽器的默認樣式和語意化的HTML結構是不可分割的，
有哪項方式可以對一個DOM設定它的CSS樣式
外部樣式表，引入一個外部css檔案
內部樣式表，將css代碼放在 <head> 標簽內部
行內樣式，將css樣式直接定義在 HTML 元素內部
CSS都有哪些選擇器
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（a[rel = "external"]）
除了前3種基本選擇器，還有一些擴展選擇器，
包括后代選擇器（利用空格間隔，比如div .a{ }）
相鄰選擇器（利用加號間隔，h1 + p）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
通配符選擇器（ * ）
偽類選擇器（a: hover, li: nth - child）
CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內
設定display屬性為none，或者設定visibility屬性為hidden
設定寬高為0，設定透明度為0，設定z-index位置在-1000em
超鏈接訪問過后hover樣式就不出現的問題是什么？如何解決？
被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

什么是Css Hack？ie6,7,8的hack分別是什么？
針對不同的瀏覽器寫不同的CSS code的程序，就是CSS hack，
示例如下：

   #test{   
        width:300px;   
        height:300px;   
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px)
     { #test {background-color:black;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }       /*chrome and safari*/

行內元素和塊級元素的具體區別是什么？
塊級元素(block)特性：總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示; 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
行內元素(inline)特性：和相鄰的行內元素在同一行;
什么是外邊距重疊？有什么效果
外邊距重疊就是margin-collapse，在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距，這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距，
折疊結果遵循下列計算規則：兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值，兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值，兩個外邊距一正一負時，折疊結果是兩者的相加的和，
rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能實作透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色，（設定rgba透明的元素的子元素不會繼承透明效果！）
水平垂直居中一個浮動元素

方法一：position加margin

方法二： diaplay:table-cell

方法三：position加?transform

方法四：flex;align-items: center;justify-content: center

方法五：display:flex;margin:auto

方法六：純position

方法七：兼容低版本瀏覽器，不固定寬高
講一下你對盒模型的了解
有padding、margin、border、content屬性
box-sizing: content-box 是W3C盒子模型，元素的width和height屬性只包含內容content部分，不包含內邊距padding和邊框border部分，
box-sizing: border-box 是IE盒子模型，元素的width和height屬性同時包含內容content，內邊距padding和邊框border部分
position定位
Relitive: 相對于自身,會指引子元素相對于他自身進行定位
Absolute: 根據父元素的relitive進行定位
Fixed:現對于window視窗定位
rem原理與em/ vw/vh 區別
Rem是基于根元素的字體大小發生改變,而em是基于body的字體大小發生改變
1.因為html5和css3引入視口的概念來代替顯示幕的物理尺寸，通過在meta標簽上的設定，視口的長寬可以跟設備的物理解析度相等，也可以不相等（以便手機上可以實作用兩個手指來放大會縮小頁面），可根據需要靈活掌握，在PC中，視口的長寬則是跟瀏覽器視窗的物理解析度恒等的，
2. 1vw等于視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度，同理，1vh等于視30px改成5vw，意思就是視窗寬度的5%，同理10vw，
3.不過由于vw和vh是css3才支持的長度單位，所以在不支持css3的瀏覽器中是無效的口高度（viewport height）的百分之一，
Css3的影片
@keyframes 規則用于創建影片，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的影片效果，
Sass、LESS是什么，優點
他們是CSS前處理器，他是CSS上的一種抽象層，他們是一種特殊的語法/語言編譯成CSS，
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變數，繼承，運算，函式. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)，
優點：
結構清晰，便于擴展，
可以方便地屏蔽瀏覽器私有語法差異，
封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動，
可以輕松實作多重繼承，
完全兼容 CSS 代碼，可以方便地應用到老專案中，
LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯，
display:none與visibility:hidden的區別是什么？
display : 隱藏對應的元素但不擠占該元素原來的空間，
visibility: 隱藏對應的元素并且擠占該元素原來的空間，
即是，使用CSS display:none屬性后，HTML元素（物件）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，
CSS中link和@import的區別
Link屬于html標簽，而@import是CSS中提供的
在頁面加載的時候，link會同時被加載，而@import參考的CSS會在頁面加載完成后才會加載參考的CSS
@import只有在ie5以上才可以被識別，而link是html標簽，不存在瀏覽器兼容性問題 Link引入樣式的權重大于@import的參考（@import是將參考的樣式匯入到當前的頁面中）
BFC是什么
BFC（塊級格式化背景關系），一個創建了新的BFC的盒子是獨立布局的，盒子內元素的布局不會影響盒子外面的元素，在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題 BFC是指瀏覽器中創建了一個獨立的渲染區域，該區域內所有元素的布局不會影響到區域外元素的布局，這個渲染區域只對塊級元素起作用
html常見兼容性問題
1.雙邊距BUG float引起的使用display
2.3像素問題使用float引起的使用dislpay:inline -3px
3.超鏈接hover 點擊后失效使用正確的書寫順序 link visited hover active
4.Ie z-index問題給父級添加position:relative
5.Png 透明使用js代碼改
6.Min-height 最小高度！Important 解決’
7.select 在ie6下遮蓋使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解決辦法： .opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }
10. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
行內元素有哪些?塊級元素有哪些?空(void)元素有哪些？
塊級元素：address – 地址 blockquote – 塊參考 center – 舉中對齊塊 dir – 目錄串列 div – 常用塊級容易，也是css layout的主要標簽 dl – 定義串列 fieldset – form控制組 form – 互動表單 h1 – 大標題 h2 – 副標題 h3 – 3級標題 h4 – 4級標題 h5 – 5級標題 h6 – 6級標題 hr – 水平分隔線 isindex – input prompt menu – 選單串列 noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容） noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容） ol – 排序表單 p – 段落 pre – 格式化文本 table – 表格 ul – 非排序串列
行內元素:a – 錨點 abbr – 縮寫 acronym – 首字 b – 粗體(不推薦) big – 大字體 br – 換行 em – 強調 font – 字體設定(不推薦) i – 斜體 img – 圖片 input – 輸入框 label – 表格標簽 s – 中劃線(不推薦) select – 專案選擇 small – 小字體文本 span – 常用行內容器，定義文本內區塊 strike – 中劃線 strong – 粗體強調 sub – 下標 sup – 上標 textarea – 多行文本輸入框 tt – 電傳文本 u – 下劃線 var – 定義變數
知名的空元素：<br><hr><img><input><link><meta>鮮為人知的是： <area><base><col><command> <embed><keygen><param><source><track><wbr>
前端頁面有哪三層構成
結構層 Html 表示層 CSS 行為層 js
CSS哪些屬性可以繼承？
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承：border padding margin width height ;
CSS優先級演算法（權重）
優先級就近原則，樣式定義最近者為準
載入樣式以最后載入的定位為準
!important> 行內 > id > class > tag
高度自適應，寬度是高度的一半，如何布局
利用padding-top/bottom/left/right屬性在設定為百分比時按照父元素的寬度來進行設定，可以通過設定padding-top/bottom：100%；padding-left/right:50%;將元素撐開，使用需注意設定父元素的寬度，特別是在父元素的寬度是繼承的情況下，也可更具情況只設定父元素的寬度而不設定高度來隱藏父元素；

類似圣杯布局的多種代碼方式
圣杯布局是一種很常見的css布局，
要求：
1、上部和下部各自占領螢屏所有寬度，
2、上下部之間的部分是一個三欄布局，
3、三欄布局兩側寬度不變，中間部分自動填充整個區域，
4、中間部分的高度是三欄中最高的區域的高度，

浮動實作
外層框架
<div class="header">這里是頭部</div>
<div class="container"></div>
<div class="footer">這里是底部</div>
.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
填充三欄
這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮動，
另外：把中，左，右三個區域設定成度浮動，給左右兩塊區域固定的寬度，中間部分的寬度設定成100%，
這樣實作下來，因為浮動的關系，[middle]會占據[container]的所有部分，而左右兩塊區域都會被擠到下面，但是，由于第一步設定了內邊距的關系，[container]的左右各剩余了一塊區域，且寬度與左右區域相同，
<div class="header">這里是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}
移動左側區域
接下來要做的就是把左右兩塊區域挪到空出來的內邊距空間里去，
先移動左邊，新加一個樣式 margin-left:-100%，這樣一來，因為浮動關系，就把左邊塊上移到了[middle]左側，與其交織在一起，而右側欄就自動往左移動，然后再給左側欄一個偏移量，偏移量恰好是其寬度，這一步要給[container]的position設成relative
<div class="header">這里是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這里是底部</div>
.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}
移動右邊
同上一步的原理一樣，把右側區域也給弄上去，設定負外邊距和本身寬度相同就行了，
<div class="header">這里是頭部</div>
<div class="container">
    <div class="middle">中間部分</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

 


flexbox彈性盒子實作
彈性盒子用來實作圣杯布局特別簡單，只需要把中間的部分用flex布局即可，
<div class="header">這里是頭部</div>
<div class="container">
    <div class="left">左邊</div>
    <div class="middle">中間部分</div>
    <div class="right">右邊</div>
</div>
<div class="footer">這里是底部</div>

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}
很簡單，在寫html的時候，因為不再涉及到浮動，只需要按照左中右的順序來寫就可以了，左右兩塊區域的寬度寫死，把中間的區域的flex屬性設定成1就可以了，
css grid網格
grid是一種新的布局方式，截止2018年初，絕大多數瀏覽器都已經支持css grid，
其原理就是把頁面的區域劃分成一個一個的網格，就和圍棋的棋盤一樣，
用網格來解決圣杯問題，可以擺脫彈性盒子時需要格外加一個[container]的問題，也就是左中右三款區域不需要在他們外邊包裝一個額外的div，
<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>
  
body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}
簡單說一下代碼的實作，回頭會專門看一下css grid的細節，
首先給最外層的body設成display:grid，當然，是外層父級元素即可，不一定是body，
grid-row就是說由上到下，#header占據第1格，#left,#middle,#right占據第2格，#footer占據第3格，
而grid-column表示，在橫向從左向右，分成了五格，其中#header和#footer占據全部，#left占據第1格，#middle占據第2到第4格，#right占據第5格，
不管是實作起來還是理解起來都很方便，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/198269.html

標籤：AI

上一篇：Innosetup安裝界面美化、卸載界面美化

下一篇：2020-10-31