關於儲存及CSS的一些技巧

羯瑞_發表於2019-01-08
CSS

HTML5儲存

cookies

  • 大小限制4K
  • 傳送在http請求頭中
  • 子域名能讀取主域名的cookies

本地儲存 localStorage sessionStorage

  • 大小限制5M（注意超出限制處理，超過時setItem會丟擲異常）
  • 可以儲存陣列、json、圖片（canvas編碼base64）、指令碼、樣式檔案
  • 子域名之間不共享

離線儲存 Application Cache

  • <html manifest="manifest:appcache">
  • 移動端大多數都相容
  • 如果有更新必須修改服務端manifest檔案
  • 頁面資料更新 需要二次更新才能拿到最近的資料。有快取讀取的是最後一次資料
  • 更新是全域性性的，無法單獨更新某個檔案
  • 連結後面帶引數是快取的是分別快取的：chenrf.com/?a=1 不同於 chenrf.com
  • 適用於：單頁面，資料不常更新的，實時性不高的，離線webapp

indexedDB本地資料庫

indexedDB 是一個本地資料庫，該資料庫是一種儲存在客戶端本地的 NoSQL 資料庫，它可以儲存大量的資料。

一個網站可以有多個 indexedDB 資料庫，但每個資料庫的名稱是唯一的。我們需要通過資料庫名來連線某個具體的資料庫

其他的本地儲存（可以忽略）

  • userData 僅支援IE瀏覽器，大小現在64K
  • google Gears 版本12.0以前

absolute技巧

  • 無依賴跟隨實現；去relative化，設定元素absolute，不設定top、right、left、bottom只設定margin值；

2018514205241

201851417276

  • 元素居中：position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;IE7+支援
  • 在移動端的佈局使用，top + footer 內容區塊 overflow:auto自適應顯示滾動條
.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    bottom: 53px;
    overflow: auto;
}
複製程式碼

2018514205848

overflow技巧

  • 無論什麼瀏覽器，滾動條均來自而不是
  • 谷歌瀏覽器document.body.scrollTop,其他瀏覽器document.documentElement.scrollTop
  • 最後元素的padding-bottom缺失問題，谷歌瀏覽器正常-其他瀏覽器缺失
  • 獲取滾動條寬度(大都17PX)，外層寬度 - document.getElementById('chen').clientWidth
  • 解決瀏覽器高不足滾動條顯示&出現的不友好：padding-left:calc(100vw - 100%);tips:100vw瀏覽器寬度
  • ios原生滾動回撥效果：-webkit-overflow-scrolling:touch
  • overflow:hidden + 錨點定位可以實現切換效果
<div class="box" style="overflow: hidden;">
    <div class="list" id="one">1</div>
    <div class="list" id="two">2</div>
    <div class="list" id="three">3</div>
    <div class="list" id="four">4</div>
</div>
<div class="link">
    <div class="click" href="#one">1</div>
    <div class="click" href="#two">2</div>
    <div class="click" href="#three">3</div>
    <div class="click" href="#four">4</div>
</div>
複製程式碼

2018110215011

line-height技巧

  • line-height基於基線對齊，不同字型有些許差異
//清除圖片底部間距,3種方法
img{display:block;}
img{verticl-align:bottom;}
img{font-size:0;}
.box{line-height:0;}

//多行文字居中
.box{line-height:250px;text-align:center;}
.box>.txt{display:inline-block;line-height:normal;verticl-align:middle;}
複製程式碼

vertical-algin技巧

  • vertical-algin百分比值是相對於line-height計算的
  • text-algin:justify;實現兩端對齊文字效果。
  • 近似垂直居中：元素垂直中心點和父級基線上1/2 X-height對齊。完全居中方法父級：font-size:0;
  • 小圖示與文字對齊可以用vertical-algin：負值
//圖片垂直居中
<div><img src=""chenrf.jpg /><i></i></div>

img{vertical-algin:middle}
i{display:inline-block;height:100%;vertical-algin:middle}

//多行文字垂直居中
<div><span>我有好幾行</span><i></i></div>

span{vertical-algin:middle;display:inline-block;}
i{display:inline-block;height:100%;vertical-algin:middle}
複製程式碼

relative + z-index技巧

  • 儘量避免使用relative，內容模組左上角定位absolute+margin就可以實現
  • z-index自作用於定位元素上 relative、abslute、fixed、sticky
  • z-index層級：祖先優先原則、後來居上原則、哪個大居上原則
  • z-index避免高層級覆蓋、層級混亂，一般專案中不超過2
  • z-index彈窗層級問題，可以利用js獲取body頁面中最大的z-index然後+1
  • z-index負值訪問性隱藏，跟text-indent:9999px；同個思路
    201811794834

margin技巧

  • 普通元素百分比的margin是相對於容器的寬度計算的
  • 絕對定位元素百分比的margin是相對於第一個定位祖先元素（relative/absolute/fixed）的寬度計算的
  • margin重疊：相鄰的兄弟元素、父級和第一個/最後一個元素、空的block元素；只發生在block水平元素，margin-top和margin-bottom；文字垂直展示writing-mode除外
    20181171005
  • margin重疊高度：正正取大值、正負值相加、負負取負值

2018117101543

  • 其他擴充套件：margin-start/margin-end;針對文字的書寫方向；水平margin-start==margin-left,垂直：margin-start==margin-top

padding技巧

//三欄圖示重點：background-clip: content-box;
.box{width: 100px;height: 20px;border-top: 20px solid;border-bottom:20px solid;background-color: #000;background-clip: content-box;padding:20px 0;}

<div class="box"></div>
複製程式碼

border技巧

  • 可以利用border-style:dotted——點狀繪製圓角的效果
  • 可以利用border-style:double——雙線繪製更多的圖示
  • border-color值未定義的時候，預設使用的色值就是color的值，如果該標籤沒有定義，遍歷父級。可以利用此特性處理hover效果，不用再單獨定義top或bottom的值
  • 可以設定border色值為透明transparent，以定位background-position靠右多少畫素。background-position的值預設以右上角為基準
  • border等高佈局（不支援百分比高度）

201818204029

相關文章