看了些大神的文章，才發現自己並不是前端菜鳥，而是還沒破殼。

最近有時間就會研究一位大神－張鑫旭的網站深受打擊，感覺自己弱爆了，看到什麼覺得新奇或者有用就簡單記錄在這裡，供以後查閱吧。tips都會留下原文地址，大家有興趣可以去拜讀一下大神的作品。

開始日期：2016年6月30日
更新日期：

1. 文字內容溢位用點點點(…)省略號表示

目前專案中用到的是最簡單明瞭（最無腦）的辦法：jQuery限制字元字數的方法。

$(document).ready(function(){
$(“.test”).each(function(){
var maxWidth=23;//限制字元個數
if
 
($(this).text().length>maxWidth){
$(this).text($(this).text().substring(0,maxWidth);
$(this).html($(this).html()+’…’);
}
});
});

使用text-overflow:ellipsis
webkit核心的瀏覽器，特別是移動端，是可以實現多行文字內容超出點點點…最後一行顯示的，典型的CSS組合如下：

.test {
    display: -webkit-box;
    -webkit-line-clamp: 3;//控制行數的，是3就是顯示3行，3行結束點點點
    -webkit-box-orient
 
: vertical;
    overflow: hidden;
}

• 原文參考 這兒

2. div塌陷，overflow”清除浮動”的一些認識

問題：一個div裡面僅有個浮動元素（一張圖片），那麼這個div高度會塌陷。即高度為0px，如下圖：

一個div，預設寬度100%顯示，一旦有了浮動屬性（none除外），其寬度與內部包裹的元素的寬度一致。如下圖：

對於absolute絕對定位，即absolute元素（如果沒有設定width值），其寬度自適應於內部元素。
＊ps：經驗證，position屬性為absolute，fixed的時候，都會自適應內部元素高度。

對於inline-block，這個可以說是包裹的祖宗了，無論是float還是absolute的包裹性都是向inline-block靠齊的。

對於，浮動(float)，絕對定位(position:absolute)以及inline-block的包裹性我稱之為“主動包裹”，其標籤寬度會收縮至內部元素大小；而overflow與zoom，我稱之為“被動包裹”。
疑問：既然div高度塌陷，那麼div裡面的這個圖片就應該在div的外部，按照overflow:hidden的功能，這個圖片應該直接-“咔”-一聲完全被截掉而不顯示的？
但是這可以嗎，顯然不行，怎麼辦，只能去包裹這個浮動的美女圖片，於是設定了overflow:hidden屬性的div有了高度，區別於“主動包裹”，div的長度不變！同時把浮動的圖片封在了裡面。如下圖：

＊ps：IE瀏覽器支援的zoom:1（指的就是原大小顯示）也可以清除內部元素浮動造成的影響。與overflow效果相似：寬度包裹，長度不變。

• 原文參考 這兒

3. display:table-cell的應用

display:table-cell屬性簡述：
display:table-cell屬性指讓標籤元素以表格單元格的形式呈現，類似於td標籤。目前IE8+以及其他現代瀏覽器都是支援此屬性的。單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，所以display:table-cell還是有不少潛在的使用價值的（IE6/7不支援此屬性）
與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性儘量不用同用。設定了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標籤元素了。

display:table-cell特性應用：
1⃣️display:table-cell與兩欄自適應佈局
如下圖：其中a標籤使用了float：left屬性，使a標籤自適應內部img的高度，還實現了左浮動的效果。

.content{display:table-cell; *display:inline-block;}

去掉“display:table-cell”效果如下：

對比兩圖可以看出，父元素新增“display:table-cell”屬性後，其同列子節點保持相同的寬度，類似於表格效果。

2⃣️display:table-cell與等高佈局
table表格中的單元格最大的特點之一就是同一行列表元素都等高。所以，很多時候，我們需要等高佈局的時候，就可以藉助display:table-cell屬性。說到table-cell的佈局，不得不說一下“匿名錶格元素建立規則”：

CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文件語言中。這時，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table物件，使其符合table/inline-table、table-row、table- cell的三層巢狀關係。

舉個例子吧，如果我們為元素使用“display:table-cell;”屬性，而不將其父容器設定為“display:table-row;”屬性，瀏覽器會預設創建出一個表格行，就好像文件中真的存在一個被宣告的表格行一樣，考慮到匿名建立表格元素的問題，所有table-cell元素外最好留有一個用來包裹的標籤。效果如下圖：

.list_row{display:table-row;}
.list_cell{display:table-cell; width:30%;padding: 20px;}
.list_center{background-color:#f0f3f9;}

如上使用“width:30%”等寬，配合“display:table-cell”等高，可實現等高等寬佈局應用。

• 原文參考 這兒

4. HTML5 history pushState的應用

背景：今天做專案，頁面中用到了iframe結構，客戶需求是左側導航欄保持不變，點選的時候請求伺服器，將其返回的HTML載入到iframe中，在不重新整理頁面的情況下改變頁面的URL及Title為相應iframe中的資料。

更換頁面的URL很簡單：Chorome下開啟Console，鍵入window.top.location可以得到頁面相應的連結資訊如下：

能得到當然也能修改咯：window.top.location.href = "http://www.zhangxinxu.com"
效果如下：

結果是既修改了頁面URL，又重新整理了頁面，顯示了新URL的頁面。

但是有的時候囊，我們是希望有改變URL的地址但是又不希望有頁面重新整理的效果，比如上述客戶的要求，也不能說是過分。
眾所周知Ajax可以實現頁面的無重新整理操作——優點；但是，也會造成另外的問題：無法前進與後退！
先不說iframe用在這裡合不合適（個人覺得ajax更好），本來iframe就是實現A頁面中巢狀B頁面的效果，URL並沒有變化。

URL沒有變化是因為這個跳轉是在伺服器內部跳轉的。
瀏覽器的工作原理。瀏覽器發出一個地址請求到伺服器，伺服器根據這個地址找到相應的頁面資料返回給瀏覽器，最後瀏覽器將資訊顯示給使用者。
但伺服器內部跳轉的時候，對瀏覽器來說是不知道的，它只負責把伺服器返回的資訊顯示出來。

此時想實現更新URL且不重新整理頁面的效果，就要用到H5中的新方法：

window.history.pushState(｛state｝,"title", "url")

pushState() 帶有三個引數：一個狀態物件，一個標題（好像無效了），以及一個可選的URL地址。
state：與要跳轉到的URL對應的狀態資訊，是個物件，可以傳null 或者｛｝。

state物件是一個JavaScript物件，它關係到由pushState()方法創建出來的新的history實體。用以儲存關於你所要插入到歷史
記錄的條目的相關資訊。State物件可以是任何Json字串。因為firefox會使用使用者的硬碟來存取state物件，這個物件的最大儲存空間為640k。如果大於這個數
值，則pushState()方法會丟擲一個異常。如果確實需要更多的空間來儲存，請使用本地儲存。

title：不知道幹啥用，賦值也不起任何卵用，だから傳空字串就行了。
url：這個引數提供了新歷史紀錄的地址，新的URL不一定要是絕對地址，如果它是相對的，它一定是相對於當前的URL。新URL必須和當前URL在同一個源下，否則，pushState() 將丟出異常。（也就是經常說的不能跨域請求？）這個引數可選，如果它沒有被特別標註，會被設定為文件的當前URL。

那麼現在怎麼實現上述不重新整理頁面情況下改變地址跟頁面title囊？直接上程式碼：

document.title = newTitle;//手動改變頁面title
history.pushState({ title: newTitle }, newTitle, newURL);//不重新整理頁面情況下改變地址

大嬸的栗子點 這兒
通過history物件操縱瀏覽器歷史記錄參考 這兒
據說大家都喜歡圖文並茂，下圖是用來佈局的。

專案中還涉及到獲取iframe中載入的HTML的title的問題，實現方式如下：
1）：window.frames[“iframe的name值”].document.title;
2）：document.getElementById(“iframe的name”).contentWindow.document.title;
3）：$(“#iframe的ID”).contents().attr(“title”);//jquery 方法

iframe常用方法：
1）：onload 在瀏覽器完成物件的裝載後立即觸發。
2）：onreadystatechange 當物件狀態變更時觸發。
每當iframe載入頁面，過程內會啟用onreadystatechange事件三次，相應的狀態分別是loading，interactive和complete，而最後一次才是complete。狀態存放在屬性readyState中：獲取物件的當前狀態。
iframe用法的詳細講解參考 這兒

• 原文參考 這兒