平時收集到的一些問題

【1.網頁亂碼的問題是如何產生的。怎麼樣解決？】
形成html網頁亂碼緣由主要是html源代碼內中文字內容與html編碼不一樣形成.主要狀況有如下三種：
1.好比網頁源代碼是gbk的編碼，而內容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現html亂碼。反之網頁是編碼utf-8，內容是gbk也會出現亂碼。
二、html網頁編碼是gbk，而程序從數據庫中調出呈現是utf-8編碼的內容也會形成編碼亂碼。
三、瀏覽器不能自動檢測網頁編碼，形成網頁亂碼。
解決辦法 ：
在編輯html代碼時，在meta中添加charset 告訴瀏覽器該頁面的編碼方式，並在保存代碼的時候以指定的編碼方式保存。網頁亂碼的問題的產生是由於網頁被保存時的編碼格式與瀏覽器解析該網頁時用的編碼格式不一致，保存網頁的格式與聲明網頁的解碼格式一致，便可解決問題

【顏色有幾種寫法】
有三種：
顏色名稱：red blue yellow black等
十六進制：#ffffff(可簡寫爲#fff)
RGB原色：rgb（255，233，242）【區間：0~255】
RGBA透明色：rgba（233，243，211，0.2）【a的區間：0~1】

【doctype html 的做用是什麼？】
：DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記 語言解析器，它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。

【嚴格模式和混雜模式指什麼？】
瀏覽器廠商開始建立與標準兼容的瀏覽器時，他們但願確保向後兼容性。爲了實現這一點，他們建立了兩種呈現模式：標準模式和混雜模式
在標準模式中，瀏覽器以其支持的最高標準呈現頁面，；
在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式一般模擬老式瀏覽器的行爲以防止老站點沒法工做。

【meta 有什麼做用，常見的值有哪些？】
meta 用name屬性主要用於描述網頁，對應於content（網頁內容），以便於搜索引擎機器人查找、分類。http-equiv用以說明主頁製做所方法。
常見的值有：charset=「utf-8」 name=「content-type」 content=「text/html」 name=「keywords」 content=「 ····」

【常見的瀏覽器有哪些，什麼內核】
常見的瀏覽器有

• IE——irident-俗稱IE內核
• chrome——blink內核（基於webkit）
• opera——presto內核
• safari——webkit內核
• firefox——gecko內核

【樣式有幾種引入方式? link 和 @import有什麼區別】
：樣式有三種引入方式。主要分爲
1.外部樣式 例如
<link rel=「stylesheet」 href=「xx.css」>
2.內部樣式 例如
<style type=「text/css」>
p{
color:red;
}
</style>
3.內聯樣式 例如
<div style=「width:20px;height:20px;color:red;」>內聯樣式</div>

link和@import有什麼區別？
我的以爲通俗來講，link和@import標籤做用都是調用css文件。區別就是：
①：link標籤是一個html標籤，而@import標籤是個css標籤（至關於兩個不一樣陣營。）
②：link標籤除了調用CSS以外還有其餘做用，臂如：聲明頁面連接屬性，聲明目錄，rss等。而@import就只能調用css。
③：當一個頁面被訪問時，link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。

用link引用css文件
<link rel="stylesheet"type=「text/CSS」 href=「my.css」>
用@import引用css文件
<style>
@import url(my.css)
</style>

【文件路徑…/main.css 、./main.css、main.css有什麼區別】
./main.css=main.css 都是當前文件夾下的mian.css文件
…/main.css 是當前文件夾上一級文件夾下面的mian.css文件

[console.log的做用是什麼？]
主要是方便你調式javascript用的。你能夠看到你在頁面中輸出的內容。

相比alert他的優勢是：
用console.log用來前端調試，能夠在console頁面查看，console.log的輸出相對alet更加方便，可以顯示對象的內容，不會打斷頁面操做，輸入完之後仍可對頁面繼續操做。

【text-align: justify是什麼？】
text-align:justify是：單詞兩端對其，每一行被展開爲寬度相等，

上面一個是使用text-align:justify後的效果：（和平時看的報紙雜誌相似）
中間一個是使用text-left後的效果
下面一個是使用text-align:center後的效果（至關於從最中間開始往兩邊分散排列。）

【.px、em、rem分別是什麼？有什麼區別？如何使用】

.px固定大小。

而em 是相對於父級的文字大小，若是父級沒有設置。則以繼續向上查找父級，直到根目錄，都沒有則以瀏覽器默認字體大小16px 相對換算。
rem。則是相對於html根目錄。與父級設定文字大小關係無關。

display: none 和 visibility: hidden有什麼做用？有什麼區別？
兩者都是隱藏HTML元素，在視覺效果上沒有區別，但在一些DOM操做中兩者仍是有所不一樣的。
CSS display:none;
使用該屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」; 瀏覽器視爲不存在，且不加載！
visibility:hidden;
使用該屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），可是在瀏覽時仍保留位置。而它所佔據的空間位置仍然存在，也便是說它仍具備高度、寬度等屬性值。

【line-height有什麼做用?】
line-height:的意思是設置字體行間高度，line-height 不直接影響元素高度，而是影響文本每行的高度，若是元素內因換行而產生多行文本，那麼 line-height 對元素高度的影響也要乘上行數
line-height高度和height高度設置一致可讓文本實現垂直居中。

【a 標籤的href, title, target 是什麼？ title 和 alt有什麼區別？如何新窗口打開連接?】
a標籤的href中文意思是超文本引用，用於指定超連接目標的URL.
title 至關於解釋a標籤是作什麼的。給a標籤取名字加註釋，當鼠標放在a標籤上時，回顯示title內容。
target 設置a標籤的打開方式(規定在何處打開鏈接文檔)。是在本窗口打開，仍是在一個新窗口打開等等。

①：若是正常瀏覽網頁圖片時，不會顯示出alt.鼠標放置上去會顯示title名稱.可是若是網速很差，或者圖片連接地址錯誤，使得圖片加載不出來，會顯示alt名稱，
②：同時設置alt信息會方便搜索引擎搜索圖片更加直接，有利於被搜索引擎抓取。

【1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什麼區別？使用場景是什麼？ 可否嵌套？】

三者語義上的區別：
有序列表用於表示存在順序關係的列表項（用阿拉伯數字標記）
無序列表用於表示沒有級別順序關係的列表項（用小黑點標記）
自定義列表用於表示層級關係的列表dt與dd是層級關係（例如：某班某某）
三者能夠互相嵌套。

【如何去除列表前面的點或者數字？】
使用list-style:none;屬性去除列表前面的點或者數字

【class 和 id 有什麼區別？何時用 class 何時用 id？】
class是類選擇器，能夠重複使用，而id選擇器只能使用一次。
大多數狀況使用class。由於id選擇器只能使用一次。推薦在大範圍的時候用ID（例如head和footer）ID中分類小的部分用class,這樣就能更好的佈局了
另外id的優先級高於class選擇器
類型例如p（1）<class(10)<id(100)<style(1000)<js

【塊級元素、行內元素是什麼？有什麼區別？分別對應哪些經常使用標籤？】
塊級元素特色
①老是在新行上開始，佔據一整行；
②高度，行高以及外邊距和內邊距均可控制；
③寬帶始終是與瀏覽器寬度同樣，與內容無關；
④它能夠容納內聯元素和其餘塊元素。
經常使用的塊級元素標籤：
<ul>,<ol>,<dl>,<div>,<li>,<dd>,<dt>,<p>,<form>,<h1>~<h6>,<table>,<tr>

行內元素特色
①和其餘元素都在一行上；
②高，行高及外邊距和內邊距部分可改變；
③寬度只與內容有關；
④行內元素只能容納文本或者其餘行內元素。
不能夠設置寬高，其寬度隨着內容增長，高度隨字體大小而改變，內聯元素能夠設置外邊界，可是外邊界不對上下起做用，只能對左右起做用，也能夠設置內邊界，可是內邊界在ie6中不對上下起做用，只能對左右起做用
經常使用的行內元素標籤
<a>、<span>、<img>、<input>、<textarea><em><strong><label>

【display: block、display: inline、display: inline-block分別有什麼做用?】
display: block表示該元素顯示爲一個塊級元素,單獨佔一行
display: inline表示該元素顯示爲內聯元素，不換行
display: inline-block表示內聯塊元素，既不換行又可使用塊元素所擁有的屬性

下面代碼的做用

做用於頁面佈局。將頁面分爲頭部、內容、頁腳三部分

【如何理解 HTML CSS 語義化?】
html css的語義化就是。標準規範的使用這些元素，使其正確、方便、高效的呈現頁面內容。確保後期維護人員對於代碼的維護，和搜索引擎對於相關內容精確的抓取。

【form表單有什麼做用？有哪些經常使用的input 標籤，分別有什麼做用？】
form表單的做用是：把表單中的數據提交到後臺進行處理，進行數據交互。
經常使用的input標籤

type=「text」: 用於輸入文本。placeholder屬性（可選）展現的是輸入框裏的提示，maxlength（可選）限制最大輸入長度
type=「password」: 用於輸入密碼，輸入的內容顯示爲星號
type=「radio」: 單選圓圈按鈕。注意：name要相同才能實現單選，value要有值
type=「checkbox」: 複選框。加checked屬性會默認選上
type=「textarea」: 文本域，用於輸入多行文本
type=「hidden」: 隱藏域，用戶看不到，用於暫存數據。或者安全性校驗

【post 和 get 方式的區別？】
post和get都是用來與後臺之間傳輸數據區別在於
①：get通常作傳輸少許數據使用，post作傳輸大量數據使用
②：get提交數據最大值爲1K。受瀏覽器限制。post提交數據理論上無限制，但受後臺服務器的限制。
③：get安全性不如post。get傳輸會在url中記錄下來，瀏覽記錄能夠查閱到，get提交數據的最大值與url可輸入值最大值有關。最大爲1k。而post則不會在url留下痕跡，瀏覽記錄查詢不到，安全性優於get.

【在input裏，name 有什麼做用？】
就是一個記號。能夠經過document.getElementsByName(" ")來取到全部具備同一個名字的節點。接下來就能夠進行操做了。
同一個id在每一個文檔裏只能賦給一個節點，而name能夠被多個節點使用。

【<button>提交</button>、<a class=「btn」 href="#">提交</a>、<input type=「submit」 value=「提交」> 三者有什麼區別？】
<button>提交</button>只是一個按鈕,能夠經過例如：
<button type=「submit」 value=「Submit」>Submit</button>
<button type=「submit」 value=「reset」>reset</button>
爲其設置事件，若是不設置，只是一個單純的按鈕.

<a class=「btn」 href="#">提交</a> 是一個a標籤,點擊會跳轉到當前頁面。

<input type=「submit」 value=「提交」>提交表單數據

【radio 如何 分組?】
依據name內容。name內容相同的爲一組。

【placeholder 屬性有什麼做用?】
placeholder 佔位符.在用戶沒有輸入時，在區域內的一段提示性文字.填寫時消失。

【type=hidden隱藏域有什麼做用? 舉例說明】
<input type=「hidden」 name=「word」 value=「aaaaa」>
隱藏域中能夠存儲表單數據，可是對訪問者不可見。
提交表單時，隱藏域中的內容也會被提交給服務器進行處理，
例如；用戶修改或提交數據時的驗證功能。具體例子還不是很清楚。

【CSS選擇器常見的有幾種?】
常見的css選擇器有：
全局選擇器：例如*{margin:0;padding:0}
id選擇器：例如#box{margin:0;padding:0}
類選擇器：例如.box{margin:0;padding:0}
標籤選擇器：例如a{text-decoration:none;}
組合選擇器：例如 a，p{color:red;}
屬性選擇器：例如input[type=「text」]{color:blue;}
僞類選擇器:例如 a:hover{color:red;}
繼承選擇器:例如 li a{color:red}
子元素選擇器：例如 ul > li{border:1px solid red;}
!important選擇器：例如 p{color:red； !important}

【選擇器的優先級是怎樣的】
全局選擇器<標籤選擇器<屬性選擇器<類選擇器<id選擇器<行間樣式<!important
注：同級權重 後加載樣式會覆蓋以前加載樣式
繼承的樣式優先級低於設置的樣式。

【class 和 id 的使用場景?】a

ID選擇器常做用於大範圍，標示度高的標籤上.如頁面佈局的頭部標籤和頁腳標籤.
而頭部和頁腳標籤中具體的標籤經常用class選擇器

使用CSS選擇器時爲何要劃定適當的命名空間？
主要是爲了使本身定義的樣式只對當前區塊生效，避免與他人產生衝突；

#header{
}/選取id=header的標籤爲其添加樣式/
.header{
}/選取class=header的標籤爲其添加樣式/
.header .logo{
}/選取class=header的標籤後代中 class="logo"的標籤爲其添加樣式/
.header.mobile{
}/選擇class=header和mobile的元素/
.header p, .header h3{
}/選擇class=header標籤中後代爲p和h3的元素/
#header .nav>li{
}/選取id=header的元素後代中class爲nav元素的直接後代li元素/
#header a:hover{
}/選取id=header的元素後代中a元素爲其添加鼠標懸停時的樣式./

---

【列出你知道的僞類選擇器】
：hover——鼠標懸停元素時候的樣式；
：active——鼠標點擊元素時候的樣式；
：link——元素的常態樣式；
：actived——元素被點擊事後的樣式；
：first-of-type——所選標籤元素中的第一個使用樣式；
：nth-of-type（n）——所選標籤元素中的第n個使用樣式；
：nth-child（n）——所選標籤的父元素的第n個子元素使用樣式；
：last-of-type——所選標籤元素中的最後一個使用樣式；
：first-child——所選標籤元素的父元素的第一個子元素使用樣式；
：last-child——所選標籤元素的父元素的最後一個子元素使用樣式；
focus——當元素獲取焦點時候使用樣式；

【first-of-type和first-child的做用和區別？】
例如：

.box h4:first-of-type{color:red}意思是 做用於class=box的標籤後代中的h4元素,把它父級元素第一個出現的h4元素顏色顯示爲紅色
使用後0.0和0.1 1都會變紅

.box h4:first-child{color:red;}的意思是 做用於class=box的標籤後代中中的h4元素，若他是它父級元素下順序爲第一的則顏色顯示爲紅色.
使用後只有0.1變紅.

【運行以下代碼，解析下輸出樣式的緣由。】
運行以下代碼 輸出後的結果是：
.item1:first-of-type{background: red;}
選中class="item1"標籤，對於父元素而言，他是父元素的第一齣現class="item1"的標籤，故選中.item1,ct-item2-item1兩項

.item1:first-child{color: blue; }
選中class=".item1"標籤，對於父元素而言，排列順序爲第一個的class="item1"的標籤，若第一個標籤不是class="item1"的標籤。則不生效。故選中.item1,ct-item2-item1兩項.

text-align: center的做用是什麼，做用在什麼元素上？能讓什麼元素水平居中
text-align：center的做用是:做用於塊級元素之上。 使其中的內聯元素實現文本水平居中。

若是遇到一個屬性想知道兼容性，在哪查看?
caniuse上查看。

opacity 和 rgba都能設置透明，有什麼區別
opacity能夠將塊裏的全部元素已經屬性設置爲透明；
rgbsa只能將其中的元素設置透明，並不能改變背景等透明度

如何讓一個div水平居中？如何讓圖片水平居中
div水平居中：div{margin:0 auto;}
讓圖片水平居中：再其塊級父元素上添加 text-align:center;

如何設置元素透明? 兼容性？
添加:opacity:0.6 (0~1數字)
IE6，IE7瀏覽器：filter:alpha(opacity=60) (0~100數字)

CSS Sprite(雪碧圖)指什麼? 有什麼做用
CSS雪碧，也有人叫CSS精靈，將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。
好處：
①：減小加載網頁圖片時對服務器的請求次數，減小服務器壓力，節約服務器流量。
②：提升頁面的加載速度。

img標籤和CSS背景使用圖片在使用場景上有何區別
若是內容對每一個訪問者是恆定不變的，則選用css背景圖。
若是圖片是須要變化的，好比網站的廣告圖片，則須要用img標籤。

title 和 alt屬性分別有什麼做用
title做用，當鼠標懸停在某一個標籤上，會出現對此標籤的一個註釋。title內容就是表情的註釋內容。
alt:是在你的圖片由於某種緣由不能加載時在頁面顯示的提示信息(臨時代替圖片的做用)，它會直接輸出在本來加載圖片的地方；

background: url(abc.png) 0 0 no-repeat;這句話是什麼意思
以abd.png這個圖片設置爲背景，水平位置0,垂直位置0，不重複鋪墊。

background-size有什麼做用? 兼容性如何? 經常使用的值是?
background-size:設置背景圖片大小。經常使用數值：px % contain cover

absolute, relative, fixed 偏移的參考點分別是什麼
position:relative偏移的參考點是相對於本身自己原來的位置
position:fixed偏移的參考點是相對於瀏覽器窗口
position:absolute偏移的參考點是相對於父容器或者瀏覽器窗口

z-index 有什麼做用? 如何使用?
屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面，具備更高的優先級。
在position屬性標籤重疊時的狀況下使用。

position:relative和負margin均可以使元素位置發生偏移?兩者有什麼區別
position:relative和負margin都是不脫離文檔流，使得元素髮生偏移，

position:relative排列後不會對周圍元素的排列發生影響，而負margin排列後會對文檔流中的頁面佈局產生影響。前者不管如何定位，元素所佔區域大小不變，然後者隨着margin的值的變化，元素所佔頁面的區域也在變化。

position:relative能夠調整定位元素的z-index層級，而負margin不能；position：relative主要配合絕對定位對頁面進行版塊佈局方面的定位，而負margin主要用於小的細節方面的位置調整。

文檔流的概念指什麼？有哪一種方式可讓元素脫離文檔流?
文檔流是文檔中可顯示對象在排列時所佔用的位置。按照本身設定的順序來進行排列
在瀏覽器窗體中,塊元素一個一個從上往下排列,行內元素從左到右排列顯示,即爲文檔流

使用position：absolute position:fixed 和float會使得元素脫離文檔流。

5.浮動致使的父容器高度塌陷指什麼？爲何會產生？有幾種解決方法
當一個浮動元素的父容器未設置高度，其中元素浮動後悔脫離文檔流，使得父容器沒法計算浮動元素的高度，致使父容器高度塌陷。
解決方法有：

• 單獨給父容器設置一個固定高度。
• 使父容器觸發BFC,觸發後浮動元素也會計算高度，從而撐開父容器高度。觸發方法能夠設置：float,overflow,inlink-block;display:table-cell等
• 給父容器設置一個僞類
  div:after{
  content:"";
  display:block;
  clear:both;}`

【在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？】
在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。
邊距摺疊時的狀況：

• 兩個相鄰盒子的外邊距都爲整數.取他們二者之間的較大的值。
• 兩個相鄰盒子的外邊距都爲負數，取他們二者之間絕對值較大的值。
• 兩個相鄰盒子的外邊距爲一正一負，取二者和。

如何不讓相鄰元素外邊距合併：

• 使得其中一個元素浮動起來。
• 使得其中一個元素觸發BFC：例如設置position:absolute、position:fixed、設置overflow:hidden、overflow:auto、display:table-cell、display:inline-block;

---

去除inline-block內縫隙有哪幾種常見方法？
使用display:inline-block後代碼換行會被解析,造成內縫隙
經常使用解決方法有：

• 全部代碼寫一行，沒有換行，就不會出現內縫隙
• 元素設置浮動
• 父級元素設置font-size:0;子元素根據須要再另外設置字體大小.
• 設置一個負的margin-left:，在對第一個子元素單獨設置margin-left。

---

父容器使用overflow: auto| hidden撐開高度的原理是什麼？
給父容器添加overflow: auto| hidden樣式，也就是觸發了BFC，在BFC中，就算是浮動元素也是要計算高度的，而後就撐開了父容器。

4.BFC是什麼？如何造成BFC，有什麼做用?
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
如何造成BFC：
CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。

• 根元素
• float的值不爲none
• overflow的值不爲visible
• display的值爲inline-block、table-cell、table-caption
• position的值爲absolute或fixed`

BFC的運用：

• 清除浮動；在父容器內部元素浮動以後形成父容器高度塌陷，這個時候將父容器設定樣式，創建BFC，因爲浮動元素也計算高度，就把塌陷的父元素給撐起來了；
• 用於防止邊距合併，實質上外邊距合併是由BFC致使的，毗鄰塊盒子的垂直外邊距摺疊只有他們是在同一BFC時纔會發生，若是他們屬於不一樣的BFC，他們之間的外邊距將不會摺疊。因此經過建立一個新的BFC咱們能夠防止外邊距摺疊；
• 用於防止文字環繞；
• 用於多列布局；當咱們設計一個多列布局佔滿寬度時，最後一列被擠到下一行，在其中一個列的佈局中創建了一個新的BFC，它將會在前一列填充完以後的後面佔據所剩餘的空間。

1.負邊距在讓元素產生偏移時和position: relative有什麼區別?

• 負邊距margin是元素產生偏移的緣由是經過改變元素的外邊距margin。使得元素在文檔流中的位置發生改變。從而會影響後面元素的文檔流。
• 而position:relative是讓元素自己相對於原來位置發生偏移，可是元素在文檔中的原來的位置並無發生變化，不會影響到後面元素的排版。

---

使用負 margin 造成三欄佈局有什麼條件?

• 三欄佈局中的三個元素都發生浮動，（中間自適應元素，放在第一個優先渲染。）
• 在父容器上設置左右padding給側邊欄預留出位置.(padding值等於側邊寬度)
• 左右兩側邊欄元素設置負的margin-left；使得三個浮動元素都在同一行。
• 使用position:relative 使得左右側邊欄分別到左右兩邊。造成一個三欄佈局

---

聖盃佈局的原理是怎樣的? 簡述實現聖盃佈局的步驟

• 聖盃佈局是利用了給浮動元素設置負margin從而實現垂直方向的偏移，而後利用position定位來對側邊欄進行位置調整；
• 首先須要將三欄塊元素所有float，而後分別對每一個側邊欄的浮動元素添加合適的負margin，
• 其次對父容器進行padding值的設置，最後利用position：relative進行位置的偏移

雙飛翼佈局的原理？實現步驟？
雙飛翼佈局至關於在聖盃佈局的基礎上。人爲的用margin 把兩個側邊欄的位置給空出來。
實現步驟：

• 先用一個div把main元素包裹起來，利用float:left使div塊和兩個側邊欄都浮動。
• 而後利用負margin。讓三個元素都在同一行。
• 再給main元素加一個左右的外邊距margin（距離等於左右邊框的寬度）。
• 再給父級元素清除浮動。