摘要:為什么要初始化建站老手都知道,這是為了考慮到瀏覽器的兼容問題,其實不同瀏覽器對有些標簽的默認值是不同的,如果沒對初始化往往會出現瀏覽器之間的頁面差異。當然,初始化樣式會對有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
為什么要初始化css?
建站老手都知道,這是為了考慮到瀏覽器的兼容問題,其實不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面差異。當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
相信很多人都曾經出現過多多少少的,有時候進行網頁布局的時候,不知道為什么設置的網頁邊距總是達不到自己想要的效果。
比如,我在這個屬性設置了60px,但是,它卻變成了92px.
查看了一下所有屬性,原來是瀏覽器默認加上去的。
再看看,為什么我,沒加float之前是正常的。
加了float后變成不正常了,在這里,我也沒有加margin屬性。
原來,是加了float使其脫離了文檔流
然后,瀏覽器默認加上了margin-top: 16px和margin-bottom: 16px;然后60+16+16=92;
當然,還有很多類似的問題,這里附上一些網站的默認css屬性 http://www.iecss.com/
那么,應該怎么樣解決這個問題呢?
可以在css加上
*{ margin: 0; padding: 0; }
有很多人也是這樣寫的。這確實很簡單,但有人就會感到疑問:*號這樣一個通用符在編寫代碼的時候是快,但如果網站很大,CSS樣式表文件很大,這樣寫的話,他會把所有的標簽都初始化一遍,這樣就大大的加強了網站運行的負載,會使網站加載的時候需要很長一段時間。
還有就是把可能用上的屬性值加上,這里引用了雅虎工程師提供的CSS初始化示例代碼
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} a { color:#555; text-decoration:none; } a:hover { text-decoration:underline; } img { border:none; } ol,ul,li { list-style:none; } input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } table { border-collapse:collapse; } html {overflow-y: scroll;} .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; }
然后,每次寫css之前都加上這個就不用擔心什么問題了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50348.html
摘要:為什么要初始化建站老手都知道,這是為了考慮到瀏覽器的兼容問題,其實不同瀏覽器對有些標簽的默認值是不同的,如果沒對初始化往往會出現瀏覽器之間的頁面差異。當然,初始化樣式會對有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。 為什么要初始化css? 建站老手都知道,這是為了考慮到瀏覽器的兼容問題,其實不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器...
摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續更新中……,可以關注下github 項目地址 https:...
摘要:塊元素內聯元素內聯塊元素塊元素內聯元素內聯塊元素元素就是標簽,布局中常用的有三種標簽,塊元素內聯元素內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面布局。1.css基本語法及頁面引用 css基本語法 css的定義方法是: 選擇器 { 屬性:值; 屬性:值; 屬性:值;} 選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設置的樣式屬性每個屬性有一個或多個值。代碼示例: div{ wid...
閱讀 2113·2021-09-06 15:02
閱讀 1740·2021-08-13 15:02
閱讀 2301·2019-08-29 14:14
閱讀 1464·2019-08-26 13:55
閱讀 547·2019-08-26 13:46
閱讀 3401·2019-08-26 11:41
閱讀 508·2019-08-26 10:27
閱讀 3257·2019-08-23 15:28