table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角；*/绝对定位和相对定位的相同点:脱离文档流，都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角(2)绝对不占位，相对占位;最后/*z-index定位层级高度，只能配合position属性*
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>11种常用css样式之表格和定位样式学习</title> 7 <style type="text/css"> 8 table{ 9 width: 1000px; 10 border: 1px inset skyblue; 11 border-collapse: collapse;/*表格边框是否合并*/ 12 border-spacing: 10px;/*表格边框之间的距离*/ 13 } 14 th,td{ 15 text-align: center; 16 border: 1px inset skyblue; 17 } 18 .box2{ 19 position: relative; 20 margin: 0 auto; 21 background-color: #ccc; 22 width: 600px; 23 height:200px; 24 } 25 /* 父定位子绝对，子的坐标系是父的左上角 */ 26 /* 父集不定位，坐标系是浏览器窗口的左上角 */ 27 .box2 img{ 28 position:absolute; 29 left: 100px; 30 top: 50px; 31 } 32 .box2 img:nth-child(1){ 33 z-index: 1;/*z-index定位层级高度，只能配合position属性*/ 34 } 35 .box2 img:nth-child(2){ 36 z-index: 2; 37 } 38 </style> 39 </head> 40 <body> 41 <!-- table表格 --> 42 <table> 43 <tr> 44 <th>编号</th> 45 <th>用户名</th> 46 <th>密码</th> 47 </tr> 48 <tr> 49 <td>1</td> 50 <td>2</td> 51 <td>3</td> 52 </tr> 53 <tr> 54 <td>1</td> 55 <td>2</td> 56 <td>3</td> 57 </tr> 58 </table> 59 <!-- position定位 --> 60 <div class="box1"> 61 あなたのストレスは：自分を鍛えることができないが、一生懸命働くふりをする；現状があなたの内なる欲望に追いつくことができない；それであなたは不安でパニックになる 62 </div> 63 <div class="box2"> 64 <img src="images/bk.png" alt=""> 65 <img src="images/wq.png" alt=""> 66 </div> 67 <div class="box3"> 68 Your stress comes from: unable to discipline yourself, but pretending to work hard; 69 </div> 70 </body> 71 </html>