天天看点

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染。这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。这才带来了很多的坑,让大家用cssreset去填。。

了解各浏览器的默认样式能让我们对每条reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助。

所以先看看浏览器默认样式长什么样:

ff下的浏览器默认样式可以通过:resource://gre-resources/html.css来查看。

掌握html标签的css属性的默认值,可以让我们不管是在重置样式还是在自定义样式的时候都更加游刃有余。

这只是一份资料性的附录,而非规范性附录,可能也不适合作为规范或标准。但是浏览器何其多,个人觉得可以以此作为切入点了解默认样式。并且这份样式是基于对现有ua的大量调查而得到的,描述了所有html4元素的典型的排版。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

以下为对这些浏览器默认样式的一点认识和思考:

经常在面试时被问到哪些是块级元素,哪些是行级元素?通过html4默认样式可以看到以下这些标签都是块级元素。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

没有显示设置display的元素,默认为inline显示,因为display的默认值就是inline。

display 的inline-block集合了inline元素和block元素的一些特性,可以在一行内显示多个(inline特性),可以设置宽高等(block特性)。 经常见的可以在一行内放几个button之类的效果,就是因为它的display属性为inline-block。

可见除了hx和strong外,还有th是加粗的。

可能面试会被问到b和strong的区别是什么?i和em的区别是什么?

因为默认的显示效果上b和strong是一样的,i和em是一样的。

html4中:

em:表示emphasized text

strong:表示strong emphasized text,所以strong的强调程度更强。

在html5中strong的定义改成了important text。

<em>表示内容的着重点,是局部的强调,视觉上效果是阅读到某处才会注意到;<strong>表示内容的重要性,是全局的强调,一眼望去,立刻凸显出来的关键语句。斜体和粗体恰好满足了这两种视觉效果,因此成了浏览器给em和strong的添加的默认效果。

i不多说,

cite通常用在<q>或者<blockquote>标签中,内容为标题,斜体显示。

em强调某个文本,效果和i一样,如果只是想用斜体的效果就用i。

address也是一样的,但它除了斜体外还有个默认样式是display:block。

还有一个dfn也是斜体显示,第一次用到某个术语时,用以区分,很少用。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

big大小,small小写,small小写且显示文字为上标,sub小写且显示文字为下标,而和删除线相关的有s,strike,和del。

但是html5不支持<strike>和<s>了,可用del代替,<del>用的时候和<ins>配合使用,表示更新和修改。

acronym在firefox下默认会有一个abbr[title], acronym[title] { border-bottom: 1px dotted;},但在chrome中没有,这会导致在给<acronym>标签 title属性后,浏览器显示不同。

这里可以看出为什么ul和ol默认会有左间距以及间距大小。

虽然这里列表的缩进用的是margin-left,但是firefox和chrome其实都是用padding来实现的,firefox用的 -moz-padding-start:40px;chrome浏览器用的-webkit-padding-start: 40px;。ie不同版本不一样,低版本用的margin,高版本逐渐加入padding。所以需要reset。

用div和span模拟实现一下列表项目的效果,对比看看发现效果都来自display: list-item;

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

效果:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

这也给我们用ul li做菜单一个很好的提示。之前可能是用float:left然后设置list-style-type:none来进行,现在给出一种新的方案:

代码:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

火狐下用的:focus的默认样式为outline: 1px dotted; 不设定颜色,颜色使用默认值。

chrome的处理方式又不一样,导致input输入框在获取焦点时样式有差异:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

在这里给出一个默认table效果的例子【为效果明显加了1px的border】。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

a、display:table 和 block 最大的区别在于:包裹性——block元素宽度和父容器相同,而table宽度根据内容而定。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

b、代码里不写<tbody>浏览器显示时会自动补全的,所以我们看到的table中th单元格都是水平垂直居中且加粗,td单元格都是垂直居中的(水平用默认值left),有人也利用用这个来做垂直居中。

c、用table-cell代替float做多列布局

有人使用table-cell进行多列布局和两栏自适应布局。我没研究过不多说。

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

所以标题系列除了font-weight加粗外还有font-size设置和margin预留。

默认不显示,就像<script>脚本一样,默认在浏览器下不显示。

ie6、7中body的页边距用的是margin: 15px 10px;ie8、9以后改为margin: 8px;考虑兼容性的时候要重置 。

line-height:1.12 貌似在各浏览器默认样式中并没有。

所以p处理display:block外还设置了上下margin,这样表现就是p标签段前段后有段边距。

这样就实现了<blockquote>将内容文字两边向中间缩排,一组标签,缩排一个单位,两组标签,缩排两个单位。

实现类似这样的效果:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

 为什么通常见到的<hr/>默认是那样的,就是因为这条样式border:1px inset加上和其它元素组合定义中的display:block。

可见br的white-space属性为:pre-line,所以它对空白符的处理是合并空白符序列,但是保留换行符。

但 是这个content:"\a",不知道干嘛的。像我们通常见的content属性都是和:before,:after伪元素来配合使用,插入生成的内 容;也可能在<meta>中见到content="text/html; charset=utf-8"这样的写法。我还是没有在别处再见到content了,难道此中另有深意?我在firefox的浏览器默认样式中也没看到这 个东东,所以也就不纠结了。

开发人员不要修改此样式。

这是对于默认打印页面时的设置,不常用。

如果要在打印页面时,有超链接的打印出链接的地址,可以这样设置:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

效果如下:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

a、行内元素不会应用width属性,其宽度由内容撑开。

b、行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节。

c、行内元素的padding属性只对padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响。

d、行内元素的margin属性只对margin-left和margin-right有效,margin-top和margin-bottom无效。

e、行内元素的overflow属性无效。

f、行内元素的vertical-align属性无效(height属性无效)。

对于这些无效的inline属性值是不需要reset的。

 举例:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

可见span对宽高设置无效,margin-top和margin-bottom无效。padding-top和padding-bottom会改变元素范围但没有影响下面元素布局。

在css reset中不应该设置对行内元素无效的属性。

a、对absolute和fixed元素,设置了width之后,left和right同时存在,只有left生效;不设置width,只有content时,left和right同时生效。同样,设置了height之后,top和bottom同时存在时,只有top生效;不设置height,只有内容时,top和bottom同时生效。

b、对absolute和fixed元素,float无效。

c、元素设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用。

css reset大神eric meyer的写法:

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

天猫前端cssreset

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

pptv前端cssreset

浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接
浏览器默认样式(user agent stylesheet)+cssreset一、浏览器默认样式二、HTML4默认样式三、使用cssreset处理浏览器兼容问题四、使用normalize跨浏览器五、资源链接

使用normalize.css也是个比较好的选择,给出几个链接。

<a href="http://jerryzou.com/posts/aboutnormalizecss/" target="_blank">来,让我们谈一谈normalize.css</a>

<a href="http://nicolasgallagher.com/about-normalize-css/" target="_blank">about normalize</a>

<a href="http://necolas.github.io/normalize.css/" target="_blank">normalize.css项目地址</a>

<a href="http://www.w3.org/tr/css21/sample.html" target="_blank">w3c的html4默认样式表http://www.w3.org/tr/css21/sample.html</a>

<a href="http://www.w3cfuns.com/topic-12.html" target="_blank">w3cfuns的各个版本浏览器默认css样式表http://www.w3cfuns.com/topic-12.html</a>

<a href="http://developer.doyoe.com/default-style/" target="_blank">浏览器默认样式对比http://developer.doyoe.com/default-style/</a>

<a href="http://cssreset.com/" target="_blank">cssreset参考http://cssreset.com/</a>

<a href="http://www.iecss.com/" target="_blank">ie6~9浏览器默认样式http://www.iecss.com/</a>

<a href="http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css" target="_blank">firefox的默认样式http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css</a>

<a href="http://trac.webkit.org/browser/trunk/source/webcore/css/html.css" target="_blank">webkit的默认样式http://trac.webkit.org/browser/trunk/source/webcore/css/html.css</a>

<a href="http://browserhacks.com/" target="_blank">浏览器兼容的hackhttp://browserhacks.com/</a>

继续阅读