css day4

css 盒模型
（一）盒模型包括
1.Margin(外边距) - 清除边框外的区域，外边距是透明的。
2.Border(边框) - 围绕在内边距和内容外的边框。
3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4.Content(内容) - 盒子的内容，显示文本和图像。
（二）元素总宽度计算
元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

（一）css 表格
1.<tr> 元素定义表格中的行。 同一行可同时出现<td> 和<th> 元素。
2.<td> 元素 定义了一个包含数据的表格单元格
3.<th> 元素定义表格内的表头单元格
{tip：tr包住td 和 th}
4表格边框
指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：
例：table, th, td
{
    border: 1px solid black;
}
5.折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

实例
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}
6.表格宽度和高度
Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

实例
table 
{
    width:100%;
}
th
{
    height:50px;
}
7.表格文字对齐
表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

实例
td
{
    text-align:right;
}
8.表格文字对齐
表格中的文本对齐和垂直对齐属性。

a.text-align属性设置水平对齐方式，向左（left），右（right），或中心（center）

实例
td
{
    text-align:right;
}

b.垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

实例
td
{
    height:50px;
    vertical-align:bottom;//底部
}
9.表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：

实例
td
{
    padding:15px;
}
9.
表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：

实例
td
{
    padding:15px;
}
10.表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：