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>