HTML常用手册

页面布局

1、如果表单中有个多行文本框，标题对于多行文本框实现水平居中，则需要对标题的line-height属性，设为多行文本框的高度。

2、页面布局中，多个div设置了浮动，需要另起一行，不跟随浮动，则需要在换行的div上设置clear：both，以此来清除浮动。

3、表格中，对于内容中有换行的，识别换行可用white-space:pre;/*显示换行符*/  

4、表格宽度固定，当文本内容超出表格宽度，自动换行。首先将表格的样式设为table-layout:fixed; 再将td的样式设为

white-space:pre-line;/*合并空白符序列，但是保留换行符*/
word-wrap: break-word;/*在长单词或+URL+地址内部进行换行*/
word-break: break-all;/*允许在单词内换行*/

5、对于嵌套的div，子div的margin无效果，需要设置父元素div为overflow:hidden，此时子元素的边距就用padding控制。

原因：

在两个嵌套的div，如果外层div的父容器padding值为0，
那么内层div的margin-top或者margin-bottom的值会”转移”给外层div，也就是父容器的父容器。

6、对于两个相邻的div，margin左右边距有效，上下无效的问题。

1.给最后面的元素加上浮动（left/right）

2.给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}

.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}

 

window.print();打印页面时，为了页面效果，去除元素边框

1、textarea 不显示滚动条，隐藏边框

.textclass{border:0;overflow:hidden;}

2、select去除倒小角和边框

.selectclass{border: 0;-moz-appearance: none;-webkit-appearance: none;padding-right: 14px;}
.selectclass::-ms-expand{display:none;}

3、表格边框隐藏

表格内部分割线起作用的是rules属性，可选值分别为cols，rows，none

当rules=cols，会隐藏横向的分割线，这时表格会被纵向的分割线一片一片切开；当rules=rows，效果相反；当rules=none，内部框线全部不见，只显示表格外部边框。