- 每一个HTML标签都有它的默认样式,例如<p>标签有上下边距,body自带外边距等等。这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的麻烦,从而影响开发效率,所以最好的解决方案就是在一开始就将默认样式都全部去掉或者覆盖。通过重新定义标签的样式确保标签在各个浏览器的表现特征一致是我们样式重置的根本原因。在此我总结了一些经常需要重置的标签的默认样式及重置情况。
-
常用标签的默认样式及重置 标签 默认样式 重置默认样式 body
上下左右四个方向具有外边距
body{margin:0;}
p段落标签
上下具有一行外边距
p{margin:0;}
h1~h6标题标签
上下具有外边距
h1,h2,h3,h4,h5,h6{margin:0;}
ul无序列表
上下具有外边距;
列表样式默认小圆点;
左边有内容填充
ul{
list-style:none;/*消除小圆点*/
margin:0;
padding:0;
}
ol有序列表
上下具有外边距;
有序列表默认有数字;
左边有内填充
ol{
list-style:none;
margin:0;
padding:0;
}
dl定义列表
dl上下有外边距;
dd左边有内填充
dl{margin:0}
dd{padding:0}
mark
背景默认是黄色背景;
字体默认是黑色
mark{background:none;}
strong强调标签
默认字体是加粗
strong{font-weight:normal}
em强调标签
默认字体是倾斜
em{font-style:normal}
a超链接标签
默认有下划线
a{
text-decoration:none;
color:#000;
}
img
容器有边框时,图片底层默认有1px的空隙
img{/*容器有边框时的样式重置*/
vertical-align:top;
border:none;
/*非标准的IE中,图片超链接中的图片默认会显示边框*/
使用CSS rest样式标签
最新推荐文章于 2021-08-19 10:15:06 发布