摘要:前言所有瀏覽器都有附帶的默認(rèn)樣式,這些樣式應(yīng)用在每一個(gè)頁面,叫做用戶代理樣式表。標(biāo)準(zhǔn)字體大小可以,在移動(dòng)端使用的適配的話會(huì)動(dòng)態(tài)改變。刪除中的內(nèi)邊框和填充。讓中的在中正確顯示有些瀏覽器會(huì)顯示不過標(biāo)簽用的也少,自行取舍。
前言:所有瀏覽器都有附帶的默認(rèn)樣式,這些樣式應(yīng)用在每一個(gè)頁面,叫做“用戶代理樣式表”。(如下需要梯子)
Chromium UA stylesheet -Google Chrome & Opera
Mozilla UA stylesheet - firefox
WebKit UA stylesheet - safari
雖然大部分相同,但也有很多樣式是不一致的,如搜索輸入框
所以我們需要reset css處理,統(tǒng)一不同瀏覽器差異確認(rèn)團(tuán)隊(duì)開發(fā)的起始標(biāo)準(zhǔn),彌補(bǔ)瀏覽器的‘缺點(diǎn)’。
html{ /* 標(biāo)準(zhǔn)字體大小可以,在移動(dòng)端使用的rem適配的話會(huì)動(dòng)態(tài)改變。 */ font-size:14px; /* 使用IE盒模型(個(gè)人取舍,我一般設(shè)置width是這是盒子的真實(shí)大小,包括padding和border) */ box-sizing: border-box; } html,body{ /* 在有些手機(jī)瀏覽器中點(diǎn)擊一個(gè)鏈接或著可點(diǎn)擊元素的時(shí)候,會(huì)出現(xiàn)一個(gè)半透明的灰色背景; */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 提升移動(dòng)端滾動(dòng)的體驗(yàn)效果 */ -webkit-overflow-scrolling: touch; overflow-scrolling: touch; /* 與瀏覽器窗口高度一致 */ height: 100%; } body{ /* 有些背景默認(rèn)為淺灰色,所以統(tǒng)一設(shè)置為純白 */ background: #fff; /* 照著antd上面來的,在公司就別用微軟雅黑了,不建議字體使用rem。 */ font:14px,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei", "Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" /* 使字體更加順滑 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
去除瀏覽器默認(rèn)的margin和padding, 自行刪減一些不必要的標(biāo)簽
body, p, h1, h2, h3, h4, h5, h6, dl, dd, ul, ol, th, td, button, figure, input, textarea, form, pre, blockquote, figure{ margin: 0; padding: 0; } a{ /* 小手 */ cursor: pointer; /* 取消超鏈接的默認(rèn)下劃線 */ text-decoration:none; /* antd里面還做了 , 看你團(tuán)隊(duì)需不需要這樣的風(fēng)格 */ transition: color 0.3s ease; } ol, ul{ /* 去除自帶的ugly樣式。 */ list-style:none }
這些節(jié)點(diǎn)部分屬性沒有繼承父節(jié)點(diǎn)樣式,所有繼承一下,并取消outline,外輪廓的效果
a, h1, h2, h3, h4, h5, h6, input, select, button, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; } button, input[type="submit"], input[type="button"] { /* 可點(diǎn)擊小手 */ cursor: pointer; } /* 取消部分瀏覽器數(shù)字輸入控件的操作按鈕 apperance可以改變控件的外觀。 */ input[type="number"] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /** * 刪除Firefox中的內(nèi)邊框和填充。 */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * 讓html5中的hidden在IE10中正確顯示 */ [hidden] { display: none; } template { /* 有些瀏覽器會(huì)顯示template 不過template標(biāo)簽用的也少,自行取舍。 */ display: none; }
css Reset地址
后續(xù)還會(huì)繼續(xù)添加,小伙伴們一起吧。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116282.html
摘要:在以前寫代碼的時(shí)候,一般都會(huì)在里添加重置樣式,其內(nèi)容如下但是最近在網(wǎng)上看了看網(wǎng)絡(luò)文章,也感覺有些重置是沒有用的。當(dāng)然重置的優(yōu)點(diǎn),缺點(diǎn)都不說了,估計(jì)心里都非常有數(shù)的,還是要根據(jù)實(shí)際項(xiàng)目來。后來主管給我推薦了一款替代重置的替代方案,那就是用。 在以前寫html代碼的時(shí)候,一般都會(huì)在head里添加重置樣式reset.css,其內(nèi)容如下: @charset utf-8; html, body,...
摘要:下面開始對(duì)進(jìn)行簡單的介紹,關(guān)于兩者的差異區(qū)別可以看問答平臺(tái)使用遇到的問題和有什么本質(zhì)區(qū)別沒簡單介紹關(guān)于對(duì)的介紹,這里引用咀嚼之味針對(duì)官方介紹翻譯的的中文版本。目前已經(jīng)成為了的替代方案是無可爭議的事情了。 前言 近期在翻閱陳舊的歷史資料,整理之前飽受爭議的CSS Reset問題,不過好像十多年過去,現(xiàn)在大家統(tǒng)一了口徑,紛紛推薦使用Normalize.css,包括Bootstrap都進(jìn)行...
摘要:下面開始對(duì)進(jìn)行簡單的介紹,關(guān)于兩者的差異區(qū)別可以看問答平臺(tái)使用遇到的問題和有什么本質(zhì)區(qū)別沒簡單介紹關(guān)于對(duì)的介紹,這里引用咀嚼之味針對(duì)官方介紹翻譯的的中文版本。目前已經(jīng)成為了的替代方案是無可爭議的事情了。 前言 近期在翻閱陳舊的歷史資料,整理之前飽受爭議的CSS Reset問題,不過好像十多年過去,現(xiàn)在大家統(tǒng)一了口徑,紛紛推薦使用Normalize.css,包括Bootstrap都進(jìn)行...
摘要:相比于傳統(tǒng)的,是一種現(xiàn)代的為準(zhǔn)備的優(yōu)質(zhì)替代方案。保護(hù)了有價(jià)值的默認(rèn)值通過為幾乎所有的元素施加默認(rèn)樣式,強(qiáng)行使得元素有相同的視覺效果。這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式。任何人都能夠提交問題報(bào)告或者提交補(bǔ)丁。 本文譯自Normalize.css官網(wǎng): http://nicolasgallagher.com/a... Normalize.css 只是一個(gè)很小的CSS文件,但...
閱讀 1731·2023-04-25 23:43
閱讀 908·2021-11-24 09:39
閱讀 713·2021-11-22 15:25
閱讀 1710·2021-11-22 12:08
閱讀 1085·2021-11-18 10:07
閱讀 2066·2021-09-23 11:22
閱讀 3338·2021-09-22 15:23
閱讀 2469·2021-09-13 10:32