背景：

年底將至，本人這只才出門(mén)的前端菜鳥(niǎo)，終于有空閑的時(shí)間來(lái)整理一下最近投簡(jiǎn)歷時(shí)出現(xiàn)的問(wèn)題。有的是經(jīng)常使用但是沒(méi)有仔細(xì)留意造成的；有的是個(gè)人認(rèn)為根本沒(méi)人使用而忽略的。為了下次不出現(xiàn)這種錯(cuò)誤，進(jìn)行一下總結(jié)。問(wèn)題的答案有的是本人自己總結(jié)的，有的是查找資料獲取到的。對(duì)于查找到的答案會(huì)特別標(biāo)注。如果本文有什么問(wèn)題的話，希望大家積極留言，本人會(huì)對(duì)文章進(jìn)行修改。

HTML：

　1.div圖片img與div容器下有距離的解決辦法

　　這個(gè)問(wèn)題經(jīng)常出現(xiàn)在網(wǎng)站的布局，也是前端面試官作為瀏覽器兼容性經(jīng)常提起的“老標(biāo)兵”。

　　出現(xiàn)狀況：IE6,IE7下的img與div（塊元素）會(huì)出現(xiàn)一些間隔，IE7才會(huì)有這個(gè)問(wèn)題，IE8下是沒(méi)有的。

　　出現(xiàn)原因：圖片和文字等行內(nèi)元素默認(rèn)是和父級(jí)元素的baseline（baseline是基線，這里我們認(rèn)為它是水平貫穿div、豎直位置確定的一條橫線就行。）對(duì)齊的，而baseline又和父級(jí)底邊有必定間隔（與font-size,font-family有關(guān)），所以設(shè)置vertical-align:top ?/ ?bottom / text-top / text-bottom 都能夠防止這種狀況呈現(xiàn)。而且不光li，其他的block元素中包括img也會(huì)有這個(gè)景象。

　　解決方案：

　　方法一：定義圖片img標(biāo)簽vertical-align:bottom，vertical-align:middle，vertical-align:top。

　　　　　　img{vertical-align:bottom;}

　　方法二：定義容器里的字體大小為0。
　　　　　　div?{
　　　　　　　　width:110px;
　　　　　　　　border:1px?solid?#000000;
　　　　　　　　font-size:0
　　　　　　　　}

　2.高亮顯示內(nèi)容（一個(gè)面試當(dāng)中的問(wèn)題，對(duì)于搜索結(jié)果的關(guān)鍵詞進(jìn)行高亮顯示。因?yàn)槠匠Ｔ谑褂弥泻苌僖?jiàn)，所以就沒(méi)進(jìn)行關(guān)注，由此可見(jiàn)自己的基礎(chǔ)儲(chǔ)備需要提高）。

　　標(biāo)簽：<mark></mark>

　　?作用：使用mark標(biāo)簽元素，可以高亮顯示文檔中的文字以達(dá)到醒目的效果。

　　 解決方案：

　　　　<p>使用mark標(biāo)簽元素，可以<mark>高亮</mark>顯示文檔中的文字以達(dá)到醒目的效果。</p>

　　注：使用strong、em元素同樣能達(dá)到這樣的效果，不推薦使用strong、em元素，因?yàn)閟trong、em元素的作用是強(qiáng)調(diào)文本，并非僅僅是高亮顯示文本。

　3.HTML標(biāo)簽的padding與margin問(wèn)題（初開(kāi)始對(duì)于使用padding與margin都是比較粗糙的。對(duì)于標(biāo)簽布局設(shè)置都是以試為主。這個(gè)問(wèn)題是需要立即解決）

　　問(wèn)題分析：對(duì)于HTML標(biāo)簽進(jìn)行劃分，一般可以分為：塊級(jí)元素，行內(nèi)元素，空元素（可能劃分的名稱(chēng)不同，但是大約可以分為這三類(lèi)）。一般我們接觸到的都是塊級(jí)元素與行內(nèi)元素。首先我們先分析這兩種類(lèi)型標(biāo)簽的不同。

　　　　塊級(jí)元素：塊級(jí)元素會(huì)獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度。

　　　　行內(nèi)元素：?行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化。

　　注：一般情況下，塊級(jí)元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, ?height無(wú)效(注意：塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的)

　　結(jié)果：

　　　　 ?塊級(jí)元素可以設(shè)置margin 屬性和 padding屬性.并能正確顯示。

　　　　? 行內(nèi)元素的水平方向的padding-left / padding-right / margin-left / margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top / padding-bottom / margin-top / margin-bottom都不會(huì)產(chǎn)生邊距效果。（水平方向有效，豎直方向無(wú)效）

　　答案參考于：Jackie_Xie的Html中行內(nèi)元素有哪些？塊級(jí)元素有哪些？

　　4.src,url與href的區(qū)別？

　　　URL(Uniform Resource Locator,統(tǒng)一資源定位符):統(tǒng)一資源定位符是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址。互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。（我們可以簡(jiǎn)單的理解為是把資源文件存放到無(wú)數(shù)文件夾中的一個(gè)里面，而我們可以通過(guò)文件路徑查找到該文件，而該文件路徑是唯一的）

　　　分類(lèi)：

　　　　1、絕對(duì)URL（absolute URL）

　　　　絕對(duì)URL（absolute URL）顯示文件的完整路徑，這意味著絕對(duì)URL本身所在的位置與被引用的實(shí)際文件的位置無(wú)關(guān)。

　　　　2、相對(duì)URL（relative URL）

　　　　以包含URL本身的文件夾的位置為參考點(diǎn)，描述目標(biāo)文件夾的位置。如果目標(biāo)文件與當(dāng)前頁(yè)面（也就是包含URL的頁(yè)面）在同一個(gè)目錄（也就是同一個(gè)文件夾下），那么這個(gè)文件的相對(duì)URL僅僅是文件名和擴(kuò)展名，如果目標(biāo)文件在當(dāng)前目錄的子目錄中，那么它的相對(duì)URL是子目錄名，后面是斜杠，然后是目標(biāo)文件的文件名和擴(kuò)展名（比如在a文件夾下有b文件夾與c.txt,而在b文件夾下有d.txt,而我們要以c.txt為參考點(diǎn)，獲取d.txt，那么url="./d.txt"）。如果目標(biāo)文件與當(dāng)前頁(yè)面不在同一個(gè)目錄下，則需要使用"../"（../的作用是返回該目標(biāo)文件的上一層路徑），一直到目標(biāo)文件所在的文件夾與當(dāng)前頁(yè)面所在的文件夾有共同的父文件夾，然后在此查找目標(biāo)文件的路徑。

　　　重點(diǎn)：href和src 的定義與區(qū)別

　　　href和src是有區(qū)別的，而且是不能相互替換的。我們?cè)诳商鎿Q的元素上使用src，然而把href用于在涉及的文檔和外部資源之間建立一個(gè)關(guān)系。

　　　href（Hypertext Reference）

　　　指定網(wǎng)絡(luò)資源的位置，從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點(diǎn)或資源之間定義一個(gè)鏈接或者關(guān)系。（或者可以理解為超文本引用，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，它與頁(yè)面直接的關(guān)系為鏈接的關(guān)系，在加載它的時(shí)候頁(yè)面本身也不會(huì)停止其他內(nèi)容的加載。）

　　　例：<link href="style.css" rel="stylesheet" />

　　　瀏覽器明白當(dāng)前資源是一個(gè)樣式表，頁(yè)面解析不會(huì)暫停（由于瀏覽器需要樣式規(guī)則去畫(huà)或者渲染頁(yè)面，渲染過(guò)程可能會(huì)被暫停）。這與把css文件內(nèi)容卸載<style>標(biāo)簽里不相同，因此建議使用link標(biāo)簽而不是@import來(lái)把樣式表導(dǎo)入到html文檔里

　　　src（Source）

　　　僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置。（表示的是引入文件，目的是要把文件加載到html頁(yè)面中去，當(dāng)瀏覽器解析的時(shí)候會(huì)暫停其他的內(nèi)容而會(huì)先加載src內(nèi)容，必須要等到src的內(nèi)容加載完成之后才會(huì)執(zhí)行后面。這就是為什么js文件往往放在了html文件的最下面的原因。如果是在頁(yè)面head上放了js文件，目前我知道的一種方法來(lái)實(shí)現(xiàn)js最后加載的方法就是在js腳本里使用:window.onload事件處理。）

　

?

　　　

　　

　　

總結(jié)

以上是生活随笔為你收集整理的那些容易遗忘的web前端问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。