整 理:徐秀、晋哲
时 间:2015-11-20
说 明:html标签默认可能影响布局的属性
1.页边距(<body>)
一般默认外边距为8px,根据不同浏览器有微小差别,通过设置:"margin:0;"消除。但body与其它block元素不同,它的background属性是从浏览器的左上角扩展到整个可见页面的。
2.段间距(<p>)
一般默认边距:"margin:16px;"通过重置 "margin:0;"消除。
3.标题样式(<h>标签)
h标签默认加粗:"font-weight:bold;"
h标签有默认边margin和font-size。根据不同浏览器有所不同,(ps:有文字的block的文字域都有大于font-size的高度。可以通过设置line-height:1;消除。)
h标签有默认边margin和font-size。根据不同浏览器有所不同,(ps:有文字的block的文字域都有大于font-size的高度。可以通过设置line-height:1;消除。)
4.列表样式 (<ul>/<ol>/<dl>)
4.1. 一般浏览器ul默认"list-style:disc;margin:16px;padding-left:40px;"
4.2. 一般浏览器ol默认"list-style:decimal;margin:16px;padding-left:40px;";li的默认"display:list-item;"默认占据一行;
代码:
效果:
4.3. dl/dd/dt的默认"display:block;",dl默认"margin:16px;"dd的margin-left:40px;
代码:
效果:
5.表格默认属性(<table>)
table及其子元素默认属性较多,主要有如下。在布局中,我们只要重置:table{border-spacing:0;border-collapse:collapse;}【注:重置后,table自带的cellpadding、 cellspacing属性失效】
table及其子标签的display不可更改,否则可能会影响布局。
代码:效果:
6.输入标签默认属性(<input>/<button>/<textarea>等)
下面是webkit浏览器关于input及button的默认属性,其它浏览器有所差别,但是默认属性都不少【仅作了解,不要深究】需要注意的是input,button{display:inline-block;}
代码:
附录:
重置css代码:
body,h1,h2,h3,h4,h5,h6,p,form,ol,ul,dl,dd,fieldset{margin:0;padding:0;}
body,button,input,fieldset,select,textarea,p{font-family:Arial,"Microsoft Yahei","Hiragino Sans GB" ,"WenQuanYi Micro Hei",sans-serif;font-size:12px;}
ul,ol{list-style:none}
fieldset,img,input[type="button"],button,img{border:none;}
fieldset,button,textarea,select,input{outline:none;}
table{border-collapse:collapse;border-spacing:0}
img{-ms-interpolation-mode:bicubic;}