# CSS ## 相關概念 ### 盒子模型 1. 盒子模型中主要的屬性有： - 內容(content) - 內邊距(padding) - 邊框(border) - 外邊距(margin) - 寬度(width) - 高度(height)  2. 設置元素的盒子模型顯示方式 可以通過 box-sizing(CSS3) 屬性設置元素顯示的盒子模型，可以選擇的值有 content-box(default)、border-box、inherit。 - content-box, 設置的寬高應用于元素的內容 - border-box, 設置的寬高決定元素的邊框和 - inherit, 繼承父元素 ## 頁面引入樣式 ### link && @import 1. link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; 2. 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; 3. import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題; ### CSS選擇器 - 通配符選擇器（*） - 類選擇器 - ID選擇器 - 屬性選擇器（*[name]） - 后代選擇器(.classname .otherclassname) - 子元素選擇器（h1>strong) - 相鄰兄弟選擇器(.classname + .classname) - 偽類（button:active, p:first-child, q:lang(no),focus,hover,link,vistied,) - 偽元素（first-line, first-letter, :before, :after,) > 1.后代選擇器和子元素選擇器的區別是，后代選擇器的兩個元素的層次間隔可以是任意的，而子元素選擇器只能選擇前邊元素的子元素。 > 2.相鄰兄弟選擇器，選擇的是后邊的元素。 ## CSS屬性 ### Position - static: 默認值，沒有定位，元素出現在正常流中，（忽略top、bottom、left、right、z-index） - relative: 生成相對定位的元素，可以通過top、bottom、left、right相對于正常位置進行定位，可以通過z-index分層。正常流中仍然有relative的位置，只是進行了偏移。定位總是相對于最近的父元素，無論其是何種定位方式。 - absolute: 生成絕對定位的元素，相對于static定位外的第一個元素進行定位，元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。正常流中不再有absolute的位置，相當于元素懸浮。離其最近的absolute或者relative層，沒有的話就以body定位。margin也符號上述規則。 - fixed： 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過"left","top","right"以及"bottom"屬性進行規定。可通過z-index進行層次分級。 ### border style |dotted |solid |double |dashed| |-------|------|-------|------| |點狀 |實線 |雙線 |虛線 | ### background-attachment 滾動視覺差。可以實現頁面背景圖固定的效果。 |可能的屬性值 |效果 | |-------------|----------| |local |類似scroll | |scroll |背景隨內容滾動而滾動| |fixed |背景固定于可視區域，不隨內容的滾動而滾動| > 需要注意的是，此屬性以 background-image 屬性為前提。 1. local 背景圖相對于元素內容固定。 2. scroll 默認值，背景圖相對于元素固定，背景隨頁面滾動而滾動，可以理解為此時，元素內容于背景是綁定的。 3. fixed 背景圖固定于可視區域，當前元素只要在可視區域內，則背景都是此元素的背景，不會隨元素內容的滾動而滾動，知道遇到下一個元素的背景。 > 此時背景圖的 z-index 相對較低，如果可視區域內同時存在了其他元素，其他元素的背景會遮蓋住此元素的背景圖。 ### visibility 用于設置 HTML 元素的可見性。 |可選值 |作用 | |-------|----------------------| |visible|默認值。元素是可見的| |hidden |元素是不可見的| |collapse|當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"| |inherit|規定應該從父元素繼承 visibility 屬性的值| > 注意與 display 區別，visibility 只是使元素不可見，該元素仍會占用空間。 ## CSS三大機制 ### 1、特殊性 `特殊性`：一個元素可以被多少個規則設置，但是最終只有一個規則會起作用，那么該規則的特殊性最高，特殊性即CSS優先級。 ### 2、繼承 `CSS繼承`：是從一個元素向其后代元素傳遞屬性值所采用的機制。 - 繼承是從父元素到子元素 - 所有關于文字圖片大小樣式的屬性可以繼承( 例如：letter-spacing、word-spacing、white-space、line-height、color、font ##### 無繼承性的屬性 1. display：規定元素應該生成的框的類型 2. 文本屬性： |屬性 |含義 | |---------------|----------------------| |vertical-align |垂直文本對齊 | |text-decoration|規定添加到文本的裝飾 | |text-shadow |文本陰影效果 | |white-space |空白符的處理 | |unicode-bidi |設置文本的方向 | 3. 盒子模型的屬性：width、height、margin及margin相關、border及boder相關、padding及padding相關 4. 背景屬性：background（background-color、background-image、background-repeat、background-position、background-attachment） 5. 定位屬性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index 6. 生成內容屬性：content、counter-reset、counter-increment 7. 輪廓樣式屬性：outline-style、outline-width、outline-color、outline 8. 頁面樣式屬性：size、page-break-before、page-break-after 9. 聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during #### 有繼承性的屬性 1. 字體系列屬性：font及font相關、 2. 文本系列屬性：text-indent：文本縮進、text-align、line-height、word-spacing：即字間隔、letter-spacing：字符間距、text-transform：控制文本大小寫、direction：規定文本的書寫方向、color 3. 元素可見性：visibility 4. 表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout 5. 列表布局屬性：list-style-type、list-style-image、list-style-position、list-style 6. 生成內容屬性：quotes 7. 光標屬性：cursor 8. 頁面樣式屬性：page、page-break-inside、windows、orphans 9. 聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation #### 所有元素可以繼承的屬性 1. 元素可見性：visibility 2. 光標屬性：cursor #### 內聯元素可以繼承的屬性 1. 字體系列屬性 2. 除text-indent、text-align之外的文本系列屬性 #### 塊級元素可以繼承的屬性 1. text-indent、text-align ### 3、層疊 `層疊`：確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來源。這個過程就稱為層疊。 - 規則的權重（!important），加了權重的優先級最高 - 當權重相同的時候，會比較規則的特殊性，根據前面的優先級計算規則決定哪條規則起作用 - 當特殊性值也一樣的時候，css規則會按順序排序，后聲明的規則優先級高， > 后聲明的規則優先級高 ## 三、css優先級 ### 1、相關概念 `聲明`：CSS選擇器后邊大括號里的樣式叫做聲明。 `聲明塊`： CSS選擇器整個大括號叫做聲明塊。 ### 2、優先級的計算 選擇器的特殊值用4位標識，0，0，0，0 ，不同選擇器對特殊值的影響如下： |選擇器 |影響 | |--------------------------|-----------| |通配選擇器*對特殊性沒有貢獻 |即0,0,0,0 | |元素和偽元素 |加0,0,0,1 | |類選擇器、屬性選擇器或偽類 |加0,0,1,0 | |ID選擇器的特殊性值 |加0,1,0,0 | |!important（權重） |它沒有特殊性值，但它的優先級是最高的，可以認為1,0,0,0,0| |繼承的屬性 |沒有特殊值,0,0,0,0 | ## 四、CSS實例 ### 1. 純CSS實現三角形 ```css .triangle{ width:0; height:0; border-width:20px; border-style:solid dashed dashed dashed; border-color:#e66161 transparent transparent transparent; } ``` > 利用了 CSS 中的 border 屬性。 ### 2. 對話框下邊的三角形 利用旋轉操作將正方形旋轉。 ### 3. 不定高元素垂直居中 - 使用：vertical-align:(對內部的文字起作用，內部不能是 div ) - 外層 div，display: table-cell => 對 div 中的文字設置垂直居中，。 - 外層 div，display: inline => 可以通過設置 line-height 改變 div 的高度。 - 外層 div, display: inline-block => 設置 line-height 和 height 相同的時候，vertical-align 作用才會顯現出。 - 外層 div設置為 relative，內層div 設置為 left:50%, top:50%, absolute，transform：translate(-50%, -50%), 或者使用 transform: translate3d(-50%, -50%, 0) 一樣道理。 - 外層 div，display: -webkit-box; -webkit-box-algin: center; -webkit-bok-pack: center;（外層 div 的內容可以是文字，也可以是div） > -webkit-box-glign 只有 chrome,oprate 支持)