重置样式表——去掉浏览器默认的网页样式

在写前端的时候,会发现写的网页,跟浏览器边框是有一定的距离的,是外边距,比如div盒子,P标签等,都多多少少有一些默认带的样式
在pc端看的比较清楚,在开发的时候一定要去掉这些样式,不然会影响网页布局

默认样式:
通常情况下,浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局,通常情况下编写网页
时必须要去除浏览器的默认样式(pc端要去除掉浏览器的默认样式)
一般浏览器默认样式对块元素会留下一点外边距
就是说不会紧贴浏览器边缘,这个时候就需要给整个浏览器
添加一些样式,比如 margin :0 ;
body 是对整个浏览器添加样式
写两个p元素时发现文字之间有上下边距,但是把多个p放一起的
时候发现根本不会垂直边距那么长,那是因为垂直方向上外边距会重叠
这时候就直接在p标签上添加样式,并把外边距设为 0 px 即可

list-style:none; 这个会把列表前面的点取消掉(去除项目符号)

但是这样给每一个元素添加样式指定外边距为0,甚至内边距为0,会导致整个过长变的繁琐,浪费时间,所以我们也可以选择直接给整个页面添加样式

style{
第一种 
{
 给每一个带有默认样式的标签挨个添加样式,取消掉样式
}
  
第二种
*{
    margin:0px;
 }
}

还有一个更快的操作,就是直接调用前辈们准备好的css文件
该文件有两个,一个是release.css另外一个是normalize.css
两个文件区别是前者会一次性把全部的样式去掉,第二个会保留一些样式

release.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

开发中release.css 使用的比较多,还有另外一个在github上,所以那个没找

这个的原网址是release.css下载地址

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值