table表格中border-collapse: collapse;/*表格邊框是否合併*/border-spacing: 10px;/*表格邊框之間的距離*/定位詳情可以閱讀position屬性值4缺一帶你瞭解相對還是絕對抑或是固定定位，實現div絕對居中法/*父定位子絕對，子的坐標系是父的左上角... ...
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>
