在写前端的时候,会发现写的网页,跟浏览器边框是有一定的距离的,是外边距,比如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下载地址