常见标签的默认属性值及相互作用——关于CSS reset的思考
2014-01-08 17:47
489 查看
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码
其实大部分CSS reset是没必要的,多写了只会增加浏览器在渲染页面是的负担,当然有同学会说CSS reset还是有其意义的,这个我也承认,但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset
虽然只是在Chrome下,但通过上面表可以看出很多标签默认的padding、border、margin就是0,如果还在CSS reset中写一遍岂不是画蛇添足了,除了浏览器的默认值,还有一些标签的属性值得我们注意。
行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
行内元素的overflow属性无效,这个不用多说了
行内元素的vertical-align属性无效(height属性无效)
看个例子
通过例子可以看出,我们对span设置的width和height属性并没有生效,margin-top和margin-bottom无效,padding-top和padding-bottom会改变元素范围(背景区域变大了),但并没有影响下面元素位置
在CSS reset中我们不应该设置对行内元素无效的属性
对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用
写的很精简了,但是我感觉可以把一些不常用的标签去掉,缩写成这样
如果对CSS reset 有兴趣可以看看http://www.cssreset.com/,上面有很多流行的CSS reset写法
div{ padding:0px; margin:0px; } span{ margin:0px; }
其实大部分CSS reset是没必要的,多写了只会增加浏览器在渲染页面是的负担,当然有同学会说CSS reset还是有其意义的,这个我也承认,但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset
标签属性默认值
由于大部分的CSS reset都是针对padding、border、margin,我们就先看看常用标签的这三个属性的默认值(Chrome)标签 | padding | border | margin |
html | 0 | 0 | 0 |
body | 0 | 0 | 8 |
form | 0 | 0 | 0 |
div | 0 | 0 | 0 |
span | 0 | 0 | 0 |
p | 0 | 0 | 16 |
th、td | 1 | 0 | 0 |
input(text、password) | 1 | 2 | 2 |
input(checkbox、radio) | 0 | 0 | 3 0.5ex |
input button | 8 | 0 | 2 |
textarea | 2 | 1 | 2 |
select | 0 | 0 | 2 |
option | 0 | 0 | 0 |
h1~h6 | 0 | 0 | ?px 0 |
ul、ol | 0 0 0 40px | 0 | 16px 0 |
li | 0 | 0 | 0 |
dl | 0 | 0 | 16px 0 |
dt | 0 | 0 | 0 |
dd | 0 | 0 | 0 0 0 40px |
label | 0 | 0 | 0 |
em、strong | 0 | 0 | 0 |
label | 0 | 0 | 0 |
img | 0 | 0 | 0 |
a | 0 | 0 | 0 |
行内元素的width、height、padding、margin
行内元素不会应用width属性,其长度是由内容撑开的行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节
行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响
行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效
行内元素的overflow属性无效,这个不用多说了
行内元素的vertical-align属性无效(height属性无效)
看个例子
<div style="background-color: #a44;"> <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0e0;">123456789123456789</span> </div> <div style="background-color: #a44;"> <span style="padding:4px; margin:8px; height: 500px; width:1000px; background-color:#0a0;">123456789</span> </div>
通过例子可以看出,我们对span设置的width和height属性并没有生效,margin-top和margin-bottom无效,padding-top和padding-bottom会改变元素范围(背景区域变大了),但并没有影响下面元素位置
在CSS reset中我们不应该设置对行内元素无效的属性
一些互斥的属性
对于absolute和fixed定位的固定尺寸(设置了width和height属性值)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了
对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效
块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用
其它
常规情况下块元素的width:100%,pre等很少用到的元素,个人感觉用的时候再页面写就可以,没必要加到reset中,让所有页面都去加载。例子
看一下CSS reset大神Eric Meyer的写法/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ 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; }
写的很精简了,但是我感觉可以把一些不常用的标签去掉,缩写成这样
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, del, dfn, em, img, small, strong, 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, section, summary { 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; }
如果对CSS reset 有兴趣可以看看http://www.cssreset.com/,上面有很多流行的CSS reset写法
相关文章推荐
- 借助CSS定位来实现把一个DIV放到另一个div右下角
- CSS行高line-height的个人理解
- 用纯CSS实现容器内图片上下左右居中
- CSS的各种选择器
- php文件第一行有多余字符,css文件第一行不起作用,bom头在作怪
- CodeIgniter引用外部css
- Web开发者不容错过的20段CSS代码(1)
- 关于DIV和CSS
- css背景颜色渐变效果
- 滚动条样式 IE与webkit内核浏览器
- CSS元素选择器
- 30个精美的CSS3前端效果代码片段
- css padding简写方式
- CSS3学习总结
- Css3 圆角和渐变色问题(IE9)
- IE怎么可能会为了CSS样式而改变
- 高性能CSS
- CSS盒子模型
- (经验)在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
- CSS清浮动处理(Clear与BFC)