2019獨角獸企業重金招聘Python工程師標準>>>

????? 最近在用css+html做公司一個項目平臺的原型，按設計稿實現界面，之前也做過不少的css和html，在這里從項目中提煉出來一些個人認為比較值得記錄的東西，就當工作筆記吧。

?????? 一、關于自適應

?????? 寬度和高度自適應是任何頁面無法回避的問題，有的界面只需要固定寬高，這樣當然大大的降低設計實現的難度，但很多項目多會用到自適應。一個對象的高度寬度是否可以自適應（也就是按百分比顯示）取決于父級對象。（1）高度自適應：在默認狀態下，瀏覽器沒有對body體一個高度屬性，所在在body的字元素按百分比定義高度是無效的。一般我們都要對html與body設置{height:100%;},這樣能使火狐和ie均能實現高度自適應，在ie中，html對象默認100%的高度，body不是。火狐中html不是100%。其中Body 對象代表文檔的主體 (HTML body document.body　)，html對象偏重于一些標（document.documentElement）。? （2）寬度自適應：很多平臺頁面我們需要考慮寬度自適應，假如body體內有倆個div，左側的固定寬度，右側自適應，則左側的div需要設置向左浮動（float:left;）,右側的div需要設置margin-left為左側div的寬度，即可實現。若 body體內三個div，中間自適應，左側右側固定，則左右側div分別設置float:left與float:right,中間div設置margin-left，margin-right分別為左右側寬度。

（2）絕對定位下的oveflow的bug（IE7），在ie7下，若一個div的子元素有絕對定位的樣式，在overflow:auto時會出現溢出的情況，此時我們需要再此div父級元素上設置相對定位屬性即可解決。

（3）關于padding與margin，眾所周知這是設定內邊距與外邊距的屬性，若每個div的寬高都設有具體值時，用起來這倆個屬性會按預期達到你的效果，但如果寬高為固定是按里面元素的寬高變化的話會出些問題。記住，div的寬高會包括他的padding值（子元素的寬高加padding加border），但不包括margin值。對于一些位置的定位，用padding可能會更好。

（4）在間距的處理上不用老想著padding與margin，如在一些關于文字的處理上要充分考慮使用letterspacing，text-indent，line-height的使用，這些屬性會很容易實現。類似的還有vertical-align屬性

（5）table的好處。誠然，table布局可讀性較低維護成本高，任何table布局都可以用div代替，但是在碰到類似很多字段表單展示時，table布局的優勢一覽無余，便于整體控制樣式。

（6）在寬高的調試中如果適應不了各個版本的瀏覽器，考慮hack方法。IE6能識別-，IE7能識別+，IE8和FF都不能識別+和-IE8/FF都不識別*，IE7優先識別!important，IE6不能識別!important，/9適應所有ie。

（7）其他。在寫樣式css時一定要充分考慮代碼復用，這樣會減少很多工作量。另外請多用各種選擇符、組合選擇符，這樣減少一些類名，使代碼更有余地。

未完待續......

轉載于:https://my.oschina.net/bothyan/blog/153157

總結

以上是生活随笔為你收集整理的css工作笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。