css3-6 表格如何设置样式和定位样式是什么

一、总结

一句话总结：css可以解决所有属性设置的样式。

1、表格如何设置样式？

css样式可以解决一切问题，没必要在表格上面加属性来设置样式。

 7         table{
 8             width:1000px;
 9             border:2px solid #00f;
10             border-collapse:collapse;
11         }
12 
13         td,th{
14             text-align:center;
15             border:2px solid #00f;
16         }

2、绝对定位和相对定位异同？

1.相同点
1)脱离文档流，都在文档流的上方

2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位

3、布局实现中父子相对定位和绝对定位的关系是什么？

父相对，子绝对，这样子就相对于父亲来偏移了，不然就是相对窗口左上角

17             position: relative;
18         }
19 
20         .bk{
21             position: absolute;
22             left:10px;
23             top:100px;
24         }

二、表格如何设置样式和定位样式是什么

1、相关知识

表格:
border-collapse
border-spacing

定位:
1.position:absolute;
2.position:relative;

绝对定位和相对定位:
1.相同点
1)脱离文档流，都在文档流的上方

2.不同点
1)绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2)绝对不占位，相对占位

2、代码

table表格样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         table{
 8             width:1000px;
 9             border:2px solid #00f;
10             border-collapse:collapse;
11         }
12 
13         td,th{
14             text-align:center;
15             border:2px solid #00f;
16         }
17     </style>
18 </head>
19 <body>
20     <table>
21         <tr>
22             <th>编号</th>
23             <th>用户名</th>
24             <th>密码</th>
25         </tr>
26         <tr>
27             <td>1</td>
28             <td>小帅</td>
29             <td>200111</td>
30         </tr>
31         <tr>
32             <td>1</td>
33             <td>小帅</td>
34             <td>200111</td>
35         </tr>
36         <tr>
37             <td>1</td>
38             <td>小帅</td>
39             <td>200111</td>
40         </tr>
41         <tr>
42             <td>1</td>
43             <td>小帅</td>
44             <td>200111</td>
45         </tr>
46         <tr>
47             <td>1</td>
48             <td>小帅</td>
49             <td>200111</td>
50         </tr>
51         <tr>
52             <td>1</td>
53             <td>小帅</td>
54             <td>200111</td>
55         </tr>
56         <tr>
57             <td>1</td>
58             <td>小帅</td>
59             <td>200111</td>
60         </tr>
61         <tr>
62             <td>1</td>
63             <td>小帅</td>
64             <td>200111</td>
65         </tr>
66         <tr>
67             <td>1</td>
68             <td>小帅</td>
69             <td>200111</td>
70         </tr>
71         <tr>
72             <td>1</td>
73             <td>小帅</td>
74             <td>200111</td>
75         </tr>
76         <tr>
77             <td>1</td>
78             <td>小帅</td>
79             <td>200111</td>
80         </tr>
81     </table>    
82 </body>
83 </html>

父定位子绝对，子的坐标系是父的左上角

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             margin:0px;
 9         }
10         
11         .qp{
12             width:700px;
13             height:400px;
14             background: #faf;
15             margin:0 auto;
16             margin-top:20px;
17             position: relative;
18         }
19 
20         .bk{
21             position: absolute;
22             left:10px;
23             top:100px;
24         }
25     </style>
26 </head>
27 <body>
28     <div class='qp'>
29         <img src="bk.png" class="bk">    
30     </div>
31 </body>
32 </html>