CSS語法 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告 CSS 註釋 CSS註釋以 /* 開始, 以 */ 結束 CSS引入方式 CSS屬性書寫順序 建議遵循以下順序 1.佈局定位屬性：display / position / float/ clear / visibility / overflow( 建議display第一個寫，畢竟關係到模式) 2.自身屬性：width / height / margin/ padding / border / background 3.文字屬性：color / font / text-decoration / text-align / vertical-align / white-space / break-word 4.其他屬性( CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient CSS三大特性

層疊性 相同選擇器給設定相同的樣式，此時一個樣式就會覆蓋(層疊)另一個衝突的樣式。層性主要解決樣式衝突的問題 層疊性原則 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式 樣式不衝突，不會層疊 繼承性 子標籤會繼承父標籤的某些樣式，如文字顏色和字號(text-，font-，line-這些元素開頭的可以繼承，以及color屬性) 行高的繼承性 行高可以跟單位也可以不跟單位 如果子元素沒有設定行高，則會繼承父元素的行高為 body行高1.5這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高 例：font: 12px/1.5 'Microsoft YaHei'; 優先順序

例：color: pink!important; 權重的疊加 權重雖然會疊加，但是永遠不會有進位 元素顯示模式 塊元素 常見的塊元素有<h1>~<h6>、<p>、<div>、<u>、<o>、<li>等，其中<div>標籤是最典型的塊元素 塊級元素的特點 1.自己獨佔一行 2.高度，寬度、外邊距以及內邊距都可以控制 3.寬度預設是容器(父級寬度)的100% 4.是一個容器及盒子，裡面可以放行內或者塊級元素 注意： 文字類的元素內不能使用塊級元素 <p>標籤主要用於存放文字，因此<p>裡面不能放塊級元素，特別是不能放<div> 同理，<h1>~<h6>等都是文字類塊級標籤，裡面也不能放其他塊級元素 行內元素

常見的行內元素有<a>、< strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤是最典型的行內元素。有的地方也將行內元素稱為內聯元素 行內元素的特點 1.相鄰行內元素在一行上,一行可以顯示多個 2.高、寬直接設定是無效的 3.預設寬度就是它本身內容的寬度 4.行內元素只能容納文字或其他行內元素 注意： 連結裡面不能再放連結 特殊情況連結<a>裡面可以放塊級元素，但是給<a>轉換一下塊級模式最安全 行內塊元素 在行內元素中有幾個特殊的標籤 <img />、<input />、<td>,它們同時具有塊元素和行內元素的特點 行內塊元素的特點 1.和相鄰行內元素(行內塊)在一行上，但是他們之間會有空白縫隙。一行可以顯示多個(行內元素特點) 2.預設寬度就是它本身內容的寬度(行內元素特點)。 3.高度，行高、外邊距以及內邊距都可以控制(塊級元素特點)。 元素顯示模式轉換 轉換為塊元素: display: block; 轉換為行內元素: display: inline; 轉換為行內塊: display: inline- block; emmet語法 生成html標籤 1.生成標籤直接輸入標籤名按tab鍵即可，比如div然後tab鍵,就可以生成<dⅳ></div> 2.如果想要生成多個相同標籤加上 * 就可以了，比如 div*3 就可以快速生成3個div 3.如果有父子級關係的標籤，可以用 > 比如，ul>li就可以了 4.如果有兄弟關係的標籤，用 + 就可以了比如 div+p 5.如果生成帶有類名或者id名字的，直接寫 .demo 或者 #demo 6.如果想生成指定的標籤帶有類名或者id名字的，比如 p.demo 或者 p#demo 7.如果生成的div類名是有順序的，可以用自增符號 $ 8.如果想要在生成的標籤內部寫內容可以用 {} 表示 生成css樣式 1.比如 w200 按tab可以生成 width: 200px; 2.比如 lh26 按tab可以生成 line-height: 26px; 3.比如 tac 按tab可以生成 text-align: center; 選擇器 標籤選擇器 是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式 類選擇器(class) class可以在多個元素中使用 類選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個點 "." 號顯示 類選擇器使用 "." (英文點號)進行標識，後面緊跟類名(自定義，我們自己命名的) 多類名使用方式：多個類名中間必須用空格分開 id選擇器 id屬性只能在每個HTML文件中出現一次 HTML元素以id屬性來設定id選擇器，CSS中id選擇器以 "#" 來定義 萬用字元選擇器 在CSS中，萬用字元選擇器使用 "*" 定義，它表示選取頁面中所有元素(標籤) 萬用字元選擇器不需要呼叫，自動給所有的元素使用樣式 複合選擇器 後代選擇器 可以選擇父元素裡面子元素。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代 語法：元素1 元素2 { 樣式宣告 } 元素1和元素2中間用空格隔開 元素1是父級，元素2是子級，最終選擇的是元素2 元素2可以是兒子，也可以是孫子等，只要是元素1的後代即可 元素1和元素2可以是任意基礎選擇器 子選擇器 只能選擇作為某元素的最近一級子元素。簡單理解就是選親兒子元素 語法：元素1>元素2 { 樣式宣告 } 元素1和元素2中間用大於號隔開 元素1是父級，元素2是子級，最終選擇的是元素2 元素2必須是親兒子，其孫子、重孫之類都不歸他管，你也可以叫他親兒子選擇器 並集選擇器 並集選擇器可以選擇多組標籤同時為他們定義相同的樣式。通常用於集體宣告 並集選擇器是各選擇器通過英文逗號(,)連線而成，任何形式的選擇器都可以作為並集選擇器的一部分 語法：元素1, 元素2 { 樣式宣告 } 元素1和元素2中間用英文逗號隔開 逗號可以理解為和的意思 交集選擇器 交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格 語法：h3.class { color:red; font-size:25px; } 偽類選擇器 連結偽類選擇器 為了確保生效，請按照LVHA的順序宣告 link - visited - hover - active a:link # 正常，未訪問過的連結 a:visited # 使用者已訪問過的連結 a:hover # 當用戶滑鼠放在連結上時 a:active # 連結被點選的那一刻 focus偽類選擇器 焦點就是游標，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說 input:focus 字型屬性 font-family # 指定文字的字體系列 font-size # 指定文字的字型大小 font-weight # 指定字型的粗細 font-weight 通常使用數字表示粗細 font-weight: normal; // 預設值（不加粗） font-weight: bold; // 加粗 font-weight: 100~900; // 400等同於normal，700等同於blod font-style font-style: normal; // 預設值 font-style: italic; // 斜體 font 在一個宣告中設定所有的字型屬性 font: font-style font-weight font-size/line-height font-famliy 例：font: italic 700 16px 'Microsoft YaHei' 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，並且各個屬性間以空格隔開 不需要設定的屬性可以省略(取預設值)，但必須保留font-size和font- family屬性，否則font屬性將不起作用 文字屬性 文字顏色color 十六進位制值 - 如: ＃FF0000 一個RGB值 - 如: RGB(255,0,0) 顏色的名稱 - 如: red 文字對齊text-align text-align: left; // 左對齊（預設） text-align: right; // 右對齊 text-align: center; // 居中對齊 文字修飾text-decoration text-decoration: none; // 預設，沒有裝飾線 text-decoration: underline; // 下劃線 text-decoration: overline; // 上劃線 text-decoration: line-through; // 刪除線 文字縮排text-indent 用來指定文字的第一行的縮排，通常是將段落的首行縮排 em 是一個相對單位，就是當前元素的1個文字的大小 例：text-indent: 2em 例：text-indent: 12px 行間距line-height 例：line-height: 26px 文字垂直居中 讓文字的行高等於盒子的高度，就可以讓文字在當前盒子內垂直居中 原理 CSS背景 背景圖片實際開發常見於logo或者一些裝飾性的小圖片或者是超大的背景圖片，優點是非常便於控制位置(精靈圖也是一種運用場景) background-color // 背景顏色 background-image // 背景圖片，例：background-image: url(img/01.jpeg); background-repeat // 背景平鋪 background-repeat: repeat; // 背景影象在縱向和橫向上平鋪（預設） background-repeat: no-repeat; // 背景影象不平鋪 background-repeat: repeat-x; // 背景影象在橫向上平鋪 background-repeat: repeat-y; // 背景影象在縱向上平鋪 背景圖片位置background-position 引數是方位名詞 預設順序是先水平(x軸)，後垂直(y軸) 如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如 left top 和 top left 效果一致 如果只指定了一個方位名詞，另一個值省略，則第二個值預設居中對齊 例：background-position: left center; 引數是精確單位 如果引數值是精確座標，那麼第一個肯定是ⅹ座標，第二個一定是y座標 如果只指定一個數值，那麼該數值一定是x座標，另一個預設垂直居中 例：background-position: 20px 50px; 引數是混合單位 如果指定的兩個值是精確單位和方位名詞的混合使用，則第一個值是x座標，第二個值是y座標 例：background-position: 20px center; 背景影象固定background-attachment background-attachment: scroll; // 背景影象隨物件內容滾動 background-attachment: fixed; // 背景影象固定 複合寫法 當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為： background: 背景顏色 背景圖片地址 背景平鋪 背景影象滾動 背景圖片位置 背景色半透明 background: rgba(0, 0, 0, 0.5); 最後一個引數是alpha透明度，取值範圍在0~1之間 盒子模型 Margin(外邊距) Border(邊框) Padding(內邊距) Content(內容) 邊框border 邊框會影響盒子的實際大小 語法：border: border-width || border-style || border-color border-width // 定義邊框粗細，單位是px border-style // 邊框的樣式 border-color // 邊框的樣色 border-style 常用屬性值 none // 預設無邊框 dotted // 定義一個點線邊框 dashed // 定義一個虛線邊框 solid // 定義實線邊框 邊框分開寫法： border-top: 1px solid red; // 只設定上邊框，其餘同理 表格的細線邊框 border-collapse: collapse; // 表示相鄰邊框合併在一起 內邊距padding 內邊距會影響盒子的實際大小 如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小 padding-left // 左內邊距 padding-right // 右內邊距 padding-top // 上內邊距 padding-bottom // 下內邊距 複合屬性 外邊距margin margin的簡寫方式和padding的完全一致 margin-left // 左外邊距 margin-right // 右外邊距 margin-top // 上外邊距 margin-bottom // 下外邊距 塊級盒子水平居中 外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件： 1.盒子必須指定了寬度(width) 2.盒子左右的外邊距都設定為auto 例：margin: 0 auto; 行內元素或者行內塊元素水平居中，給其父元素新增 text-align: center 即可 相鄰塊元素垂直外邊距的合併 當上下相鄰的兩個塊元素(兄弟關係)相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top，則他們之間的垂直間距不是 margin- bottom與 margIn-top之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合併 巢狀塊元素垂直外邊距的塌陷 對於兩個巢狀關係(父子關係)的塊元素，父元素有上邊距同時子元素也有上邊距，此時父元素會塌陷較大的外邊距值 解決方案： 1.可以為父元素定義上邊框 2.可以為父元素定義上內邊距 3.可以為父元素新增 overflow: hidden 清除內外邊距 網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致。因此我們在佈局前，首先要清除下網頁元素的內外邊距 padding: 0; /* 清除內邊距 */ margin: 0; /* 清除外邊距 */ 注意：行內元素為了照顧相容性，儘量只設置左右內外邊距，不要設定上下內外邊距。但是轉換為塊級和行內塊元素就可以了 圓角 語法：border-radius: length; 引數值可以為數值或百分比的形式 如果是正方形，想要設定為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為50% 如果是個矩形設定為高度的一半就可以 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角 一個值： 四個圓角值相同 border-top-left-radius // 定義了左上角的弧度 border-top-right-radius // 定義了右上角的弧度 border-bottom-right-radius // 定義了右下角的弧度 border-bottom-left-radius // 定義了左下角的弧度 盒子陰影 預設的是外陰影(outset)，但是不可以寫這個單詞，否則導致陰影無效 盒子陰影不佔用空間，不會影響其他盒子排列 語法：box-shadow: h-shadow v-shadow blur spread color inset; h-shadow // 必需。水平陰影的位置，允許負值 v-shadow // 必需。垂直陰影的位置，允許負值 blur // 可選。模糊距離 spread // 可選。陰影的尺寸 color // 可選。陰影的顏色 inset // 可選。將外部陰影（outset）改為內部陰影 文字陰影 語法：text-shadow: h-shadow v-shadow blur color; h-shadow // 必需。水平陰影的位置，允許負值 v-shadow // 必需。垂直陰影的位置，允許負值 blur // 可選。模糊距離 color // 可選。陰影的顏色 三種佈局方式 多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動 標準流 垂直的塊級盒子（上下排列）顯示就用標準流佈局 浮動 浮動的盒子不再保留原先的位置(即脫標) 浮動的元素是互相貼靠在一起的，如果父級元素寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊 任何元素都可以浮動。不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性 一個元素浮動了，理論上其餘的兄弟元素也要浮動 浮動的盒子只會影響浮動盒子後面的標準流不會影響前面的標準流 浮動的盒子不會有外邊距合併的問題 浮動元素只會壓住它下面的標準流盒子，但是不會壓住下面標準流盒子裡面的文字（圖片），因為浮動產生的目的最初是為了做文字環繞效果的，文字會圍繞浮動元素 語法：選擇器 { float: 屬性值; } float: none; // 元素不浮動（預設） float: left; // 元素左浮動 float: right; // 元素右浮動 清除浮動 清除浮動本質 父元素沒有高度或者是根據子元素去撐大父元素 影響佈局，清除浮動元素脫離標準流造成的影響 清除浮動策略是 閉合浮動，只讓浮動在父盒子內部影響，不影響父盒子外面的其他盒子 清除浮動-額外標籤法 額外標籤法也稱為隔牆法 額外標籤法會在浮動元素末尾新增一個空的標籤。例如<div style=" clear:both"></div>，或者其他標籤(如<br/>等) 優點：通俗易懂,書寫方便 缺點：新增許多無意義的標籤，結構化較差 注意：要求這個新的空標籤必須是塊級元素 語法：選擇器 { clear: 屬性值; } clear: left; // 不允許左側有浮動元素（清除左側浮動的影響） clear: right; // 不允許右側有浮動元素（清除右側浮動的影響） clear: none; // 同時清除左右兩側浮動的影響 實際工作中，幾乎只用 clear: both; 清除浮動-父級新增overflow 給父級新增overflow屬性，將其屬性值設定為hidden、auto或scroll 清除浮動- :after 偽元素法 是額外標籤法的升級版，也是給父元素新增，給父元素新增clearfix即可

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、7專有，相容低版本 */
    *zoom: 1;
}

清除浮動-雙偽元素 也是給父元素新增，給父元素新增clearfix即可

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix {
    clear: both;
}
.clearfix {
    /* IE6、7專有，相容低版本 */
    *zoom: 1;
}

定位 定位 = 定位模式 + 邊偏移 可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子 語法：選擇器 { position: 屬性值; } position: static; // 靜態定位 position: relative; // 相對定位 position: absolute; // 絕對定位 position: fixed; // 固定定位 position: sticky; // 粘性定位 邊偏移 top // 頂部偏移量 bottom // 底部偏移量 left // 左側偏移量 right // 右側偏移量 定位特殊性 絕對定位和固定定位也和浮動類似 1.行內元素新增絕對或者固定定位，可以直接設定高度和完度 2.塊級元素新增絕對或者固定定位，如果不給寬度或者高度，預設大小是內容的大小 3.脫標的盒子不會觸發外邊距塌陷 4.浮動元素、絕對定位、固定定位元素都不會觸發外邊距合併的問題 定位-相對定位relative 1.它是相對於自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置) 2.原來在標準流的位置繼續佔有，後面的盒子仍然以標準流的方式對待它。(不脫標,繼續保留原來位置) 例：選擇器 { position: relative; top: 100px; } 定位-絕對定位absolute 1.如果沒有祖先元素，或者祖先元素沒有定位，則以瀏覽器為準定位(Document文件) 2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置 3.絕對定位不再佔用原先的位置（脫標） 絕對定位的盒子居中 加了絕對定位的盒子不能通過 margin: 0 auto 水平居中，但是可以通過以下計算方法實現水平和垂直居中 1. left:50% 讓盒子的左側移動到父級元素的水平中心位置 2. margin-left: 讓盒子向左移動自身寬度的一半 子絕父相 子級是絕對定位的話，父級要用相對定位 1.子級絕對定位，不會佔有位置，可以放到父盒子裡面的任何一個地方，不會影響其他的兄弟盒子 2.父盒子需要加定位限制子盒子在父盒子內顯示 3.父盒子佈局時，需要佔有位置，因此父親只能是相對定位 總結：因為父級需要佔有位置，因此是相對定位，子盒子不需要佔有位置，則是絕對定位 定位-固定定位fixed 1.以瀏覽器的可視視窗為參照點移動元素 跟父元素沒有任何關係 不隨滾動條滾動 2.固定定位不在佔有原先的位置（脫標） 固定定位小技巧-固定在版心右側位置 1.讓固定定位的盒子 left: 50% 走到瀏覽器可視區(也可以看做版心)的一半位置 2.讓固定定位的盒子 margin-left: 版心寬度的一半距離。多走版心寬度的一半位置 就可以讓固定定位的盒子貼著版心右側對齊了 定位-粘性定位sticky 語法：選擇器 { position: sticky; top: 10px; } 1.以瀏覽器的可視視窗為參照點移動元素(固定定位特點) 2.粘性定位佔有原先的位置(相對定位特點) 3.必須新增top、left、right、bottom其中一個才有效 跟頁面滾動搭配使用。相容性較差，IE不支援 絕對定位和固定定位，會壓住下面標準流所有的內容 定位疊放次序 z-index 在使用定位佈局時，可能會出現盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前後次序(z軸) 語法：選擇器 { z-index: 1; } 數值可以是正整數、負整數或0，預設是auto，數值越大，盒子越靠上 如果屬性值相同，則按照書寫順序，後來居上 數字後面不能加單位 只有定位的盒子才有z-index屬性 元素的顯示與隱藏 display display: none; # 隱藏物件，隱藏後不再佔用原來的位置 display: block; # 除了轉換為塊級元素之外，還有顯示元素的意思 visibility visibility: visible; # 元素可見， visibility: hidden; # 元素隱藏，繼續佔有原來的位置 overflow 該屬性指定了如果內容溢位一個元素的框時，怎麼處理 overflow: visible; // 不剪下內容也不新增滾動條 overflow: hidden; // 不顯示超過物件尺寸的內容，超出的部分隱藏掉 overflow: scroll; // 不管是否超出內容，總是顯示滾動條 overflow: auto; // 超長自動顯示滾動條，不超出不顯示滾動條

本文來自部落格園，作者：番薯吃地瓜，轉載請註明原文連結：https://www.cnblogs.com/sweet-potatos/p/15214758.html