2-26

来源：互联网发布：ubuntu 文件夹权限编辑：程序博客网时间：2024/05/21 09:58

1. table的border属性和border样式

两者的区别是：

(1) border属性会为外边框和内边框都加上格线，而border样式则只会为外边框加上格线，这也提供了一个小技巧，因为很多时候，为了美观起见，内部的格线是不需要的，这样设置的话，就不需要每个td都设置了。

(2) 应该养成这样一个习惯，就是在设置border样式时，应该一次性设置3个参数(如border: 1px solid red;)，否则很容易不能产生效果。

2. 如何消去fieldset边框中的黑边？

可以参考下面这个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>filedSetDemo.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><table border="0" cellpadding="0" cellspacing="0" width="730"><tr align="center"><td><fieldset align="center" style="border: 1px solid pink" mce_style="border: 1px solid pink"><legend><font style="color: red; font-weight: bold;" mce_style="color: red; font-weight: bold;">查詢條件</font></legend><div valign="top"><br><br><br><br></div></fieldset></td><td width="5"></td><td><fieldset align="center" style="border-width: 2px; border-color: pink;" mce_style="border-width: 2px; border-color: pink;"><legend><font style="color: red; font-weight: bold;" mce_style="color: red; font-weight: bold;">地點選擇</font></legend><div valign="top"><br><br><br><br></div></fieldset></td><td width="5"></td><td><fieldset align="center"><legend><font style="color: red; font-weight: bold;" mce_style="color: red; font-weight: bold;">時間選擇</font></legend><div valign="top"><br><br><br><br></div></fieldset></td></tr></table></body></html>

3. div的高度在IE中无法设置为1px。

这个可以说是IE的一个bug，其他浏览器中是ok的，具体可以参考下面这个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>DivDemo.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><divstyle="background-color: red; width: 200px; height: 1px;"></div><br/><divstyle="background-color: red; width: 200px; height: 1px; overflow-y: hidden;"></div></body></html>

4. 当P标签之间的字符为不规则英文时，宽度设置无效。

可以参考一下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>PDemo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  </head> <body>  <p style="word-break: break-all; width: 50%"> fewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaeffewafewafwaef </p> </body></html>

5. A标签的样式该如何设置？

我觉得顺序是比较重要的，可以参考一下代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Links</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* 我觉得顺序很重要 */a:link {color: blue;} /* 未访问的链接 */a:visited {color: pink;} /* 已访问的链接 */a:hover {color: green;} /* 鼠标在链接上 */a:active {color: red;} /* 点击激活链接——在你点击该链接之后，页面正在转向新地址的时候，链接显示此颜色；当你已经到了要链接的页面，然后再返回，原页面上的此链接仍是此颜色 */</style></head><body><a href="ADemo.html" mce_href="ADemo.html">我是来测试的</a></body></html>

6. 对象的样式中的float属性，我觉的也是比较重要的一个，尤其是在做一些排版的时候，使用float: left(或者right);可以让对象右边(或左边)的对象与这个对象平齐排布。

7. 样式属性中margin和padding的区别：

margin是指外补丁，而padding是指内补丁，简单说：margin是当前元素距离离它最近的上一个元素的距离(可能是父元素，也可能只是上一个元素)；而padding是指这个元素内部子元素距离这个元素边框之间的距离。

8. 如果你在页面中的表格table很多，而且每个table的单元格之间又是没有间距的，也就是cellspacing="0px"，那么可以借助这样一个样式属性来完成同样的操作，相对重用性比较好。

可以看看下面的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>TableDemo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">table{border: 1px solid blue;border-collapse: collapse;}td{border: 1px solid blue;}</style> </head> <body> <table> <tr> <td>11111</td> <td>22222</td> </tr> <tr> <td>33333</td> <td>44444</td> </tr> <tr> <td>55555</td> <td>66666</td> </tr> </table> </body></html>