? 一、自己總結的公用樣式解析 html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; } img { border: 0 none; vertical-align: top; } ul, li { list-style-type: none; } h1, h2, h3, h4, h5, h6 { font-size: 14px; } body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; } button { cursor: pointer; } i, em, cite { font-style: normal; } body { background: #fff; color: #363636; line-height: 1.2; } a, a:link { color: #222; text-decoration: none; } a:visited {??} a:active, a:hover { text-decoration: underline; } a:focus { outline: none; } .fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .fixed { display: block; min-height: 1%; } *html .fixed { height: 1%; } .clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; } .more { float: right; } .more a { font-weight: normal; font-size: 12px; } .fl, .fr { display: inline; float: left; } .fr { float: right; } 這是我做網頁制作近三年來經過參考和自己研究出來的公用樣式，大體就是這樣，樣式會根據網頁具體的效果進行微調。 注：在這里寫這些注解就是為了讓剛接觸到CSS的朋友明白一些東西?不至于繞彎路，知道這些代碼都是怎么回事的就可以跳到第三條了，可能寫的有些啰嗦。呵呵！ 第一行html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td?樣式大家應該都明白這樣是把原先的選擇器自帶的外填充和內填充去掉歸0 也許有人還在用“?*?”?通配符，但是這樣是有缺點的?會讓代碼變得冗余?尤其是子父級嵌套關系越深越麻煩，建議大家要盡量減少使用，在這里建議大家多使用我在第一行里寫的通用樣式，可能選擇器還比較少，但是我日常用到的選擇器就這么些，如果大家有用到?pre fieldset blockquote?這些選擇器?或是其他的選擇器?一樣可以寫到里面。 第二行里?img?圖片標簽的樣式?大家是各有不同，目的都是一個讓瀏覽器里默認圖片是沒有邊框的，還有ie6里圖片底部出現的空白間隔消失掉。有的愛用?display:block; border: none; 但是這樣寫的話，都會有這樣或那樣的缺點，display: block;?這樣寫的話?你要讓圖片左右居中于一個盒子內的時候?你怎么辦？?margin: auto;?這樣嗎？但是你要讓外面的盒子有一個實際的寬度，如果是換成?vertival-align: top;?或是?vertival-align: middle;?的話那么這個實際的寬度就不必寫了，只用加一個?text-align: center;??圖片也不用加外填充了。 還有就是有的酷友會奇怪我寫的?border: 0 none;?這里要寫?0?再加一個?none，這個問題我還是想說一下是因為我在寫文本框?input?的時候，發現在不同的?windows?系統外觀下，你光寫border: none?或是?border: 0;?都不行，文本框的邊框還是在的，所以就必須寫?border: 0 none;?這個習慣也就留到了img?上，所以大家還是可以寫成?border: none;?但是寫?input?的時候，要邊框沒有的時候還是要寫?border: 0 none; 第三行?ul, li?里就不用解釋了吧，大家都明白怎么回事。 第四行h1, h2, h3, h4, h5, h6?還是根據要搭的頁面標題字體大小來修改，或是把?h1 h2 h3 h4?這些選擇器分開來寫各自的字體大小。 第五行body, input, select, button, textarea?是因為我搭頁面的時候發現ie6里的文本框和下拉菜單等...?里的字體大小不是正常的12號字體，所以在兼容性上不是很完美，所以我就寫了字體的大小為12號，然后在?firfox?里這些標簽的字體默認又是宋體，所以我就又寫上了字體，然后?body?也要寫字體大小和大小，所以就在?input?的前面加上了?body，所以后面就不用再寫了。 第六行?button?這個按鈕的鼠標觸發屬性是默認的箭頭，在用戶體驗上不是特別好，所以我把鼠標觸發的屬性改成了小手。 第七行就是在寫一些不是特別重要?或是裝飾的標簽時我就是用到這些選擇器?由于他們都有文字的默認屬性，所以我去掉了，在用到的時候不至于出問題。 第八行?body?寫背景色?是因為有的?windows?系統外觀會把瀏覽器背景色也改成別的色，所以為了不會問題，就加上背景白色了，然后再加上文字顏色，字體大小和字體我在前面已經寫了。 第九行到第十一行?a:link?這些大家寫的都差不多吧? 第十二行?點擊鏈接時出現的虛線框消失，就是消除焦點。（描述不太專業，見諒！） 在下面我寫了?.fixed?和?.clear?這兩個清除浮動的樣式 具體這兩個我都用在什么地方呢？我畫了兩張示意圖看了后?大家就會明白了！ .fixed?的例子
? .clear?的例子 ? 還有就是講解一下?關于?.clear?里面很多屬性我要寫?!important?的問題 因為我們在寫子級盒子浮動的時候?肯定會寫到?float: left; margin或是?padding，還有?width?等等，我也在?.clear的屬性里把盡可能會發生沖突的屬性加了!important，瀏覽器就會把這些屬性的優先級排到最前，并且ie6也是支持讀取!important的，大家會想到，ie6瀏覽器只要讀到相同的屬性，以最后的屬性為優先級，但是他是對于在同一樣式內的，而不是同一樣式內的屬性他就不會以最后的屬性為優先了?看下面這段代碼 大家看完這兩段代碼后就會明白了！ .more?這個樣式?搭頁面的過程中?欄目或是標題欄肯定會有更多這個鏈接，所以我就在前面加了這個樣式，在后面就減少了?float: right?這個屬性，這個的意義不是很大。 .fl .fr?這兩個我是在一些需要向左或是向右浮動的盒子上附加的，這樣寫靈活性很高，也可以省掉一部分css代碼。 二、講一些自己對ie6瀏覽器顯示bug的一些兼容樣式 我想現在大家都在用?jquery?或是其他一些的js框架吧？ 我們在用到這些框架開發出的燈箱相冊時（就是點擊圖片后?圖片彈出?圖片與網頁之間有一層遮罩類的）。 有的燈箱相冊代碼寫的不是很完善，例如：ie6下，當內容的高度不足以撐滿整個頁面時，再點擊相冊中的一張圖片時，我們發現圖片后面的遮罩層并沒有把整個瀏覽器占滿。 如下圖： ? ? 這時候我們會想到要不要換一個代碼來用，但是這個相冊代碼除了遮罩這個外其他都很完善，找不到其他的完善的相冊時。我們怎么辦？ 下面就是我寫的css?解決方案！瀏覽器分辨率目前測試最高的是1050px。 代碼如下： *html body { overflow-x: hidden; position: relative; height: 99%; margin-top: -1.5%; padding-top: 1%; } *html { padding-top: 1.5%; } 接下來我來做一下解釋 overflow-x: hidden; position: relative; margin-top: -1.5%?這三個屬性是為了讓高度為?99%的時候不在右側出現滾動條，而padding-top: 1%;?這個是為了讓在高分辨率顯示器下右側不出現滾動條 而?*html { padding-top: 1.5%; }?則是為了添補上面樣式中寫到的?margin-top: -1.5%;?這個負值。 大家可以在用jquery或是其他js框架的開發出來有缺陷的代碼中測試一下這段代碼 三、寫css時和程序員之間的溝通 各位酷友在搭完頁面后與程序員溝通時會有些小問題。 注：下面的建議里寫的都是關于和asp.net程序員之樣式命名的問題。 例如我們在寫子級樣式時，會這樣寫：.wraper form {}，這樣寫的時候，我們要考慮這個頁面內有沒有分頁之類的代碼了，因為asp.net程序員會在有分頁的頁面內加一個?form?控件?這樣我們寫在里面的form?就會被去掉，所以我們要把.wraper form {}?改成.wraper .formWraper {} 就可以，這樣問題就會解決了 還有就是復選框和單選框的地方。 ? ? ? 類似于這樣的寫法?在asp.net里?大部分程序員還是愛拿服務器控件，輸出到前臺頁面后，就會變成 變成這樣后，前臺頁面就會變亂，所以我們碰到類似的情況時還是要更改一下寫法 還有一個就是?button {} 在asp.net?里也會用到服務器控件，輸出到前臺，就會就成??這樣的話?我們的樣式又無效了，所以要給這個按鈕起一個樣式名，而不能用選擇器，例：.message_btn {} ? ? ? ? 差不多就這些問題。以后有了會繼續更新的！ 四、一些自己對大家的建議。 由于自己是自學的css樣式，還有就是沒有英語基礎，所以在這里建議和我一樣也沒有什么英語基礎的也在自學或是有一部分基礎的酷友們在寫樣式的時候盡量手寫，不要用軟件自帶的聯想功能，當你沒有這個軟件的時候，你就會有些困難了，還有就是樣式的名稱盡量用英文，就算你不明白這個名字是什么意思，也可以先翻譯一下，知道大概的意思，以后用的多了自然也就知道是什么意思了，對于以后學習其他的東西是有幫助的。 推薦剛剛學習和有了一部分基礎的酷友們一本CSS的進階書籍，精通CSS：高級Web標準解決方案?這本書的封面是青灰色的。大家可以上網看看！ 呃..?這就是目前自己寫的一些心得吧，寫的比較亂，也比較啰嗦，如果文章內有錯誤的地方，請大家提出，我會盡快修改，和大家一起進步，一起學習！ 這是做網頁制作到現在自己認為搭的最好的網站！還未上線 嫣然基金的靜態網站?http://www.simleangelfoundation.org/index.html 新年到了，祝大家在新的一年里，在各自的領域里，取得更大的進步！ 本文由?站酷網?-?sblqtd?原創，轉載請保留此信息，多謝合作。

轉載于:https://www.cnblogs.com/xgcblog/archive/2011/06/29/2093599.html

總結

以上是生活随笔為你收集整理的CSS日常公用样式与一些解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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