選擇器

class(類選擇器)和id(選擇器)

class:類選擇器，類名自己指定，多個元素可擁有同一個類名，類選擇器是以英文句號（.）開頭的

id:選擇器，設置元素的id屬性為該元素的定制id,每個id在文檔中必須唯一，ID選擇器是以#開頭的

舉例:
p標簽同時具有class屬性和id屬性

<p class="key" id-="principal">
id 屬性值 principal必須在文檔中是唯一的；
但文檔中的其他標簽可以有和p相同的 class 屬性值key.

在css樣式表中，下面的規則使所有屬性class=key的元素文字為綠色

.key{
color:green;
}

下面的規則使id = principal的文字變為粗體

#principal {
  font-weight: bolder;
}

css規定具有更高確定度的選擇器優先級更高。
確定度：id選擇器>類選擇器>tag selector(標簽選擇器)
如果樣式中包含沖突的規則，且它們具有相同的確定度。那么，后出現的規則優先級高

偽類選擇器

CSS偽類pseudo-class加在選擇器后面的用來指定元素狀態的關鍵字

• :hover
  ：鼠標懸停在選中元素上時應用樣式
• :visited
  ：是否訪問過

基于關系的選擇

語法技巧

注釋以/* */結束
選取器組，可以過個選取器使用同一個樣式
如：

h1,h2,h3 {color:navy;}

瀏覽器支持的所有顏色

內容

CSS可以在元素的前后插入文本：在選擇器的后面加上::before
或者 ::after
，在聲明中，指定 content
屬性，并設置文本內容。
舉例：
在所有雷鳴包含ref的元素前面加上Reference:

.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";

盒模型

即元素，內邊距，邊框，外邊距

border：邊框

樣式包括

• solid
• dotted
• dashed
• double
• inset
• outset
• ridge
• groove

文本布局：
text-align:內容對其。left，right，center，justify

position
屬性:

• relative
  通過為元素指定一個值，元素相對于其原來位置移動。也可以使用margin來達到同樣的效果。

• fixed
  為元素指定相對于窗口的確切位置 。即使文檔的其它元素出現滾動，元素位置仍然不變。

• absolute
  為元素指定相對于其父元素的確切位置。只有在父元素使用 relative, fixed or absolute 時才有效。你可以為任何父元素指定 position: relative;因為它不會產生移動。

• static
  默認值。當明確要關閉位置屬性時使用。

和 position 屬性(除了 static)一起使用的, 有下列屬性: top, right, bottom, left, width, height 通過設置它們來指定元素的位置或大小。

舉例：
比如，我們想要兩個元素疊加，具有層級關系，css沒有z軸的概念，但是我們可以設置一個父容器postion:releative,然后兩個子容器都為position:absolute，這樣兩個子容器都會存在相對于父容器的指定位置，比如magin:0px,top:0px,left:0px后者覆蓋前者。

display屬性

block：塊級元素

div是一個標準的塊級元素。一個塊級元素會新開始一行并且盡可能撐滿容器。其他常用的塊級元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
inline：行內元素
span 是一個標準的行內元素。一個行內元素可以在段落中 <span> 像這樣 </span> 包裹一些文字而不會打亂段落的布局。 a 元素是最常用的行內元素，它可以被用作鏈接。

none:不刪除元素的情況下影藏或顯示元素

舉例：

#main {
  width: 600px;
  margin: 0 auto; 
}
/**
<div id="main">
設置塊級元素width,防止撐滿容器，然后外邊距auto，可以讓其居中顯示，然后剩余的寬度會一分為二成為左右外邊距。
有時候用max-width替代width在移動設備更好
**/

box-sizing

當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。

float屬性可實現文字環繞圖片

img {
  float: right;
  margin: 0 0 1em 1em;
}

flexbox

在css中要使用flexbox的元素，需要指定

display : flex

或者

display : inline-flex

方向(Direction)：
flex-flow是flex-direction和flex-wrap屬性的縮寫，決定彈性項目如何排布
行(Line)：
根據flex-wrap,彈性項目可以排布在多行或者單行
尺寸(Dimension):
min-height與 min-width 屬性初始值將為 0。
flex
屬性是 flex-grow
、flex-shrink
和 flex-basis
屬性的簡寫，描述彈性項目的整體的伸縮性。