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