首页 > > 网页制作 > css >

11种常用css样式之表格和定位样式学习

2020-02-22 16:00:54来源：博客园阅读 ()

11种常用css样式之表格和定位样式学习

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>