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>
複製程式碼這種方法的缺點就是內容不足以超過位置的時候，還是會有...
