最近又到了招聘的旺季，應該有很多人踏上了找工作的路上，我今天就給大家介紹一下，我在前端這些年所遇到的問題，從簡到難，給大家講述一下。先說html部分的一些問題。後續給大家講述js部分的問題。
1.css浮動怎麼理解
首先我們要知道為什麼會用到浮動，在我們頁面布局的時候，因為塊元素有乙個獨佔一行的屬性（有點任性），為了布局需要，必須要讓幾個塊元素處於一行，所以我們用到了浮動的這種方法，算是一種利器吧。比如下面的這些**：
兩個盒子處於上下分布，因為塊元素的屬性，即使寬度不是100%，也會獨佔一行，為了讓兩個盒子在一起，我們使用浮動。但是如果僅僅對其中的乙個盒子進行浮動呢。比如下面的**：會出現問題
所以我們必須對盒子2使用float：left，才可以解決上面的問題。在浮動這個方法上，還有很多的問題，比如如果盒子1和盒子2在同乙個div下面，那麼他們浮動後，父級會出現塌陷的現象（浮動現象），也就是我們常說的要清浮動。浮動的負面作用：父級的背景色不能顯示；父級的邊框不能被撐開；margin padding設定值不能正確顯示等。在這個時候，我們就要去
清浮動，那麼清浮動有那些方法呢？（給父級設定高度；增加乙個空的子集（或者偽類），進行clear：both等等）按照這樣的思路進行思考，那麼你就會明白和關聯起來很多知識點。
2.絕對定位和相對定位怎麼理解
首先要明白的一點是，為什麼會用到這兩個屬性，因為還是布局需要。其中的absolute的使用，所對應的元素就會脫離常規的文件流。我們首先要知道這兩個定位的概念，
relative：
物件遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left 這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
absolute：
物件脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊。概念性的東西我們只需要理解就好，重要的是要知道在自己專案中什麼情況下使用相對和絕對定位。
3
.塊元素和行內元素什麼區別
塊元素獨佔一行，高度，行高以及外邊距和內邊距都可控制。
行內元素由內容撐開，且處於一行。行內元素對寬高不起作用。行內元素上下margin無效，左右可以的。行內元素上下padding有效果，但是沒有佔位。
4.css如何實現盒子水平垂直居中
方法1：
方法2：
方法3：
href 和
src的區別
href
標識超文字引用，用在
link和a
等元素上，
href
是引用和頁面關聯，是在當前元素和引用資源之間建立聯絡，
src表示引用資源，表示替換當前元素，用在
img，
script
，iframe
上，src是頁面內容不可缺少的一部分
6.常見的瀏覽器核心和字首有哪些？
瀏覽器核心：
1、trident核心：ie最先開發或使用的，也稱
ie核心
，360瀏覽器
使用的也是
ie核心；
2、webkit核心：谷歌chrome瀏覽器最先開發或使用，也叫谷歌核心，楓樹瀏覽器、太陽花使用的也是谷歌核心；瀏覽器的核心字首有-webkit- -moz- -o- -ms-3、gecko核心： netscape6開始採用的核心，後來的mozilla firefox (火狐瀏覽器) 也採用了該核心，k-meleon瀏覽器也是使用這種核心；
4、presto核心：目前只有opera瀏覽器採用該核心
x5
核心，qq
瀏覽器的
x5-webkit-
7.**載入如何優化？ ㈠
優化資源的格式和大小
㈡使用瀏覽器快取
㈢減少重定向請求
㈣使用cdn儲存靜態資源
㈤壓縮css和js內容
㈥減少dns查詢次數
8.**seo優化有哪些方法
主要的html和css相關的問題，基本就是這樣。主要的就是布局方面多一些，可能css部分還有部分沒有說到，後續想到會加上去，希望對朋友有幫助。。。。。。
前端面試題 html
1.簡述你對html語義化的理解 2.label的作用及使用方法 label標籤用來定義表單控制間的關係，當使用者選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制項上。兩種用法 id繫結 巢狀 name name 3.iframe框架的優缺點優點 缺點 4.html與xhtml二者的區別 5...
前端面試題 css
1.實現不使用border畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果 2.介紹一下標準的css盒子模型，低版本的ie盒子模型有什麼不同 3.box sizing屬性 用來控制元素的盒子模型的解析模式。預設為content box 4.css選擇器有哪些？哪些屬性可以繼承？...
前端面試題 css
1.什麼是盒模型？盒模型主要分為w3c盒模型和ie盒模型，盒模型主要包括content，padding，border，margin。其中w3c盒模型的width content，ie盒模型的width content padding border。2.flex flex為彈性布局，webkit核心的...