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元素的文本和背景颜色: