CSS樣式初始化分為PC端和移動APP端

1.PC端：使用Normalize.css

Normalize.css是一種CSS reset的替代方案。

我們創造normalize.css有下面這幾個目的：

• 保護有用的瀏覽器默認樣式而不是完全去掉它們
• 一般化的樣式：為大部分HTML元素提供
• 修復瀏覽器自身的bug并保證各瀏覽器的一致性
• 優化CSS可用性：用一些小技巧
• 解釋代碼：用注釋和詳細的文檔來

Normalize.css支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。盡管這個項目基于一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

Normalize vs Reset

知道Normalize.css和傳統Reset的區別是非常有價值的。

1. Normalize.css 保護了有價值的默認值

Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準相符合。

2. Normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關于這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

可以看以下這個例子，看看對于HTML5中新出現的input類型search，Normalize.css是如何保證跨瀏覽器的一致性的。

/** * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

3. Normalize.css 不會讓你的調試工具變的雜亂

使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。

4. Normalize.css 是模塊化的

這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。

5. Normalize.css 擁有詳細的文檔

Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易地進行自己的測試。

這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。

?

2.移動APP端：

html {box-sizing: border-box; }/*Yes, the universal selector. No, it isn't slow: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/*/ * {/*This prevents users being able to select text. Stops long presses in iOS bringing up copy/paste UI for example. Note below we specifically switch user-select on for inputs for the sake of Safari. Bug here: https://bugs.webkit.org/show_bug.cgi?id=82692*/user-select: none;/*This gets -webkit specific prefix as it is a non W3C property*/-webkit-tap-highlight-color: rgba(255,255,255,0);/*Older Androids need this instead*/-webkit-tap-highlight-color: transparent;/* Most devs find border-box easier to reason about. However by inheriting we can mix box-sizing approaches.*/box-sizing: inherit; }*:before, *:after {box-sizing: inherit; }/* Switching user-select on for inputs and contenteditable specifically for Safari (see bug link above)*/ input[type], [contenteditable] {user-select: text; }body, h1, h2, h3, h4, h5, h6, p {/*We will be adding our own margin to these elements as needed.*/margin: 0;/*You'll want to set font-size as needed.*/font-size: 1rem;/*No bold for h tags unless you want it*/font-weight: 400; }a {text-decoration: none;color: inherit; }/*No bold for b tags by default*/ b {font-weight: 400; }/*Prevent these elements having italics by default*/ em, i {font-style: normal; }/*Mozilla adds a dotted outline around a tags when they receive tab focus. This removes it. Be aware this is a backwards accessibilty step!*/ a:focus {outline: 0; }input, fieldset {appearance: none;border: 0;padding: 0;margin: 0;/*inputs and fieldset defaults to having a min-width equal to its content in Chrome and Firefox (https://code.google.com/p/chromium/issues/detail?id=560762), we may not want that*/min-width: 0;/*Reset the font size and family*/font-size: 1rem;font-family: inherit; }/* For IE, we want to remove the default cross ('X') that appears in input fields when a user starts typing - Make sure you add your own! */ input::-ms-clear {display: none; }/*This switches the default outline off when an input receives focus (really important for users tabbing through with a keyboard) so ensure you put something decent in for your input focus instead!!*/ input:focus {outline: 0; }input[type="number"] {/*Mozilla shows the spinner UI on number inputs unless we use this:*/-moz-appearance: textfield; }/*Removes the little spinner controls for number type inputs (WebKit browsers/forks only)*/ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {appearance: none; }/*SVG defaults to inline display which I dislike*/ svg {display: inline-flex; }img {/*Make images behave responsively. Here they will scale up to 100% of their natural size*/max-width: 100%;/*Make images display as a block (UA default is usually inline)*/display: block; }


3.知識擴展
1.-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設置為0，去掉點擊鏈接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android)
-webkit-tap-highlight-color:rgba(255,0,0,0.5);? ?//利用此屬性，設置touch時鏈接區域高亮為50%的透明紅，只在ios上起作用。android上只要使用了此屬性就表現為邊框。在body上加此屬性，這樣就保證body的點擊區域效果一致了

2.outline：none
(1)在pc端為a標簽定義這個樣式的目的是為了取消ie瀏覽器下點擊a標簽時出現的虛線。ie7及以下瀏覽器還不識別此屬性，需要在a標簽上添加hidefocus="true"
(2)input，textarea{outline:none}??取消chrome下默認的文本框聚焦樣式
(3)在移動端是不起作用的，想要去除文本框的默認樣式可以使用-webkit-appearance，聚焦時候默認樣式的取消是-webkit-tap-highlight-color。看到一些移動端reset文件加了此屬性，其實是多余。

3.-webkit-appearance
-webkit-appearance: none;//消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式?
不同type的input使用這個屬性之后表現不一。text、button無樣式，radio、checkbox直接消失
4.-webkit-user-select
-webkit-user-select: none; // 禁止頁面文字選擇 ，此屬性不繼承，一般加在body上規定整個body的文字都不會自動調整
5.-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自動調整大小(默認情況下旋轉設備的時候文字大小會發生變化)，此屬性也不繼承，一般加在body上規定整個body的文字都不會自動調整?
6.-webkit-touch-callout
-webkit-touch-callout:none; // 禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標簽都要加
7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滾動(僅iOS 5以上支持)

轉載于:https://www.cnblogs.com/ranyonsue/p/6830618.html

總結

以上是生活随笔為你收集整理的PC端和移动APP端CSS样式初始化的全部內容，希望文章能夠幫你解決所遇到的問題。

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