標籤重置 CSS Reset--學習筆記

Questions:

  • 爲什麼要重置標籤?
  1. 爲了增強頁面的兼容性,讓更多的瀏覽器顯示的效果一致;
  2. 因爲不同的瀏覽器都有一套內置的CSS樣式表,目的是爲了正常顯示不具有樣式表的頁面;
  3. 提高我們製作的頁面兼容瀏覽器的性能。
  • 最普通的CSS Reset

              *{margin: 0; padding: 0;}

  • 最常用的CSS Reset

              body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}
              table {border-collapse: collapse; border-spacing: 0;}
              img {border: 0;}
              ol,ul{list-style: none;}
              h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;}

  • 在H1標籤的重置代碼中,“font-size:100%;”起到的作用是什麼?
  • 知識點補充:
  1.  CSS Table屬性
    屬性 描述
    border-collapse 設置是否把表格合併爲單一的邊框。
    border-spacing 設置分割單元框邊框的距離。
    指定的兩個長度中,第一個是水平間隔,第二個是垂直間隔。除非collapse被設置爲separate,否則將忽略這個屬性。
    值:length length   水平間隔  垂直間隔
            inherit 規定應該從父元素border-spacing屬性
    caption-side 設置表格標題的位置。
    empty-cells 設置是否顯示錶格中的空單元格。
    table-layout 設置顯示單元、行和列的算法。
    • automatic 自動錶格佈局,默認。列寬度由單元格內容設定。列的寬度由列單元格中沒有折行的最寬的內容設定的。此蘇散發有時會慢,這是由於它需要確定最終的佈局之前訪問表格中所有的內容。
    • fixed 固定表格佈局。列寬由表格寬度和列寬度設定。允許瀏覽器更快的對錶格進行佈局。水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距,而與單元格的內容無關。
    • inherit 規定應該從父元素繼承table-layout屬性的值。
  2. border-collapse屬性設置表格的邊框是否被合併爲一個單一的邊框,還是像在標準的HTML中那樣分開顯示。   

描述
separate 默認值。邊框會被分開。不會忽略border-spacing和empty-cells屬性。
collapse 如果可能,邊框會合併爲一個單一的邊框。會忽略border-spacing和empty-cells屬性。
inherit 規定應該從父元素繼承border-collapse屬性的值。
        3.標準表格事例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

   <style>

   table{

    caption-side: bottom;

   }

   </style>

</head>
<body>
    <table width="500" border="1" bordercolor="#FF0000" cellspacing="0" cellpadding="0">
        <tbody>
            <caption>這是一個表格</caption>
            <tr>
                <th>1</th>
                <th>1</th>

            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
            </tr>
        </tbody>
        
    </table>
</body>
</html>

     

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章