資訊專欄INFORMATION COLUMN
摘要：錯(cuò)誤的原因是選擇器的權(quán)值不能進(jìn)位。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度，如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為。
css樣式優(yōu)先級(jí)
!important > 內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器
在學(xué)習(xí)過程中，你可能發(fā)現(xiàn)給選擇器加權(quán)值的說法，即 ID 選擇器權(quán)值為 100，類選擇器權(quán)值為 10，標(biāo)簽選擇器權(quán)值為 1，當(dāng)一個(gè)選擇器由多個(gè) ID 選擇器、類選擇器或標(biāo)簽選擇器組成時(shí)，則將所有權(quán)值相加，然后再比較權(quán)值。這種說法其實(shí)是有問題的。比如一個(gè)由 11 個(gè)類選擇器組成的選擇器和一個(gè)由 1 個(gè) ID 選擇器組成的選擇器指向同一個(gè)標(biāo)簽，按理說 110 > 100，應(yīng)該應(yīng)用前者的樣式，然而事實(shí)是應(yīng)用后者的樣式。錯(cuò)誤的原因是：選擇器的權(quán)值不能進(jìn)位。還是拿剛剛的例子說明。11 個(gè)類選擇器組成的選擇器的總權(quán)值為 110，但因?yàn)?11 個(gè)均為類選擇器，所以其實(shí)總權(quán)值最多不能超過 100， 你可以理解為 99.99，所以最終應(yīng)用后者樣式。
CSS文本
text-indent
無法將該屬性應(yīng)用于行內(nèi)元素以及圖像之類的替換元素上
該屬性可以繼承
text-transform
可以處理文本的大小寫
小寫/大寫/首字母大寫
white-space
設(shè)置如何處理元素內(nèi)的空白(空格、換行和 tab 字符)
word-break
規(guī)定自動(dòng)換行的處理方法
word-wrap
規(guī)定長(zhǎng)單詞或 URL 地址換行到下一行的規(guī)則
CSS 背景
background-color ：默認(rèn)為transparent，而不是白色,這樣其祖先元素的背景才能可見
background-origin ：規(guī)定 background-position 屬性相對(duì)于什么位置來定位，默認(rèn)為padding-box
border-box：左上角為外邊框的左上角
padding-box：左上角為內(nèi)邊框的左上角，即padding-box的左上角
content-box：左上角為padding內(nèi)邊距的左上角
background-position
有background-image屬性時(shí)才有效，可以改變圖像在背景中的位置，
默認(rèn)在左上角位置（top left; 0% 0%; 0px 0px），下面涉及到的左上角，左邊等要考慮background-origin 屬性的值而定
關(guān)鍵字設(shè)置值
位置關(guān)鍵字可以按任何順序出現(xiàn)(因?yàn)殛P(guān)鍵字可以直接辨別方向)，只要保證不超過兩個(gè)關(guān)鍵字，一個(gè)對(duì)應(yīng)水平方向(left或"right或center)，另一個(gè)對(duì)應(yīng)垂直方向(top或"bottom或center)；
如果只出現(xiàn)一個(gè)關(guān)鍵字，則認(rèn)為另一個(gè)關(guān)鍵字是 center。
百分?jǐn)?shù)設(shè)置值
百分?jǐn)?shù)值前一個(gè)對(duì)應(yīng)水平方向，后一個(gè)對(duì)應(yīng)垂直方向，若只有一個(gè)則這個(gè)對(duì)應(yīng)水平方向，另一個(gè)為50%
百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像，圖像位于 0% 0%，其左上角將放在元素左上角;圖像位于 50% 50%，其中心點(diǎn)將與元素的中心點(diǎn)對(duì)齊；圖像位于 100% 100%，其右下角將放在元素的右下角
水平方向的0%是圖像的左邊界與元素的左邊對(duì)齊，100%是圖像的右邊界與元素的右邊對(duì)齊；垂直方向的0%是圖像的上邊界與元素的上邊對(duì)齊，100%是圖像的下邊界與元素的下邊對(duì)齊；
長(zhǎng)度值設(shè)置值
長(zhǎng)度值解釋的是元素左上角的偏移，偏移點(diǎn)是圖像的左上角，僅應(yīng)用于圖像
圖像的左上角與 background-position 聲明中指定的點(diǎn)對(duì)齊，即0px 0px圖像的左上角位于元素的左上角
可以混合使用百分?jǐn)?shù)值和長(zhǎng)度值，當(dāng)志愿一個(gè)長(zhǎng)度值時(shí)它對(duì)應(yīng)水平方向，垂直方向?qū)?b>50%
background-attachment
聲明背景圖像相對(duì)于可視區(qū)是固定(fixed)還是滾動(dòng)(scroll)的
background-size
在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。
第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度，如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。
百分比設(shè)置值
以父元素的寬高的百分比來設(shè)置背景圖像的寬度和高度
長(zhǎng)度值設(shè)置值
直接設(shè)置背景圖像的高度和寬度
關(guān)鍵字設(shè)置值
cover：把背景圖像擴(kuò)展或縮小，以使背景圖像能夠完全覆蓋背景區(qū)域，所以背景圖像的某些部分可能無法顯示在背景區(qū)域中。
contain：把圖像圖像擴(kuò)展或縮小，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域，背景區(qū)域可能會(huì)有空白
background-clip
規(guī)定背景的繪制區(qū)域，可以裁剪背景到指定區(qū)域,默認(rèn)為border-box
border-box：背景圖像在 border-box內(nèi)的部分才會(huì)顯示
padding-box：背景圖像在 padding-box內(nèi)的部分才會(huì)顯示
content-box：背景圖像在 content-box內(nèi)的部分才會(huì)顯示
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow v-shadow為必須的，是陰影的位置，正常情況下陰影的左上角相對(duì)于元素的"padding-box"的左上角偏移，但是當(dāng)設(shè)置了inset變?yōu)閮?nèi)陰影后，陰影成為一個(gè)環(huán)，內(nèi)環(huán)的左上角相對(duì)于元素的"padding-box"的左上角偏移，而外環(huán)的左上角與元素的"padding-box"的左上角重合
盒模型與視覺格式化模型
盒模型與視覺格式化模型
待續(xù)...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113250.html
摘要：提交內(nèi)容可以是一個(gè)提議想法初步描述該階段是對(duì)所提交新特性的正式建議。在這個(gè)階段需具備以下條件指定一名成員作為審閱通過有實(shí)現(xiàn)的或者初步編寫標(biāo)準(zhǔn)，包括問題描述解決方案示例語法語義關(guān)鍵的算法及抽象實(shí)現(xiàn)在的復(fù)雜度等該階段是會(huì)出現(xiàn)標(biāo)準(zhǔn)中的第一個(gè)版本。 ECMAScript 與 JavaScript ECMAScript 是一套腳本語言的規(guī)范，內(nèi)部編號(hào) ECMA-262 該規(guī)范由 Ecma(Eu...
摘要：提交內(nèi)容可以是一個(gè)提議想法初步描述該階段是對(duì)所提交新特性的正式建議。在這個(gè)階段需具備以下條件指定一名成員作為審閱通過有實(shí)現(xiàn)的或者初步編寫標(biāo)準(zhǔn)，包括問題描述解決方案示例語法語義關(guān)鍵的算法及抽象實(shí)現(xiàn)在的復(fù)雜度等該階段是會(huì)出現(xiàn)標(biāo)準(zhǔn)中的第一個(gè)版本。 ECMAScript 與 JavaScript ECMAScript 是一套腳本語言的規(guī)范，內(nèi)部編號(hào) ECMA-262 該規(guī)范由 Ecma(Eu...
摘要：因?yàn)樵陧撁婕虞d完成后，引擎維護(hù)著兩個(gè)隊(duì)列，一個(gè)是按頁面順序加載的執(zhí)行隊(duì)列，還有一個(gè)空閑隊(duì)列，使用定時(shí)函數(shù)就是將回調(diào)函數(shù)加入到空閑隊(duì)列中，故和其他定時(shí)器是并發(fā)執(zhí)行的。 1.window.onload和$(document).ready()的區(qū)別： ①執(zhí)行時(shí)間：window.onload會(huì)在所有元素，包括圖片,引用文件加載完成之后執(zhí)行，而$(document).ready()則會(huì)在HTML...
摘要：醞釀許久之后，筆者準(zhǔn)備接下來撰寫前端面試題系列文章，內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識(shí)前端掘金基礎(chǔ)智商劃重點(diǎn)在實(shí)際開發(fā)中，已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合，我在認(rèn)識(shí)了兩位同是10年工作經(jīng)驗(yàn)的阿里前端開發(fā)小伙伴，不但要向前輩學(xué)習(xí)，我有時(shí)候還會(huì)選擇另一種方法逗逗他們，拿了網(wǎng)上一道經(jīng)典面試題，可能我連去阿里面試的機(jī)會(huì)都沒有，但是我感受到了一次面試1...
閱讀 3087·2019-08-30 15:56
閱讀 1242·2019-08-29 15:20
閱讀 1580·2019-08-29 13:19
閱讀 1489·2019-08-29 13:10
閱讀 3391·2019-08-26 18:27
閱讀 3077·2019-08-26 11:46
閱讀 2241·2019-08-26 11:45
閱讀 3769·2019-08-26 10:12
