刷前端面經筆記（四）

摘要： 1.說說前端中的事件流？ 事件流描述的是從頁面接收事件的順序，DOM2 級事件流包括下面幾個階段。 事件捕獲階段 處理事件階段 事件冒泡階段 （addEventListener ：addEventList...

1.說說前端中的事件流？

事件流描述的是從頁面接收事件的順序，DOM2 級事件流包括下面幾個階段。

事件捕獲階段

處理事件階段

事件冒泡階段

（addEventListener ：addEventListener 是DOM2 級事件新增的指定事件處理程式的操作，這個方法接收3 個引數：要處理的事件名，作為事件處理程式的函式和一個布林值。最後的布林值如果為true ，表示在捕獲階段呼叫事件處理程式；如果為false ，表示在冒泡階段呼叫事件處理程式，預設為false ）

2.如何實現一個自適應的正方形

1）CSS 3vw 單位

CSS3 中新增了一組相對於可視區域百分比的長度單位vw、vh、vmin、vmax 。其中vw 是相對於視口寬度百分比的單位，1vw=1%viewport width ，vh 是相對於視口高度百分比的單位，1vh=1%viewport height ；vmin 是相對於當前視口寬高中較小的一個的百分比單位，同理vmax 是相對當前視口寬高中較大的一個百分比單位。

程式碼實現：

.placeholder{
width: 50vw;
height: 50vw;
}

優點：簡潔方便

缺點：瀏覽器相容不好

2)設定垂直方向的padding 撐開容器

margin、padding 的百分比數值是相對於父元素寬度計算的。由此可以發現只需要將元素垂直方向的padding 值設定為與width 相同的百分比就可以製作出自適應正方形了：

程式碼實現：

.placeholder{
width: 100%;
padding-bottom:100%;
}

如果正方形中沒有內容（相當於只是一個幾何裡面的正方形，並沒有展示其他任何內容），一切看起來都很正常；但是，如果正方形中有其他內容（這種情況會更常見一些，比如說有一些文字和圖片），此時容器的高度就會被拉伸，因為盒子模型中的padding 是不包含在content 中的，所以我們可以通過height:0 解決這個問題；這種方案簡潔明瞭，且相容性好；但是除了填充內容後會出現問題以外，還有可能碰上max-height 不收縮，於是第三種方案來了：

3）利用偽元素的margin(padding)-top 撐開容器

在方案二中，我們利用百分比數值的padding-bottom 屬性撐開容器內部空間，但是這樣做會導致在元素上設定的max-height 屬性失效；而失效的原因是max-height 屬性只限制於height ，也就是隻會對元素的content height 起作用。那麼我們是不是能用一個子元素撐開content 部分的高度，從而使max-height 屬性生效呢？我們來試試：

.placeholder {
width: 20%;
background-color: #000;

/* overflow: hidden; */
/* display: inline-block; */
float: left;
/*設定成BFC才能使margin-top撐起高度*/
}

.placeholder:after {
content: '';
display: block;
margin-top: 100%;
/* margin 百分比相對父元素寬度計算 */
}

3.js中的位置關係

offsetParent ：該屬性返回一個物件的引用，這個物件是距離呼叫offsetParent 的元素最近的（在包含層次中最靠近的），已進行過CSS 定位的容器元素。 如果這個容器元素未進行CSS 定位, 則offsetParent 屬性的取值為body 元素的引用。 當容器元素的style.display 被設定為"none" 時（譯註：IE 和Opera 除外），offsetParent 屬性 返回null 。

top ：該屬性一般對用過css 定位的元素有效（position 為“static” 時為auto ，不產生效果），定義了一個top 屬性有效的元素（即定位元素）的上外邊距邊界與其包含塊上邊界之間的偏移。

clientTop ：元素上邊框的厚度，當沒有指定邊框厚底時，一般為0 。

scrollTop ：位於物件最頂端和視窗中可見內容的最頂端之間的距離，簡單地說就是滾動後被隱藏的高度。

offsetTop ：獲取物件相對於由offsetParent 屬性指定的父座標(css 定位的元素或body 元素)距離頂端的高度。

clientHeight ：內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態列以上的這個區域，與頁面內容無關。

scrollHeight ：IE 、Opera 認為scrollHeight 是網頁內容實際高度，可以小於clientHeight 。FF 認為scrollHeight 是網頁內容高度，不過最小值是clientHeight 。

offsetHeight ：獲取物件相對於由offsetParent 屬性指定的父座標(css 定位的元素或body 元素)的高度。IE 、Opera 認為offsetHeight =clientHeight + 滾動條 + 邊框。FF 認為offsetHeight 是網頁內容實際高度，可以小於clientHeight 。offsetHeight 在新版本的FF和IE中是一樣的，表示網頁的高度，與滾動條無關，chrome 中不包括滾動條。

*諸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等，和top、height類似，不再贅述。

clientX 、clientY ：相對於瀏覽器視窗可視區域的X ，Y 座標（視窗座標），可視區域不包括工具欄和滾動條。IE 事件和標準事件都定義了這2 個屬性。

pageX 、pageY ：類似於event.clientX 、event.clientY ，但它們使用的是文件座標而非視窗座標。這2 個屬性不是標準屬性，但得到了廣泛支援。IE 事件中沒有這2 個屬性。

offsetX 、offsetY ：相對於事件源元素（target 或srcElement ）的X ,Y 座標，只有IE 事件有這2 個屬性，標準事件沒有對應的屬性。

screenX 、screenY ：相對於使用者顯示器螢幕左上角的X ,Y 座標。標準事件和IE 事件都定義了這2 個屬性

4.Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?

Doctype 聲明於文件最前面，告訴瀏覽器以何種方式來渲染頁面，這裡有兩種模式，嚴格模式和混雜模式。

嚴格模式的排版和JS 運作模式是 以該瀏覽器支援的最高標準執行。

混雜模式，向後相容，模擬老式瀏覽器，防止瀏覽器無法相容頁面。

5.link 標籤和import 標籤的區別?

link 屬於html 標籤，而@import 是css 提供的

頁面被載入時，link 會同時被載入，而@import 引用的css 會等到頁面載入結束後加載。

link 是html 標籤，因此沒有相容性，而@import 只有IE5 以上才能識別。

link 方式樣式的權重高於@import 的。

6.元素的文字省略號?

單行：

overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap

多行：

1）直接用css 屬性設定(只有-webkit核心才有作用)

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

移動端瀏覽器絕大部分是WebKit 核心的，所以該方法適用於移動端；

-webkit-line-clamp 用來限制在一個塊元素顯示的文字的行數,這是一個不規範的屬性（unsupported WebKit property ），它沒有出現在CSS 規範草案中。

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

-webkit-box-orient 設定或檢索伸縮盒物件的子元素的排列方式 。

text-overflow: ellipsis 以用來多行文字的情況下，用省略號“…” 隱藏超出範圍的文字。

2）利用偽類

<div id="con">
<span id="txt">文字溢位顯示省略號,文字溢位顯示省略號,文字溢位顯示省略號,文字溢位顯示省略</span>
<span class="t"></span>
</div>
<style>
#txt{
display: inline-block;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
font-size: 16px;
}
.t:after{
display: inline;
content: "...";
font-size: 16px;

}
</style>

這種方法的缺點就是內容不足以超過位置的時候，還是會有...