（二）表格、盒模型、邊框、輪廓、邊距
CSS表格
1.給th、td設置黑色邊框
<style>
table,th,td
{
border:1px solid black;
}
2.使用border-collaose
table { border-collapse: collapse;}
table, td, th { border: 1px solid black;}
3.設置表格的寬度和高度
table,td,th
{border:1px solid black;}
table{width:100%;}
th{height:50px;}
4.表格中的水平文本對齊
table,td,th
{border:1px solid black;}
td{text-align:right;}
5、表格中的垂直文本對齊
table, td, th
{border:1px solid black;}
td
{height:50px;vertical-align:bottom;}
6.表格邊框的顏色
table, td, th
{border:1px solid green;}
th,td
{background-color:green;color:white;}
7.設置表格標題的位置
caption {caption-side:bottom;}
一個表格的例子
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbk?p</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>K?niglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
CSS盒子模型
下圖充分解釋了一個盒子模型
當指定元素的總寬度為250像素時
在設置padding、margin、border是要注意范圍
div
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
跨瀏覽器解決方法
在<html>上面添加這一行代碼，將可以在任何瀏覽器上顯示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS邊框
設置四個邊框的寬度
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
設置不同方向邊框的寬度
上邊框border-top-width:15px;
下邊框：border-bottom-width:15px;
左邊框：border-left-width:15px;
右邊框：border-right-width:15px;
設置四個邊框的樣式
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
設置不同方向邊框的樣式
上邊框樣式：border-top-style:solid;
下邊框樣式：border-bottom-style:solid;
左邊框樣式：border-left-style:solid;
右邊框樣式：border-right-style:solid;
設置四個邊框的顏色
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
設置不同方向邊框的顏色
上邊框：border-top-color:#ff0000;
下邊框：border-bottom-color:#ff0000;
左邊框：border-left-color:#ff0000;
右邊框：border-right-color:#ff0000;
在一個聲明中的所有邊框屬性
四個邊框：p {border:5px solid red;}
上邊框：border-top:thick double #ff0000;
下邊框：border-bottom:thick dotted #ff0000;
左邊框：border-left:thick double #ff0000;
右邊框：border-right:thick double #ff0000;
CSS輪廓
圍繞一個元素繪制一條輪廓線
p {border:1px solid red;outline:green dotted thick;}
設置輪廓的樣式
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
設置輪廓其他屬性
顏色：outline-color:#00ff00;
寬度：outline-width:thin;
CSS邊距
指定一個元素的邊距
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
邊距縮寫屬性
margin:100px 50px;