html基本樣式及表格
1.類選擇器(.clase) 通過給標籤元素起一個classname類名的方式 在編寫樣式時 用類名來獲取該元素
2.id選擇器(#id) 給元素期一個id名 用來獲取該元素設定樣式的時候使用 一個元素 可以同時有id名和類名
3.標籤選擇器 可以獲取當前html檔案中所以的標籤用來修改樣式
4.div邊框(border)
div 有預設的邊框 3px
邊框樣式 dashed 虛線 solid 實線 dotted 圓點虛線
設定div邊框:
border-color: yellow;border-width: 10px;border-style: dotted;
或者 border: 20px yellow solid;(與順序無關)
5.div外邊距(margin)
設定居中 margin-left: auto;margin-right: auto;(margin:0 auto;)
設定外邊距方法 按 上 右 下 左 順序去編寫 margin: 10px 20px 30px 40px;
body有個預設margin值 為8px
兄弟div只要設定一個div的bottom下外邊距就可以。因為兩個兄弟的下外邊距和上外邊距取大值去佈局,誰大聽誰的
父子div 設定子div的margin-top時會把父級div扯下來,設定時會去尋找父標籤的border,解決方法 :設定父標籤的border
(border: 1px transparent solid;其中transparen為設定邊框透明屬性)
6.div內邊距(padding)
表格邊框距離內容的距離為內邊距 內邊距是真實存在的距離會改變盒子的大小但不影響佈局效果
div寬度=內容的寬度+內邊距的寬度+邊框的寬度
div高度=內容的高度+內邊距的高度+邊框的高度
7.表格(table)
完整的表格由表的標題 表頭 表內容 表尾構成的 完整表格的好處:標籤寫全可以讓瀏覽器跟好的載入 提高效率
當表格寬(高)度不夠內容的寬(高)度的時,內容將撐起表格的寬(高)度,如果表格的寬(高)度足夠顯示內容時,表格的寬(高)度就是你設定的寬(高)度
表格巢狀標籤是 巢狀在td標籤上
tr 代表行
th 代表表頭的列 預設是加粗居中的效果
td 代表表格的一行中的一個元素
thead 代表表頭
tbody 為表內容
tfoot 為表尾
caption 標題cellpadding 單元格的內邊距
cellspacing 單元格間的距離
rules 顯示內邊框的分隔線(rows 顯示行 cols 顯示列 all 都顯示)
rowspan 合併行
colspan 合併列