- 相關推薦
淺談CSS使用的技巧及縱橫向書寫的特點
下面由小編為大家帶來CSS使用的9則技巧及縱向書寫與橫向書寫的特點，希望對大家有所幫助
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。
3. 確定錯誤發生的位置
如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復正常，即可確定錯誤發生的位置。
4. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
8. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
9. 是否重設了默認的樣式?
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等
縱向書寫特點：
每個CSS屬性獨立一行，一般不會出現換行或橫向滾動條。
可以通過firebug等工具查找到模塊，在DW中ctrl+g行定位，修改方便。
屬性段落間有縮進，保證了代碼的整潔，層次清楚，符合編程語言代碼規范，修改更加直觀。
存在的問題：代碼冗余(如空格符、tab符、換行符);文件大小增加;容易出現縱向滾動條。
橫向書寫特點：
最大化的利用了空間，單屏內能顯示更多，減小了縱向滾動條出現的幾率，能夠快速捕獲較多的信息。
減小了文件大小，省去了不必要的空格、換行等。
橫向書寫方便分塊以及注釋，便于查看CSS結構，選擇符一目了然。當今顯示器正朝著越來越大，越來越寬發展，基本上一行內可以顯示完全。
加快編寫CSS速度，不用每次敲換行和tab，并且減少拉動滾動條的次數。
如果是活動頁，不用作壓縮處理。使用CSS optimizers 來優化CSS是提倡的，但是使用橫向書寫，基本上不存在多余的空格和換行，因此可以不用壓縮，這樣效率和能力都會得到提高。
便于閱讀和查找相關結構。代碼編輯器對同行數定位做的都比較好，因此我們要解決的是如何快速縱向定位目標。橫向書寫時選擇符縱向對齊，再加上
.class_name_2 .class_name_2_1 .class_name_2_1_1的選擇符層次分明，因此很容易定位到目標。
在調試小Bug的時候就可以直接打開CSS更改，不用再打開firebug去找到模塊。
橫向書寫，是基于CSS選擇符的寫法，層次容易對比，更利于模塊化。對整體CSS規劃有好處，后期維護成本低。
便于不同版本的CSS代碼對比。
存在的問題：書寫過密，從而影響閱讀。這種弊端顯而易見，但只要優化做到家，這種狀況會很少。
盡管對于現如今的帶寬來說，網頁文件那僅以K為單位的大小實在是微不足道，但如何將這以K來計算的網頁文件精簡到最小還是網頁設計師們應該考慮的問題之一。而橫向書寫省去了不必要的空格、換行等，大大減小了文件大小。我們不能說哪種書寫是對的，至于具體采用哪種寫法依個人選擇，當然改變習慣可能會影響一個人的工作效率，那我們提倡的是：提交的CSS樣式文件是經過代碼格式化的，而這個工作可以完全交給DW等工具，我們只要點擊一下，整個文件就會像我們想象的那樣呈現出來。這樣的代碼看起來很舒服，修改容易，團隊成員在后續交接也會變得更加順利。
【淺談CSS使用的技巧及縱橫向書寫的特點】相關文章：
css 書寫技巧 CSS 技巧教程簡介07-02
關于網站制作css書寫規范06-23
GMAT閱讀的橫向總結的實用技巧09-08
css3的Flexible Boxes詳細使用教程10-31
CSS入門知識-圖片水平對齊技巧07-20
關于HTML技巧之CSS的優先權10-05
ping使用技巧09-11
圖片的使用技巧07-12
經典的電腦使用技巧10-18
Word使用技巧07-29