正文
css3-6 表格如何设置样式和定位样式是什么
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css3-6 表格如何设置样式和定位样式是什么一、总结一句话总结：css可以解决所有属性设置的样式。
1、表格如何设置样式？
一句话总结：css可以解决所有属性设置的样式。
1、表格如何设置样式？
css样式可以解决一切问题，没必要在表格上面加属性来设置样式。
7 table{
8 width:1000px;
9 border:2px solid #00f;
10 border-collapse:collapse;
11 }
12
13 td,th{
14 text-align:center;
15 border:2px solid #00f;
16 }
2、绝对定位和相对定位异同？
1.相同点
1)脱离文档流，都在文档流的上方
2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位
3、布局实现中父子相对定位和绝对定位的关系是什么？
父相对，子绝对，这样子就相对于父亲来偏移了，不然就是相对窗口左上角
17 position: relative;
18 }
19
20 .bk{
21 position: absolute;
22 left:10px;
23 top:100px;
24 }
二、表格如何设置样式和定位样式是什么1、相关知识
表格:
border-collapse
border-spacing
定位:
1.position:absolute;
2.position:relative;
绝对定位和相对定位:
1.相同点
1)脱离文档流，都在文档流的上方
2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位
2、代码
table表格样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
table{
width:1000px;
border:2px solid #00f;
border-collapse:collapse;
} td,th{
text-align:center;
border:2px solid #00f;
}
</style>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
<tr>
<td>1</td>
<td>小帅</td>
<td>200111</td>
</tr>
</table>
</body>
</html>
父定位子绝对，子的坐标系是父的左上角
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
margin:0px;
} .qp{
width:700px;
height:400px;
background: #faf;
margin:0 auto;
margin-top:20px;
position: relative;
} .bk{
position: absolute;
left:10px;
top:100px;
}
</style>
</head>
<body>
<div class='qp'>
<img src="bk.png" class="bk">
</div>
</body>
</html>
