半年前端，鞏固css知識，有遺忘的同學可以進來看看啦

背景屬性（包括顏色，圖片，圖片是否重複（預設重複），圖片是否固定不滾動，圖片起始位置），簡寫屬性也是按這個順序

文字屬性（基本可繼承）

• 文字顏色：三種寫法（十六進位制、RGB、顏色單詞）【可繼承】
• 兩種字間距：letter-spacing和word-spacing，都對英文單詞間距有影響，都允許負值，但是word-spacing對中文沒影響，注意的是letter-spacing是對單詞內的每個字母產生間距，而word-spacing是單詞之間產生間距【可繼承】
• 兩種對齊方式：text-align和vertical-align。text-align是控制水平方向的對齊方式（left左對齊，right右對齊，center居中對齊，justify兩端對齊）【可繼承】。vertical-align是控制垂直方向的對齊方式（主要是top、text-top、bottom、text-bottom、middle以及百分比，注意的是text-是對齊文字最低端，一般是需要對齊英文字母最低端）【不可繼承】
• line-height：行高的標準定義是兩行文字基線之間的距離，也就是小時候英文字子四條線中第三條線的位置。行高也可以簡單理解為一行的高度，（設定文字居中的時候可以不用設定height的值，直接設定行高，就可以自動撐開距離，形成居中的樣式），行高的值可以是數字，百分比，px【可繼承】
• text-decoration：控制是否加下劃線，以及下劃線的位置【不可繼承】
• text-indent：控制文欄位落縮排，縮排兩格是20px【可繼承】
• text-transform：控制文字全部小寫、大寫或者首字母大寫【可繼承】
• text-shadow：設定文字陰影（水平陰影位置、垂直陰影位置、模糊距離、陰影顏色），只有前兩個值是必須的，後面可選【可繼承】
• text-overflow：控制文字溢位時的樣式（clip修剪，ellipsis顯示省略號，使用給定字串代替被裁剪的文字）
• fong-size使用px不能根據視窗大小改變字型大小，目前的解決辦法是設定body font-size:100%，元素字型使用em，em是由W3C建議的1em的預設大小是16px

列表

• 有序列表ol，無序列表ul

• 列表樣式list-type屬性簡寫（list-type:list-style-type list-style-position list-style-image）

• 如果是要使用list-style-image，考慮到瀏覽器相容的問題，不能使用傳統的列表樣式寫法，需要自己模擬，程式碼段如下：

  ul
  {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
  }
  ul li
  {
      background-image: url(sqpurple.gif);
      background-repeat: no-repeat;
      background-position: 0px 5px; 
      padding-left: 14px; 
  }
  複製程式碼

表格

• 原生態表格值得注意的幾個點就是： (1).在table標籤裡面新增border="1"表格就會顯示邊框，但是td之間有間距 (2).因為td之間有間距，所以需要設定border-collapse:collapse將表格的邊框摺疊成一個單一的邊框

盒子模型

• 包括內外邊距，內容和邊框
• 在W3C中元素的寬度：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
• 元素的高度是總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
• 注意：IE5和6計算的方式不是這樣，是內容、內邊距和邊框的總和

display（設定顯示成塊元素還是內聯元素，顯示與否）

• 隱藏元素（display:none，visibility:hidden）差別在於隱藏之後是否還佔空間，display:none不佔空間
• 塊元素和內聯元素：塊級元素可以通過display:inline顯示為內聯元素，內聯元素可以通過display:block顯示為塊級元素，但是裡面不能巢狀塊級元素。
• 內聯元素只需要必要的寬度，因此設定固定的寬度沒什麼用
• 當設定元素 visibility: collapse 後，一般的元素的表現與 visibility: hidden 一樣，也即其會佔用空間。但如果該元素是與 table 相關的元素，例如 table row、table column、table column group、table column group 等，其表現卻跟 display: none 一樣，也即其佔用的空間會釋放。（火狐谷歌均有用，IE10有用，其他版本未測試）

定位（五種定位）

• static：預設定位，即沒有定位，元素處在文件流中
• relative：相對其原本的位置進行定位，使用到top、bottom、left、right
• absolute：絕對定位，通常相對其最近使用定位的父元素（relative的父元素？？？），同樣使用到top、bottom、left、right
• fixed：相對瀏覽器視窗定位，滾動條滾動，他的位置也不會變，同樣使用到這四個屬性
• sticky：粘性定位，處在相對定位和fixed定位之間，當內容過多，出現滾動條時，未將該元素滾出視窗時時是相對定位，而一旦滾出變成fixe定位
• z-index：z-index需要結合定位使用，z-index的值越大排在越前面，預設值是0

滑鼠改變游標

• 常用的幾種是pointer、crosshair、move、help

浮動

• 使用float定位後，周圍的元素會改變佈局，圍繞在該元素周圍
• 清除浮動（clear:both）：清除浮動後，該元素兩側不能出現浮動元素

對齊方式

• 給元素設定寬度之後，可以使用margin:auto是元素居中

• 如果子元素的高度比父元素高，同時子元素設定了浮動，這時子元素將會溢位父元素，會影響佈局，這時需要設定父元素overflow:auto，將子元素包含在父元素內

• 元素居中，如果確定是單行文字，則不給元素設定高度，直接設定合適的padding；或者直接設定合適的line-height；同樣也是不設定高度

• 值得注意的一點是使用line-height，不設定高度，那麼元素的高度會隨著幾行的文字之間的line-height撐大height，會影響佈局，所以適當使用line-height

• 如果真的要使用line-height設定居中，同時元素內會有多行文字，那麼需要加上這段程式碼

  .center p {
      line-height: 1.5;
      display: inline-block;
      vertical-align: middle;
      /*center是div的類選擇器*/
  }
  複製程式碼

• 還有一種使用絕對定位的方式居中，比較少用到，同時考慮到多行溢位問題

css組合選擇符【重點】

• 後代選擇器（以空格分隔），選擇的是後代全部的該元素
• 子元素選擇器（以大於號分隔），選擇的是直接子元素
• 相鄰兄弟選擇器（以加號分隔），選擇的是相鄰的第一個該元素
• 普通兄弟選擇器（以破折號分隔），

偽類（以例子為主）

• first-child偽類：p:first-child指的是所有父元素的第一個p元素
• p > i:first-child：匹配所有

  元素中的第一個 元素

• p:first-child i：匹配所有作為第一個子元素的

  元素中的所有 元素

• 其他偽類可參見：www.runoob.com/css/css-pse…