Web前端開發——BAT面試題彙總及答案02（持續更新中）

一、前言

1. 做這個的初心是希望鞏固自己的基礎知識，當然也希望能夠幫助更多的開發者！
2. 有些題目有多種答案，本文只給出了其中的一種，哪裏有問題的話歡迎指出~
3. 這個欄目將持續更新，前端的小夥伴歡迎關注噢~

二、HTML&CSS篇：

21、css 中可以讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

垂直方向：line-height
水平方向：letter-spacing
那麼問題來了，關於 letter-spacing 的妙用知道有哪些麼？
答案:可以用於消除 inline-block 元素間的換行符空格間隙問題。

22、px 和 em 的區別。

px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較容易。
em 得值不是固定的，並且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,
10px=0.625em。

23、描述一個”reset”的 CSS 文件並如何使用它。知道 normalize.css 嗎？你瞭解他們的不同之處？

重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置 CSS 文件並知道如何使用它
們。他們是盲目的在做還是知道爲什麼這麼做呢？原因是不同的瀏覽器對一些元素有不同的
默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用 Normalize 來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了
一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗
體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用
考慮的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
normalize.css源代碼地址

24、display:none 與 visibility:hidden 的區別是什麼？

display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。
即是，使用 CSS display:none 屬性後，HTML 元素（對象）的寬度、高度等各種屬性值都將
“丟失”;而使用 visibility:hidden 屬性後，HTML 元素（對象）僅僅是在視覺上看不見（完
全透明），而它所佔據的空間位置仍然存在。

25、CSS 中 link 和@import 的區別是：

Link 屬於 html 標籤，而@import 是 CSS 中提供的
在頁面加載的時候，link 會同時被加載，而@import 引用的 CSS 會在頁面加載完成後纔會加
載引用的 CSS
@import 只有在 ie5 以上纔可以被識別，而 link 是 html 標籤，不存在瀏覽器兼容性問題
Link 引入樣式的權重大於@import 的引用（@import 是將引用的樣式導入到當前的頁面中）

26、爲什麼要初始化樣式？

由於瀏覽器兼容的問題，不同的瀏覽器對標籤的默認樣式值不同，若不初始化會造成不同瀏
覽器之間的顯示差異
但是初始化 CSS 會對搜索引擎優化造成小影響

27、BFC 是什麼?

BFC（塊級格式化上下文），一個創建了新的 BFC 的盒子是獨立佈局的，盒子內元素的佈局
不會影響盒子外面的元素。在同一個 BFC 中的兩個相鄰的盒子在垂直方向發生 margin 重疊
的問題
BFC 是指瀏覽器中創建了一個獨立的渲染區域，該區域內所有元素的佈局不會影響到區域外
元素的佈局，這個渲染區域只對塊級元素起作用

28、對 WEB 標準以及 W3C 的理解與認識

答：標籤閉合、標籤小寫、不亂嵌套、提高搜索機器人搜索機率、使用外 鏈 css 和 js 腳本、
結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更
廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提
供打印版本而不需要複製內容、提高網站易用性。

29、行內元素有哪些?塊級元素有哪些?空(void)元素有那些？CSS 的盒模型?

（1）CSS 規範規定，每個元素都有 display 屬性，確定該元素的類型，每個元素都有默認
的 display 值，比如 div 默認 display 屬性值爲“block”，成爲“塊級”元素；span 默認
display 屬性值爲“inline”，是“行內”元素。塊級元素：div p h1 h2 h3 h4 form ul
（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
< br >< hr>< img>< input>< link>< meta>
CSS 的盒模型?
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的 content 部分包含了 border 和
pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

30、前端頁面有哪三層構成，分別是什麼?作用是什麼?

答：結構層 Html 表示層 CSS 行爲層 js。

31、如何居中 div,如何居中一個浮動元素?

給 div 設置一個寬度，然後添加 margin:0 auto 屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
確定容器的寬高 寬 500 高 300 的層
設置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

32、列出 display 的值，說明他們的作用。position 的值，relative 和 absolute定位原點是？

1. block 象塊類型元素一樣顯示。
   none 缺省值。向行內元素類型一樣顯示。
   inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
   list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
   2.position 的值
   *absolute
   生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
   *fixed （老 IE 不支持）
   生成絕對定位的元素，相對於瀏覽器窗口進行定位。
   *relative
   生成相對定位的元素，相對於其正常位置進行定位。
   *static 默認值。沒有定位，元素出現在正常的流中
   *（忽略 top, bottom, left, right z-index 聲明）

33、哪些 css 屬性可以繼承？

可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;

34、b 標籤和 strong 標籤,i 標籤和 em 標籤的區別？

strong 和em 有語義，b 標籤和 strong 標籤則無。

35、有那些行內元素、有哪些塊級元素、盒模型？

1.內聯元素(inline element)
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標籤
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量
2、塊級元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是 css layout 的主要標籤
dl – 定義列表
fieldset – form 控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3 級標題
h4 – 4 級標題
h5 – 5 級標題
h6 – 6 級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames 可選內容，（對於不支持 frame 的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對於不支持 script 的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3.CSS 盒子模型包含四個部分組成：
內容、填充（padding）、邊框（border）、外邊界（margin）。

36、我想讓行內元素跟上面的元素距離 10px，加 margin-top 和 padding-top 可以嗎？

不可以，margin-top,padding-top 無效。

三、JS 基礎篇

1、javascript 的 typeof 返回哪些數據類型

object number function boolean underfind string
typeof null;//object
typeof isNaN;//
typeof isNaN(123)
typeof [];//object
Array.isARRAY(); es5
toString.call([]);//”[object Array]” var arr=[];
arr.constructor;//Array

2、例舉 3 種強制類型轉換和 2 種隱式類型轉換?

強制（parseInt,parseFloat,Number()）
隱式 ( == )
1 == ”1” //true
null==undefined //true

3、split() join() 的區別

前者是切割成數組的形式，
後者是將數組轉換成字符串

4、數組方法 pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

---

前端面試題系列將會持續更新，歡迎關注該博客~

相關文章推薦：
Web前端開發——BAT面試題彙總及答案01（持續更新中）