Css常用的排序方式權(quán)重分配是什么

這篇文章將為大家詳細(xì)講解有關(guān)Css常用的排序方式權(quán)重分配是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

排序方式：

1、按類型 如，顯示和浮動、定位、尺寸、字體等

2、按字母 按字母順序排列，優(yōu)點(diǎn)是規(guī)則簡單

3、按定義長度 按照樣式定義的字符長度排列

各有優(yōu)劣，實(shí)際應(yīng)用中，推薦使用第一種。 但是如果單靠前端工程師在編寫過程中這么做的話也是很難的，可以在寫的過程中按照效率最高的方式寫，提交代碼時(shí)使用工具為css排序。既提高效率，又方便后續(xù)代碼閱讀和維護(hù)。有一款免費(fèi)工具是 CSScomb。

合理利用css的權(quán)重，提高代碼重用性

何為權(quán)重，即css眾多類型選擇符的優(yōu)先級，優(yōu)先級高的樣式會覆蓋優(yōu)先級低的樣式。權(quán)重的更具體規(guī)則，大家可以查閱資料，這里不贅述。

教你如何依照選擇符的權(quán)重定義合適的選擇符：

（1）盡量不使用ID選擇器

一個(gè)頁面中不允許定義兩個(gè)同樣的ID，而且ID選擇器權(quán)重很高，如果要覆蓋使用了ID選擇器的元素樣式，就必須在其元素上添加新的選擇符，或使用！important，這樣的結(jié)果會使無法重用的樣式代碼變得更多。最佳實(shí)踐是盡可能使用較低權(quán)重的選擇符作為基礎(chǔ)樣式。

（2）減少子選擇器的層級

也是降低子選擇符整體權(quán)重的過程，同時(shí)，層級越少，對html結(jié)構(gòu)的依賴就越低。引起Css層級過多的另外一個(gè)原因是sass、less等工具的濫用，這也是我本人在使用之初就有意識到的問題，因?yàn)槟憧梢允褂们短缀鸵玫确绞絹矶x樣式了，這樣以來給自己省了很多功夫，但文件最終還是要編譯出來，我們不用反復(fù)的敲那么多代碼了，但生成的代碼依然還是會很多，所以，方便了自己的同時(shí)依然要特別注意減少選擇器層級。

（3）使用組合的css類選擇器

使用這種方式，開發(fā)者可以不用考慮css樣式覆蓋的問題，避開了計(jì)算選擇符權(quán)重的過程，同時(shí)提高了代碼的重用性，組合的概念是把一個(gè)復(fù)雜的父類中的可變部分和穩(wěn)定部分分割開來，穩(wěn)定部分作為主體類，可變部分分成幾個(gè)簡單的類，類與類之間沒有繼承，同樣可以起到減少對html結(jié)構(gòu)的依賴，提高代碼重用性的作用。

成都暮光時(shí)代科技有限公司說說如何兼容IE瀏覽器？

IE8及以下版本的IE瀏覽器一直是前端開發(fā)人員心中的痛。為了兼容它們做額外添加的代碼成為hack代碼，往往人們都不想去寫那些代碼。以下是兼容IE瀏覽器的一些實(shí)踐方法。

（1）熟悉IE瀏覽器中常見的樣式兼容問題

一類是瀏覽器本身的bug，一類是和標(biāo)準(zhǔn)不兼容或還不支持標(biāo)準(zhǔn)。

（2）分離樣式兼容代碼

按照瀏覽器的不同版本組織代碼文件，然后使用判斷語句，按需加載

em、px還是%？

談及這個(gè)話題的原因是，如今頁面功能變得越來越多，用來訪問頁面的設(shè)備越來越多，頁面的布局就是一個(gè)頗具挑戰(zhàn)的事情，而頁面當(dāng)中的元素的尺寸和字體、圖片的大小等也跟布局息息相關(guān)。鑒于此，前端開發(fā)開始重視如何提高頁面布局，核心思想是將頁面元素的尺寸和字體大小設(shè)置為相對值。字體相對單位包括：em、ex、ch、rem。更多內(nèi)容無需贅述，有更多的資料來講解。下面給出幾個(gè)最佳實(shí)踐：

（1）盡量設(shè)置相對尺寸

所謂設(shè)置相對尺寸，并不是說頁面整體的布局是自適應(yīng)的，整體的尺寸可以是固定尺寸也可以是自適應(yīng)的尺寸，這取決于頁面的設(shè)計(jì)。

（2）只有在可預(yù)知元素尺寸的情況下才使用絕對尺寸

比如設(shè)計(jì)上要求使用絕對寬度，比如整體寬度，側(cè)邊欄寬度，頁頭頁尾的高度固定等，在展示圖片、視頻的時(shí)候，合適的固定尺寸會讓這些多媒體元素展示獲得最佳的效果。

（3）使用em設(shè)置字體大小

使用px設(shè)置字體大小的可擴(kuò)展性不好，使用百分比設(shè)置字體大小也不符合習(xí)慣，最佳方式是使用em設(shè)置字體大小，但隨著字體設(shè)置的層級增多，這種方式反而增加了維護(hù)的成本，對于此，css3引入了rem單位，是相對于根元素的字體大小計(jì)算的，就避免了這個(gè)問題，目前除了IE8及以下，大部分瀏覽器都支持它。

關(guān)于“Css常用的排序方式權(quán)重分配是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。