每天一句：99分和100分的區(qū)別是在于，滿分只有100分。

一、元素類型

根據(jù)CSS現(xiàn)實(shí)分類，XHTML可以分為: 塊狀元素、行內(nèi)元素、行內(nèi)塊元素、可變?cè)?

二、塊元素block

  > 塊狀元素在網(wǎng)頁(yè)中就是以塊的形式顯示，所謂塊狀就是元素顯示為矩形區(qū)域;
  > 常用元素有div/dl/dt/dd/ol/ul/fieldset/h1~h6/form/hr/colgroup/col/table/tr/td....;
  > 默認(rèn)情況下，塊狀元素都會(huì)占據(jù)一行;
  > 塊狀元素都可以定義自己本身的寬度和高度;
  > 塊狀元素一般為其他元素的容器，可以容納其他元素，也是比喻為盒子;

三、行內(nèi)元素inline(內(nèi)聯(lián)元素)

  > 常見(jiàn)的內(nèi)聯(lián)元素a/span/i/em/strong/b/del...;
  > 內(nèi)聯(lián)元素的邊線形式是始終以行內(nèi)逐個(gè)進(jìn)行顯示;
  > 內(nèi)聯(lián)元素沒(méi)有自己的形狀，不能定義寬度和高度，只能根據(jù)內(nèi)容的高度和寬度來(lái)確定，它的最小內(nèi)容單元也會(huì)呈現(xiàn)矩形形狀;
  > 內(nèi)聯(lián)元素也會(huì)遵守盒模型基本規(guī)則，如可以定義padding/border/margin/background等屬性，但個(gè)別屬性不能正常顯示;(padding-left/padding-right可以使用);

四、行內(nèi)塊元素inline-block(內(nèi)聯(lián)塊元素)

  > 常見(jiàn)元素img/input；
  > 行內(nèi)塊元素，是行內(nèi)逐個(gè)顯示；
  > 行內(nèi)塊元素，還可以設(shè)置寬度和高度；

五、元素類型轉(zhuǎn)換

 > display: block; 塊狀元素: 類似在元素后面添加換行符，也就是說(shuō)其他元素不能再其后面并列顯示;
 > display: inline; 內(nèi)聯(lián)元素: 在元素后面刪除換行符，多個(gè)元素可以在一行內(nèi)并列顯示;
 > display: inline-block; 內(nèi)聯(lián)塊元素: 元素的內(nèi)容以塊狀顯示，行內(nèi)的其他元素顯示在同一行；
 > display: none; 此元素不會(huì)被顯示;

備注: 
  > 當(dāng)元素設(shè)置float屬性后，就相當(dāng)于給該元素加了display: block;屬性;

六、水平居中設(shè)置技巧

• 內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素都是可以通過(guò)text-align設(shè)置改變水平對(duì)齊方式的，但是塊元素不起效果;
• 塊元素如果要設(shè)置為居中，必須得用margin: 0 auto;

七、垂直居中設(shè)置技巧

  原理: 讓span標(biāo)簽作為a標(biāo)簽居中的基線參考(inline-block支持text-align和vertical-align屬性)
    0、a和span設(shè)置為內(nèi)聯(lián)塊元素(vertical-align才有效)
    1、a標(biāo)簽垂直居中vertical-align: middle;
    2、span標(biāo)簽垂直居中vertical-align: middle;
    3、span標(biāo)簽高度與父元素一致height: 100%;
    4、span只是參考，不需要顯示width: 0;

八、邊框設(shè)置技巧(九宮格)

九宮格效果

<style>
  *{
      margin: 0;
      padding: 0;
   }
  ul{
      width: 204px;
      height: 200px;
      margin: 30px auto;
      /*border: 1px solid gray;*/
   }
  li{
      width: 50px;
      height: 50px;
      border: 1px solid gray;
      float: left;
      list-style: none;
      /* 邊框設(shè)置技巧*/
      margin: -1px 0 0 -1px;
   }
</style>


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>