页面布局
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,内部框线全部不见,只显示表格外部边框。