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