1. iframe框架佈局；

專案中經常會使用到iframe，iframe雖然比較多毛病，也比較老了，但是有些專案還是需要，一般專案情況如下圖： 一般需求：讓iframe區域填充滿內容div區域，並且視窗大小改變時自適應。 以往的解決方法是通過js判斷window的寬高，然後使用視窗寬高減去左側和頭部的尺寸得到iframe的高度，並且新增視窗resize事件函式，當視窗尺寸改變時，重新執行寬高計算方法。這種方式缺點是js執行開銷大，每次視窗改變大小都需要重新執行js,對瀏覽器極不友好。 改進方法：通過css進行佈局，重點強調一個原則：能用css進行佈局絕不用js控制。 實現方式圖解如下：通過利用css的border-box屬性，在iframe區域外面套一個iframe-content類名div，box-sizing從IE8開始相容，IE7的同學，還是乖乖寫js吧。 具體css如下： .frame-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; padding-top: 80px;//頭部高度 padding-left:200px;//左側選單寬度 box-sizing:border-box; } .frame-content iframe{ display: block; width: 100%; height: 100%; } .header{ position:absolute; left:0; top:0; width:100%; height:80px; z-index:2; } .left-menu{ position:absolute; left:0; top:0; padding-top:80px; width:200px; height:100%; overflow-y:auto; z-index:1; box-sizing:border-box; }

2. 多列布局；

多列布局參考bootstrap柵格結構，審查元素就可以知道實現方法。 以12列為例，實現原理是將總體寬度分成12等分，通過div佔比設定寬度，塊與塊之間間距用padding模擬，這樣的話在螢幕解析度改變時，媒體查詢解析度，設定相應的塊佔比大小，可以達到自適應的效果。 下面簡單介紹一種實現： body{ background-color:#f5f5f5; padding:20px 10px 10px 10px; } .col-1{width: 8.33%;} .col-2{width: 16.66%;} .col-3{width: 25%;} .col-4{width: 33.33%;} .col-5{width: 41.66%;} .col-6{width: 50%;} .col-7{width: 58.33%;} .col-8{width: 66.66%;} .col-9{width: 75%;} .col-10{width: 83.33%;} .col-11{width: 91.66%;} .col-12{width: 100%;} .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{ float: left; box-sizing:border-box; padding-right: 10px;//左右加起來20px間距 padding-left: 10px; margin-bottom: 20px;//下間距為20px }

3. 滑鼠移入顯示多色圖片；

最近在網上看到灰色贊助商圖示，滑鼠移入變成彩色的效果。 審查元素，看到實現方式也比較簡單，分享css如下： img { transition: all 0.3s ease; filter: grayscale(100%);//關鍵屬性，將圖片變成灰度圖 opacity: 0.66; } img:hover { filter: none; opacity: 1; }

有木有很神奇。

Author：事始

Sign：只要你還在嘗試，就不算失敗。