1. 程式人生 > >前端面試題、知識點整理(筆記一)

前端面試題、知識點整理(筆記一)

好記性不如爛筆頭,一些前端的小tips,其實程式設計,很多時候不會把知識點都面面俱到,要學習的是程式設計思想,邏輯比較重要,同時養成比較好的編碼習慣。面試基礎很重要,這篇筆記記載一些前端面試的筆試題。 此為筆記一

下列哪個css屬性不可繼承(A)
A)height    C)text-align
B)font-size   D)text-indent
CSS中讓元素隱藏,但是不清除元素的方法是(BA) .element { display: none; }
B) .element { visibility: hidden; }
C) .element { display: block
;}
D) .element { visibility: visible; }

注: display和visibility的區別 display會將元素隱藏掉,並且位置不再被佔據,而visibility則是佔據原來的位置

清除浮動的方法有:給父元素增加高度、overflow:hiddenclear:both
盒子模型的實際寬度包括border-leftpaddingcontentborder-right,是它們的總和

注:盒子模型 CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距 根據 W3C 的規範,元素內容佔據的空間是由 width 屬性設定的,而內容周圍的 padding 和 border 值是另外計算的。不幸的是,IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和 解決IE8及更早版本不相容問題可以在HTML頁面宣告 即可。

在實際開發中,我們定義寬度有時候會使用100%,實現自適應,這個時候,padding,border都屬於該元素會比較方便,box-sizing: border-box 可以幫我們解決這個問題,border-box 告訴瀏覽器去理解你設定的邊框和內邊距的值是包含在width內的。

background-position主要用來設定背景圖片位置。
頁面上的定位主要有哪幾種,分別是有哪些特點
絕對定位、相對定位、靜態定位、固定定位
絕對定位:脫標,子元素相對於父元素左上角進行定位,如果父元素沒有設定相對定位,則以瀏覽器可視區域最上角進行定位
相對定位:相對於元素自身的位置進行定位
靜態定位:相當於塊級元素
固定定位:脫標,可以一直固定在定位位置上
請簡述"margin塌陷現象"的原因,並寫出解決辦法
答:
①垂直並列(少見)
當兩個盒子在垂直方向上設定margin值時,會出現塌陷現象。
上下各自設定外邊距
垂直之間塌陷的原則是以兩盒子最大的外邊距為準
②巢狀關係(常見)
當為子盒子新增margin-top:10px;時會發生如下情況:
子盒子和父盒子之間並沒出現期望的10px間隙而是父盒子與子盒子一起與頁面頂端產生了10px間隙。
解決方法:
(1)為父盒子設定border,為外層新增border後父子盒子就不是真正意義上的貼合。
(2)為父盒子新增overflowhidden;
(3)為父盒子設定padding值。
下面標籤中不屬於html結構標籤的是:d
(A) DOCTYPE
(B) html
(C) title
(D) div
下面哪些操作內容可以在html中被有html程式碼中被識別:A
    (A) 一個空格 
    (B) 一個換行
    (C) 一個縮排 
    (D) 以上都不可以
哪些標籤在頁面上沒有語義的  D
(A) p           (B) h 
(C) input       (D) span
如果希望一行上的文字與圖片居中對齊,可以設定哪個屬性:C
(A) margin: 0 auto;
(B) text-aline:center
(C) vertical-align: middle
(D) float: left
以下哪些操作不會脫離流B
(A) 浮動
(B) 相對定位
(C) 絕對定位
(D) 固定定位
var str = "11"+2-"1";
console.log(str);
console.log(typeof str);
執行完後str的值為___111____str的型別為_數字型別______
請列舉出清除浮動的幾種方式(最少三種)

ClearbothOverflow:hidden;

:after{
clearbothContent:0;
Height;0;
Line-height;0;
Disply;blockOverflowhidden;
}
.類{zoom;1}
簡述您對HTML語義化的理解?
最好用html裡面的標籤定義。不能使用比如div類的標籤定義