之前根據自己的心得寫了一篇頁面布局和編寫的解決方案, 感覺意猶未盡, 再寫一篇續. 供以後開發時參考, 相信對其他人也有用.
css叫做層疊樣式表, 層疊2個字很重要, 之前寫頁面沒考慮這麼多, 今天總結了一下記下來.
需求一: z-index有哪些規範?
我個人覺得如果乙個頁面分了很多層的話, 如果一開始不設定好層疊關係, 後期維護將會非常困難. 所以我總結了一下z-index的規範:
cont內容, z-index的值是99. 主要是為了預留乙個z-index=10來被cont內容蓋住.
logo, 分享等需要疊在cont內容上面的, z-index的值定為999.
被cont內容壓住的, z-index定為10.
彈窗, 蒙版等要蓋住一切內容的, z-index設定為9999.
注意, 這套規則有利也有弊, 如果實行了這一套規則, 那麼所有與cont並列的標籤都需要設定z-index, 不然會發生消失不見的情況哦.
需求二: 除了z-index還有沒有其它影響層疊的樣式?
有. css3的transform的translate3d(x,y,z), z引數是z方向上的偏移, 如果設定為正數的話, 會碾壓一切z-index哦~
需求一: 什麼情況下不使用絕對定位?
cont的內容一律禁止使用絕對定位(特殊情況例外), 因為這是給人看的內容, 需要良好的布局. 而絕對定位元素從文件流中除去了, 整個頁面相當於是空的, 顯然不好.
需求二: 絕對定位就這麼垃圾嗎?
並不是, 絕對定位的元素因為從文件流中除去了, 所以他們在改變寬高的時候並不會引起頁面的重排和重繪, 對渲染效率有很大的提高, 這就是絕對定位的優點. 所以, 一些有動畫的元素, 和除cont外的元素都盡量使用絕對定位.
需求三: 有沒有特殊情況?
有. 有些頁面需要快速開發, 並且後續不太需要維護, 只使用幾次就扔了. 這樣的頁面, 可以對cont使用絕對定位.
上面說過, 改變元素的寬高會引起重排和重繪, 所以一些元素的動畫盡量不要改變top, right, bottom, left, width, height等, 運用transform的translate和scalex,scaley來替代它們.不過要注意的是, 由於低版本ie不支援transform, 所以如果要相容低版本ie的話, 還是不要用transform吧.
另外還可以用translatez(0)來替代position: fixed.
頁面編寫還有一條重要的準則, 去掉css和js後頁面仍然具有良好的可讀性.
這條準則在我們選用語義化標籤和img還是background-img方面有很強的指導作用. 比如沒有css和js, ul是乙個列表, 而div只是乙個塊罷了. 再比如沒有css和js, 一些大的img會佔據相當大的位置, 可讀性很差.
雖然隨著時代的進步, 現在幾乎碰不到開啟網頁卻載入不了css和js的情況, 但是卻在內容和seo方面能給我們指導. seo通常是看不到css和js的, 所以seo就相當於看去掉了css和js的頁面, 而且這種情況是經常發生的.
在使用閉包或者事件繫結的時候一定要注意釋放變數, 具體可以看我的這一篇博文:js中的記憶體洩漏.
HTML 頁面布局和背景
關於定位前面我有一篇比較詳細的部落格css 中 position屬性和z index 通過定位可以將頁面中的元素,擺放到頁面的任意位置 通過position來設定元素的定位 可選值 static 預設值 元素沒有開啟定位 relative 開啟元素相對定位 相對自己 absolute 開啟元素絕對定...
css頁面布局和重置樣式
標題欄 導航欄 內容區 common.css 通用樣式 螢幕寬度在340px至410px時，基準尺寸使用20px html 螢幕寬度小於340px時，基準尺寸使用18px media max width 340px 螢幕寬度大於410px時，基準尺寸使用22px media min width 41...
CSS 頁面美化和布局控制
2.好處 層疊 多個樣式可以作用在同乙個html的元素上，同時生效1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率1.內聯樣式 在標籤內使用style屬性指定css 如 hello css 2.內部樣式 在head標籤內，定義style標籤，style標籤...