最近又到了招聘的旺季,應該有很多人踏上了找工作的路上,我今天就給大家介紹一下,我在前端這些年所遇到的問題,從簡到難,給大家講述一下。先說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核心的...