table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角；*/绝对定位和相对定位的相同点:脱离文档流，都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角(2)绝对不占位，相对占位;最后/*z-index定位层级高度，只能配合position属性*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11种常用css样式之表格和定位样式学习</title>
<style type="text/css">
table{
width: 1000px;
border: 1px inset skyblue;
border-collapse: collapse;/*表格边框是否合并*/
border-spacing: 10px;/*表格边框之间的距离*/
}
th,td{
text-align: center;
border: 1px inset skyblue;
}
.box2{
position: relative;
margin: 0 auto;
background-color: #ccc;
width: 600px;
height:200px;
}
/* 父定位子绝对，子的坐标系是父的左上角 */
/* 父集不定位，坐标系是浏览器窗口的左上角 */
.box2 img{
position:absolute;
left: 100px;
top: 50px;
}
.box2 img:nth-child(1){
z-index: 1;/*z-index定位层级高度，只能配合position属性*/
}
.box2 img:nth-child(2){
z-index: 2;
}
</style>
</head>
<body>
<!-- table表格 -->
<table>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!-- position定位 -->
<div class="box1">
あなたのストレスは：自分を鍛えることができないが、一生懸命働くふりをする；現状があなたの内なる欲望に追いつくことができない；それであなたは不安でパニックになる
</div>
<div class="box2">
<img src="data:images/bk.png" alt="">
<img src="data:images/wq.png" alt="">
</div>
<div class="box3">
Your stress comes from: unable to discipline yourself, but pretending to work hard;
</div>
</body>
</html>