PC移動端面試題

Web一階段面試題

1.簡述 <!doctype> 的作用？

<!DOCTYPE> 宣告叫做檔案型別定義（DTD），宣告的作用是為了告訴瀏覽器該檔案的型別，讓瀏覽器決議器知道應該用哪個規范來決議檔案，

1. 五大主流的瀏覽器及其內核？

Chrome   內核 Blink

Safari     內核 Webkit

Opera     內核 Blink

Firefox     內核 Gecko

IE         內核 Trident

1.  b 和 strong（i 和 em）標簽的區別？

b定義粗體文本,strong不僅加粗，還有加重語氣在里面,有利于SEO優化，

i定義斜體字,em不僅傾斜，還有著重文本在里面,有利于SEO優化，

4.談談對語意化的理解？

語意化：根據元素的內容選擇合適的標簽

好處：

在沒有 CSS 的情況下，頁面也能呈現出很好地內容結構，

語意化使代碼更具可讀性，便于團隊開發和維護，

語意化有利于用戶體驗

語意化有利于 SEO優化，

5.CSS 引入方式有哪些？

行內引入：css樣式寫在標簽上，

內嵌引入： css樣式寫在style標簽中，css樣式是嵌入在當前頁面中，

外鏈引入： 通過link引入外邊的css檔案，

6.CSS 基本選擇器有哪些？

型別選擇器 ： div{css樣式}

類選擇器 ： .類名{css樣式}

ID選擇器：   #id名{css樣式}

通配符選擇器 ： *{css樣式}

1. 如何合并表格單元格？thead、tbody、tfoot 有什么用？

合并單元格 ：

跨行用rowspan

跨列用colspan

不管跨行還是跨列操作的都是單元格

thead、tbody、tfoot將表格分為三個部分：

thead 表格的頭

tbody 表格的主體

tfoot 表格的頁腳

結構更清晰，語意化更強，

1. 常見表單元素有哪些？

1).input :標簽用于搜集用戶資訊，

type型別：

text

password

radio

checkbox

submit

...

2) textarea標簽定義多行的文本輸入控制元件，

3)  button:定義一個按鈕，

  4) select:定義一個選擇串列，即下拉串列， option:定義 下 拉 串列中的選項，

9.請簡述一下盒模型的組成？

什么是盒模型：盒模型又稱框模型（Box Model）,包含了元 素內容（content）、內邊距（padding）、邊框（border）、 外邊距（margin）四個要素，

10.CSS 復合選擇器有哪些？

后代選擇器  選擇器1 選擇器2{css樣式}

子代選擇器   選擇器1 > 選擇器2{css樣式}

交集選擇器 選擇器1選擇器2{css樣式}

群組選擇器  選擇器1,選擇器2...,選擇器n{css樣式}

偽類選擇器   選擇器:偽類{css樣式}

1. 塊級標簽和行內標簽的區別？

塊元素 ： div,p,h1~h6,ul,li,ol,dt,dd,header,footer,nav...

特點 ：

獨占一行，可以設定寬高

如果不設定寬，它的寬等同于父元素內容的寬

如果不設定寬，高是由內容撐開

完全支持盒模型屬性

行內元素 ： a,b,span,del,em,i,label,sup,sup,time,mark...

特點 ：

不獨占一行，并排排列

不能設定寬高，寬高是由內容撐開

不支持上下外邊距

作為其他的行內元素或者文本的父盒子

1. 浮動產生的問題？清除浮動的方案？

浮動產生的問題 ：父元素高度塌陷

子元素浮動，脫離了檔案流，不占位置，不能把沒有設定高度的父元素的高 度撐開，導致父元素的高度塌陷，

解決 ：

1）給父元素設定高

有點：代碼簡單，通俗易懂，

弊端 ： 不靈活

2） 額外標簽法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的 標簽例如 <div style=”clear:both”></div>，或則其他標簽br 等亦可，

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標簽，結構化較差，

3 ) 父級添加overflow屬性方法

 可以通過觸發BFC的方式，可以實作清除浮動效果

 可以給父級添加： overflow為 hidden|auto|scroll  都可以實作，

 優點：  代碼簡潔

缺點：  內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示 需要溢位的元素

4) 使用after偽元素清除浮動

 :after 方式為空元素的升級版，好處是不用單獨加標簽了

優點： 符合閉合浮動思想  結構語意化正確

 缺點： 由于IE6-7不支持:after，使用 zoom:1   

.clearfix::after{

content:””;

display:block;

clear：both;

}

1. 請簡述 等高布局、圣杯布局、雙飛翼布局的實作原理，

圣杯實作的步驟：

● 外框左右固定 padding 值，預留左側列和右側列的列寬

● .center 寬度 100%，.left,.right 固定寬度

● 結構上.center,.left,.right 依次浮動在一行排列

● 移動.left 通過 margin-left:-100%配合相對定位 position:relative,left:-200px;移動至左側列位置

● 移動.right 通過 margin-left:-200px;配合相對定位 position:relative;left:200px 移動至右側列位置、

雙飛翼實作的步驟：

● .centerbox 與.left,.right 浮動在一行排列

● .centerbox 固定寬度 100%，left,.right 固定寬度

● .centerbox 內部嵌套.center,不定寬度，通過定義左右 margin 留出左側列的寬和右側列寬

● 移動.left 通過 margin-left:-100%實作

● 移動.right 通過 margin-left:-200px;實作

等高布局：

實作步驟：

● 通過浮動創建一個正常的三列布局（不同列背景不同）

● 父容器清浮動

● 每一列固定 padding-bottom，同時指定一個 margin 負值，抵銷 padding 的占位

● 父容器 overflow:hidden;

優缺點：

● 合理的控制 padding 和 margin 值

● 可以實作任意列等高布局

方法二：

原理：盒子層層嵌套，利用內層盒子高度變化，外層盒子的高度也會同步變化，

實作步驟：

● 準備三個負責背景的盒子.bg1,.bg2,.bg3，HTML 結構上層層嵌套

● 將.left,.center,.right 盒子放入最內層的背景盒子.bg3 里

● 最內層的盒子.bg3 清浮動

● 將.bg2,.bg3 相對于當前位置進行移動，形成三列背景效果

● 將.left,.center 通過 margin 負值移動到對應的背景處即可

14.簡述 CSS 精靈圖原理，及優缺點？

css sprites ： 精靈圖 又叫雪碧圖 ，適用于小圖示

原理：將多個小圖，拼合在一張大圖上，利用background-position對背景圖進行定位，

備注：精靈圖中的background-position只有負值，沒有正值 ，

優點 ：

       減少網頁的http請求，從而大大的提高頁面的性能

       圖片命名上的困擾

       更換風格方便

缺點 ：

必須要限定容器大小符合背景圖元素位置，需要計算

   維護的時候比較麻煩，如果頁面背景有少許改動，一般 就要改這張合并的 圖片，

15.簡述 BFC 規則及解決的問題？

BFC ： 塊級格式化背景關系,它是指一個獨立的塊級渲染區域，只有 Block-level BOX 參與， 該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關，

特性：

1)、內部的標簽會在垂直方向上一個接一個的放置

  2)、垂直方向上的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰標簽的 margin 會發生重疊

  3)、每個標簽的左外邊距與包含塊的左邊界相接觸（從左 向右），即使浮動標簽也是 如此，

 4)、BFC 的區域不會與 float 的標簽區域重疊

 5)、計算 BFC 的高度時，浮動子標簽也參與計算

 6)、BFC 就是頁面上的一個隔離的獨立容器，容器里面的子 標簽不會影響到外面標 簽，反之亦然

解決的問題 ：

清除浮動

防止圖文環繞

   兩欄三欄自適應

   外邊距折疊

1. 文本溢位顯示省略號如何實作？

1）單行文本溢位處理

P{

    width:200px； /*限定盒子的寬度*/

    overflow:hidden;   /*給元素設定溢位隱藏屬性*/

    text-overflow:ellipsis;  /*文本溢位顯示省略號*/

    white-space:nowrap; /*文本不換行*/

}

2 )多行文本溢位處理：利用WebKit的CSS擴展屬性(只有-webkit內核才有作用)

P{

 width:200px； /*限定盒子的寬度*/

overflow: hidden; /*給元素設定溢位隱藏屬性*/

text-overflow: ellipsis; /*文本溢位顯示省略號*/

display: -webkit-box; /*將物件作為彈性伸縮盒子模型顯示*/

-webkit-line-clamp: 2;/*用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性，它沒有出現在 CSS 規范草案中，*/

-webkit-box-orient: vertical;/*設定或檢索伸縮盒物件的子元素的排列方式*/

}

17.為什么要初始化 CSS 樣式？

因為瀏覽器的兼容問題，不同瀏覽器對某些標簽默認值的決議是不同的，如果沒對 CSS 初始化往往會出現不

同瀏覽器之間的頁面顯示差異，為了避免這種差異需要使用樣式重置，

18.display:none 和 visibity：hidden 的區別？

display:none： 隱藏不占位置

visibity：hidden 隱藏占位置

19.你能想出幾種方法讓元素在頁面中消失？

   1）display : none

   2）visibility ：hidden

   3) opacity : 0;

   4) 定位到瀏覽器視窗外邊

   5）定位，z-index為負值

6）transform:scale(0,0) 

20.簡述網頁中常見圖片格式及特點？

21.外邊距合并

1）.父子關系的外邊距合并

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，

即使父元素的上外邊距為0，也會發生合并，

解決：

方法一：給父元素設定overflow：hidden

方法二 ： 給父元素設定上內邊距或邊框

2）.兄弟之間的外邊距合并

相鄰塊元素垂直外邊距的合并，

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者，

這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷），

解決：

給任意一個盒子套一個父元素，給父元素設定overflow:hidden

22.哪些css屬性可以繼承？

1）、字體系列屬性

  font-family：字體系列

   font-weight：字體的粗細

   font-size：字體的大小

   font-style：字體的風格

   line-height：行高

2）、文本系列屬性

   text-indent：文本縮進

   text-align：文本水平對齊

   color：文本顏色

   text-decoration：文本裝飾

23.html5 有哪些新特性？

新增結構標簽 header nav footer hgroup figure  section article aside   mark  time等

新增多媒體標簽

新增智能表單

   canvas繪圖

   SVG繪圖等

1. 如何處理 HTML5 新標簽的瀏覽器兼容問題？

方法1 ： js引入html5shiv.min.js

方法2 ： js動態創建HTML5標簽,創建出來的是行內標簽，css轉為塊，

document.createElement(“標簽名”)

25.CSS3 有哪些新特性？

CSS3 模塊：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉換、影片、多列 布局、用戶界面，

26.CSS3 新增選擇器有哪些？

結構偽類選擇器

目標偽類選擇器

狀態偽類選擇器

屬性偽類選擇器

...

1. CSS3 中過渡和影片的區別和各自適用場景？

過渡影片 ： 需要觸發條件（點擊、滑鼠懸停、聚焦等）

幀影片 ： 不需要觸發條件，頁面加載時執行，在遇到很復雜的影片那就用animation，因為animation可以定義關鍵幀，

28.說出你知道的 2D 或 3D 變形函式 ?

2D：

translate()移動元素

rotate()旋轉元素

scale()縮放元素

skew()傾斜

3D：

translateZ() 3D位移函式

3D旋轉的函式有：rotateX、rotateY、rotateZ、rotate3d

3D縮放：scaleZ()函式指定一個在z軸上的縮放

29.請解釋一下 CSS3 的 flexbox（彈性盒布局模型）, 以及適用場景？

該布局模型的目的是提供一種更加高效的方式來對容器中的子元素進行布局、對齊和分配空間，

適用場景：彈性布局適合于移動前臺開發，在Android和ios上也完美支持，

1. css制作三角形

上三角

#triangle-up {

width: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

1. 常見的移動端布局解決方案有哪些？

1）固定布局 采用固定像素

原理：設定好視口，跟PC端寫法一樣，版心設定320即可

優點：思路沿用pc端，上手簡單

缺點：界面兩側留有空白，用戶體驗差，而且元素略小

2）流式布局

原理：用百分比代替固定像素，限制布局盒子的最大最小寬度

優點：實作自適應

缺點：只做寬度適配，高度會被拉伸

3）rem布局

原理：設定跟標簽html字體的大小，利用媒體查詢不同螢屏寬度下字體的大小，利用相對定位rem代替固定px

優點：寬高字體大小都能自適應，顯示效果好

4）vw 布局:

確定基準值以常見的 750px 寬度的設計稿為例，那么根據 vw 單位的原理 100vw = 750px，即 1vw = 7.5px，

我們可以根據設計圖中的 px 直接轉換成對應的 vw 值進行布局，當然也可以直接寫 px，借助插件插件自動計

算成需要的 vw，因為 vw 是相對于視口寬度的單位，當視口寬度發生變化，則元素大小隨即發生變化，

1. 簡述 rem 布局原理？

rem是指相對于根元素的字體大小的單位,即根據html元素的font-size來計算大小， 

比如說html的font-size大小為100px,一個div的width為1rem,則div的width大小為100px，

33.什么是回應式？

回應式布局可以根據螢屏的大小自動的調整頁面的展現方 式，以及布局，在每種設備螢屏寬度的設備下呈現的界面是不同的，

34.回應式專案中常用到哪些核心技術？

   視口標簽設定

   使用媒體查詢適配對應樣式

   百分比布局

   回應式字體設定

   回應式圖片

35.定位  （是否脫離檔案流，參照物）

static： （靜態）默認值，

relative :相對定位 ，不脫離檔案流，是以自身原來位置來定位的

absolute:絕對定位，脫離檔案流，以最近已定位的“父元素”來定位的，如果“父元素”沒有定位，則以html為參照物定位，

fixed :固定定位：脫離檔案流，以瀏覽器視窗為參照物定位的，

36.讓塊級元素水平垂直居中

方法一 ： position: fixed； left: 50%； top: 50%； margin-left: -盒子寬度一半； margin-top: -盒子高度的一半；

方式二： margin:auto 實作絕對定位元素的居中 弊端：兼容ie8以上瀏覽器 position: fixed? left: 0； right: 0； top: 0； bottom: 0； margin: auto 備注： 如果盒子在瀏覽器視窗中水平垂直居中 用固定定位 如果盒子在父元素中水平垂直居中用子絕父相，

標籤：Html/Css

上一篇：記錄--【vue3】寫hook三天，治好了我的組件封裝強迫癥。

下一篇：JavaScript 評測代碼運行速度