css是層疊樣式表，它是網(wǎng)頁之皮

本文主要內(nèi)容

1. 塊級元素和行內(nèi)元素

2. 常見css屬性

• 寬高
• 邊框
• 邊距
• display
• font
• 文本
• 顏色
• 單位
• 隱藏/透明

塊級元素和行內(nèi)元素

塊級元素：block-level：

1. 可以包含其他的塊級元素和行內(nèi)元素；
2. 占據(jù)了一整行的空間；
3. 可以設置寬高屬性；
   常見的有h1~h6 div form table th tr td ul li dl dt dd p等

行內(nèi)元素：inline-level：

1. 只能包含其他的行內(nèi)元素和文本；
2. 占據(jù)了自身寬度的空間(可以和其他行內(nèi)元素并排）；
3. 設置寬高無效；
   常見的有 span strong em a img button input label

總結塊級元素和行內(nèi)元素的區(qū)別：
1.塊級元素可以包含塊級元素和行內(nèi)元素，行內(nèi)元素只能包含行內(nèi)元素和文本。

1.png

box1包含了h1,但是用span包含box2卻不行；

2.塊級元素占據(jù)一整行，行內(nèi)元素只占據(jù)自己本身。

2.png

通過背景色大家可以發(fā)現(xiàn)，塊級元素會占據(jù)整行，行內(nèi)元素只占據(jù)本身。

3.塊級元素能設置寬高，行內(nèi)元素設置寬高無效。

3.png

h1和span一樣設置了寬高，span不生效。

4.塊級元素可以設置上下左右的margin和padding；行內(nèi)元素可以設置左右的margin和padding，上下margin和padding無效。（但是可以撐開border和背景色卻不占用空間）

x.png

s.png

很顯然，上面的h1標簽的margin和padding都正常，span標簽的左右也是生效的。

常見css屬性

1. 寬高
   語法：width: xxx; height: xxx;
   注意：寬高屬性只能用于塊級元素，行內(nèi)元素設置寬高無效。

2. 邊框
   語法：border: 邊框寬度 邊框形狀 邊框顏色;
   例： border: 1px dotted red;
   例子是1px寬的 點狀的 紅色的邊框
   邊框圓角，border-radius 上右下左的順序可以單獨設置。
   注意：這是把四周的邊框都畫好，也可以單獨設置，比如border-top:xxxxxxxxx;
   border-radius如果大于這個盒模型的半徑那么畫出來的是一個圓形。

3. 邊距

   
   
   QQ20161209-0@2x.png
   
   

   一個盒子由margin（外邊距）、border（邊框）、padding（內(nèi)編?。捀撸╳idth、height）組成。

• margin／padding 可以是數(shù)字或者百分比，百分比是對照父元素。有四個方向的值。對應上右下左。padding:10px 10px 10px 10px;
• margin居中 設置左右margin是auto，就可以把該盒模型居中。
  ps: padding和margin的寫法，有四個數(shù)值-上右下左；有兩個數(shù)值-讀兩遍，順序仍然是上右下左；有三個數(shù)值-先讀上右下，左邊的沒寫就和右邊的一樣（讀第二個數(shù)值）；

4. display
   display屬性可以規(guī)定元素的類型。display: block; display: inline; 等
   display :

• 常見 block table list-item等是塊級元素
• 常見 inline inline-table inline-block等是行內(nèi)元素

5. font
   對文本字體的設置

• font-size 字體大小
• font-family 字體，最好用審查元素的console里的escape('xx')的方法得到xx的編碼寫法，用在font-family里。
• font-weight 字體粗細
• line-height 行高
  以上屬性均可繼承
  簡易寫法：font: 字體樣式 字體粗細 字體大小/行高 字體;
  例：font: italic bold 12px/30px arial;

6. 文本

• text-align: 文本的對齊方式，left/center/right/justify（雙對齊，不折行）
• text-indent 文本第一行的縮進
• text-decoration: 文本修飾；none（不修飾）；underline（下劃線）；overline（上劃線）；line-through（穿過線）
• color 文字顏色
• text-transform 改變文字的大小寫，none（不改變）；uppercase（變大寫）；lowercase（變小寫）；
• word-spacing：改變字（單詞）的間距。
• letter-spacing：改變字母之間的間距。

7. 顏色
   顏色有幾種寫法：

• 單詞
• 十六進制表示，用photoshop吸取顏色。
• rgb
• rgbo

8. 單位
   px：固定單位像素
   百分比：相對于父元素大小
   em：相對于父元素字體大小，1em就是父元素字體的100%大小。
   rem：相對于根元素字體大小

9. 隱藏/透明

• opacity opacity: 0; 此時透明度為0；整體徹底的透明。
• visibility: hidden; 和上面的類似。
• display: none; 消失，還不占地方。
• background: rgbo(0,0,0,0.2); 只是背景色透明。