前端讀者 | 關於存儲及CSS的一些技巧

時間 2019-12-05

標籤前端讀者關於存儲 css 一些技巧欄目 CSS 简体版

原文原文鏈接

@羯瑞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 數據庫，它能夠存儲大量的數據。html

一個網站能夠有多個 indexedDB 數據庫，但每一個數據庫的名稱是惟一的。咱們須要經過數據庫名來鏈接某個具體的數據庫html5

其餘的本地存儲（能夠忽略）

userData 僅支持IE瀏覽器，大小如今64K
google Gears 版本12.0之前

absolute技巧

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

元素居中：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;
}

overflow技巧

不管什麼瀏覽器，滾動條均來自<html>而不是<body>
谷歌瀏覽器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>

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；同個思路

margin技巧

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

其餘擴展：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等高佈局（不支持百分比高度）