Questions:
- 爲什麼要重置標籤?
- 爲了增強頁面的兼容性,讓更多的瀏覽器顯示的效果一致;
- 因爲不同的瀏覽器都有一套內置的CSS樣式表,目的是爲了正常顯示不具有樣式表的頁面;
- 提高我們製作的頁面兼容瀏覽器的性能。
- 最普通的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%;”起到的作用是什麼?
- 知識點補充:
- CSS Table屬性
屬性 描述 border-collapse 設置是否把表格合併爲單一的邊框。 border-spacing 設置分割單元框邊框的距離。
指定的兩個長度中,第一個是水平間隔,第二個是垂直間隔。除非collapse被設置爲separate,否則將忽略這個屬性。
值:length length 水平間隔 垂直間隔
inherit 規定應該從父元素border-spacing屬性caption-side 設置表格標題的位置。 empty-cells 設置是否顯示錶格中的空單元格。 table-layout 設置顯示單元、行和列的算法。 - automatic 自動錶格佈局,默認。列寬度由單元格內容設定。列的寬度由列單元格中沒有折行的最寬的內容設定的。此蘇散發有時會慢,這是由於它需要確定最終的佈局之前訪問表格中所有的內容。
- fixed 固定表格佈局。列寬由表格寬度和列寬度設定。允許瀏覽器更快的對錶格進行佈局。水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距,而與單元格的內容無關。
- inherit 規定應該從父元素繼承table-layout屬性的值。
- border-collapse屬性設置表格的邊框是否被合併爲一個單一的邊框,還是像在標準的HTML中那樣分開顯示。
值 | 描述 |
separate | 默認值。邊框會被分開。不會忽略border-spacing和empty-cells屬性。 |
collapse | 如果可能,邊框會合併爲一個單一的邊框。會忽略border-spacing和empty-cells屬性。 |
inherit | 規定應該從父元素繼承border-collapse屬性的值。 |
<!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>