CSS(css reset)重置到底要怎么写?

html-css014

CSS(css reset)重置到底要怎么写?,第1张

(文章来源于:玉溪无痛人流因为各种浏览器的算法不一样,从而导致CSS在不同的浏览器中存在一部分不一样的效果,CSS重置就是写一段初始化CSS将这些浏览器不同的初始化设置指定同一种显示效果。使用了CSS重置以后,各不同浏览器的初始化设置将一致,后面再写CSS的时候就不会因为浏览器的初始化不同从而导致显示的效果不一致了。CSS重置使用的误区下面这段代码是网上很多网站CSS开始之前使用的CSS重置代码,看着就让人头晕,可能连网站设计者自己都搞不懂里面很多标签的含义。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: 0padding: 0border: 0font-size: 100%font: inheritvertical-align: baseline}我们写CSS重置要考虑到自己的网站的具体设计,如上面那段CSS代码所示,你的网站可能只有用到里面的其中一小部分标签,但是你却把所有的全部复制到你的CSS里面,你考虑过CSS渲染的问题吗?对你没用的东西你为什么要写进去呢?写程序是一件很严谨的事情,你写的每一段代码你至少需要知道其含义是什么,原样复制连自己都弄不清楚是什么意思有想到会造成什么后果吗?

就是重置css样式,也可以说是初始化css样式。

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

*

{

padding:

0

margin:

0

border:

0

}这也算是一个css

reset只是效率低不推荐!

具体解释见这里:http://www.w3school.com.cn/css/pr_class_position.asp

下面我从实际使用中说一下:

【static】定位模式用的不多,既然他的意思是没有定位,通常就不实用他。但css是层叠样式表,所谓层叠,意思就是哪个属性离当前html元素最近就执行那个属性。所以,同级选择器时css的行越往下权重越高。id比class的权重高。行内css权重大于页内css大于文件css。那么,如果起初定义过定位属性,后面又需要取消定位属性,在保证css结构的情况下,可以用这个属性来重置定位(取消起初定义的定位)。

【绝对定位absolute】绝对定位的意思是,不使用外边距和内边距修饰的定位。所以,你可以看到外边距是:margin-【left、right、top、bottom】,内边距是padding-【left、right、top、bottom】,而绝对定位只有【left、right、top、bottom】,所以就是绝对定位,绝对定位默认情况下是参照浏览器的窗口大小的。但,如果其父级元素有定位属性,则参照其父级元素的左上角。绝对定位会丢失元素自身的宽高值和原始位置,漂浮于其他层上方或下方。

【相对定位relative】相对定位是参照附近的元素进行定位,他可以使用内外边距,也可以使用绝对的方位值,和绝对定位不同的是,相对定位会保留元素自身的尺寸位置,而不浮动定位。

【关于绝对定位和相对定位】通常建议:

如果是全屏内容,可以直接使用绝对定位,如弹窗、浮动回到顶部、客服等

如果是希望固定区域内自由布局,则需要对父级指定相对定位属性(或者绝对定位属性)。

绝对定位的元素和其他元素出现了遮挡,可以为其他元素设置相对定位属性,同时设置z-index的值。

【固定定位fixed】fixed是把某个元素按照固定的位置呈现,它也是参照浏览器窗口的,和绝对定位差不多,但又不同,不同之处在于,他不随窗口的滚动移动位置。常用于固定导航条和回到顶部等模块中。

具体的,你可以写一个练习文件,中间放置一个960*960的div,设置下背景色,居中对齐,里面放置9个小div,设置宽度高度,外面放置4个div,也设置宽高。

中间的大div给予相对定位属性,里面的9个小div设置绝对定位,分别调整9个div为左上角、顶部居中、右上角、右侧垂直居中、右下角、底部居中、左下角、左侧垂直居中和绝对居中。

外部的四个div分别尝试使用绝对定位、相对定位和固定定位。

最后使用static重置一下。然后找一个游戏界面(自由零散布局),大致看下他的界面布局,理解下如何布局,然后看一些UI界面(自由规矩布局),理解下,最后回到网页(绝对规矩布局)。理解了这些,就可以用html当PS玩了。

float两个元素绝对靠紧,需要使用到margin和padding重置(有专门的css reset,来重置html元素的默认属性,html默认是有属性的,每个浏览器都不一样),重置后试试,实在不行尝试下使用 * {margin:0padding:0}(不建议使用)。