您現在的位置是:網站首頁> 內容頁

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

  • 明仕ms577.com
  • 2019-07-08
  • 331人已閱讀
簡介@羯瑞HTML5存儲cookies大小限制4K發送在http請求頭中子域名能讀取主域名的cookies本地存儲localStoragesessionStorage大小限制5M(注意

@羯瑞

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瀏覽器,大小現在64Kgoogle 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:touchoverflow:hidden + 錨點定位可以實現切換效果

<div style="overflow: hidden;"> <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> <div id="four">4</div></div><div > <div href="#one">1</div> <div href="#two">2</div> <div href="#three">3</div> <div 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、stickyz-index層級:祖先優先原則、后來居上原則、哪個大居上原則z-index避免高層級覆蓋、層級混亂,一般項目中不超過2z-index彈窗層級問題,可以利用js獲取body頁面中最大的z-index然后+1z-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 ></div>

border技巧

可以利用border-style:dotted——點狀繪制圓角的效果可以利用border-style:double——雙線繪制更多的圖標border-color值未定義的時候,默認使用的色值就是color的值,如果該標簽沒有定義,遍歷父級。可以利用此特性處理hover效果,不用再單獨定義top或bottom的值可以設置border色值為透明transparent,以定位background-position靠右多少像素。background-position的值默認以右上角為基準border等高布局(不支持百分比高度)

文章評論

Top 镇江全民麻将凡春和 广东南粤36选7走势 老时时走势360 三弟开奖号码历史 吉林省快三彩票开奖结果查询 北京赛车pk10开奖号 六宝典app下载苹果免费下载 彩库宝典2019 内蒙古时时五星图 3d各省销量及中奖情况 时时彩(稳定版)计划