（二）表格、盒模型、边框、轮廓、边距
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;