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>