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

何处不忧伤 發表於 2020-2-22 20:02:00

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

table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位，实现div绝对居中法/*父定位子绝对，子的坐标系是父的左上角；*/绝对定位和相对定位的相同点:脱离文档流，都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角(2)绝对不占位，相对占位;最后/*z-index定位层级高度，只能配合position属性*
<div class="cnblogs_code">
<pre> 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 
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 
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></pre>
</div> 
来源：https://www.cnblogs.com/webaction/p/12346885.html

頁: [1]

琼殿技术论坛's Archiver

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