html标签的默认样式及去除

2023-09-05 19:06| 来源: 网络整理| 查看: 265

虽然在一般情况下、我们大部分人都会直接引用一份已经写好的专门去除标签默认样式的reset.css文件(重置样式表)到项目中，进而去除掉元素的默认样式,一直觉得这样很省事毫不费力，但是最近在使用的时候发现、对reset.css得设置毫不知情，再加上对于标签默认样式又不太熟悉，在实际操作过程中总是会出现一些小问题...

比如样式明明正确，但反复修改，也没有按照你的意愿来，去检查元素，大部分情况下都是因为被rest.css悄悄支配了...所以，对于一些常用标签的默认样式，我们还是要有一定的了解和熟知，有利于我们更好得使用reset.css，并去做项目~

基本总结如下：

h、p、body、html、dl有默认margin

ul、ol；body；html有默认margin和默认padding；

注意：h；p；dl无默认padding；

div不带任何默认样式的块级元素；

span不带任何样式的行内元素。

具体实现如下： body

默认样式：外边距margin 内边距padding

去除html、body默认样式：

html,body{ margin:0px; padding:0px } p 段落

默认样式：margin-top；margin-bottom（无默认padding值！）

去除p默认样式：

p{ margin-top:0px; margin-bottom:0px; } dl

默认样式：margin-top；margin-bottom（无padding默认值）

ul，ol 列表

默认样式：margin-top；margin-bottom；padding-left

去除ul默认样式：

ul,ol{ list-style:none; margin-top:0px; margin-bottom:0px; padding-left:0px; }

a 标签

默认样式：下划线text-decoration；字体颜色color

去除a默认样式：

/*a标签去除默认样式：*/ a{ text-decoration:none; color:black; } h1~h6

默认样式：字体大小font-size ；字体粗细font-weight；外边距margin（无默认padding值！）

去除h标签的默认样式：

h1,h2,h3,h4,h5,h6{ margin:0px; font-weight:normal; font-size:value; } img

默认样式：边框border

去除img默认样式：

img{ border:0px; }

附：我常用的淘宝reset.css

/*淘宝reset.css*/ html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { background-color:#FFFFFF; color:#666666; font-family:Helvetica,Arial,sans-serif; font-size:12px; padding:0 10px; text-align:left; } select { font-size:12px; } table { border-collapse:collapse; } fieldset, img { border:0 none; } fieldset { margin:0; padding:0; } fieldset p { margin:0; padding:0 0 0 8px; } legend { display:none; } address, caption, em, strong, th, i { font-style:normal; font-weight:400; } table caption { margin-left:-1px; } hr { border-bottom:1px solid #FFFFFF; border-top:1px solid #E4E4E4; border-width:1px 0; clear:both; height:2px; margin:5px 0; overflow:hidden; } ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; } caption, th { text-align:left; } q:before, q:after, blockquote:before, blockquote:after { content:””; }

【本文地址】

公司简介

联系我们