CSS单位和HTML标记默认值_html中th默认值-优快云博客

======================================================
注：本文源代码点此下载
======================================================

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

像素(pixel)。相对长度单位。

像素是相对于显示器屏幕分辨率而言的。譬如,wondows的用户所使用的分辨率一般是96像素/英寸。而mac的用户所使用的分辨率一般是72像素/英寸。

点(point)。绝对长度单位。

em vs px

em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

长度单位优化方法:

1. body选择器中声明font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

4.以上方法得到的12px(1.2em)大小的汉字在ie中并不等于直接用12px定义的字体大小,而是稍大一点。解决方法:只需在body选择器中把62.5%换成63%就能正常显示了。

html标记默认值

/**default css style**/

html, address,

blockquote,

body, dd, div,

dl, dt, fieldset, form,

frame, frameset,

h1, h2, h3, h4,

h5, h6, noframes,

ol, p, ul, center,

dir, hr, menu, pre { display: block }

li { display: list-item }

head { display: none }

table { display: table }

tr { display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col { display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell; }

caption { display: table-caption }

th { font-weight: bolder; text-align: center }

caption { text-align: center }

body { margin: 8px; line-height: 1.12 }

h1 { font-size: 2em; margin: .67em 0 }

h2 { font-size: 1.5em; margin: .75em 0 }

h3 { font-size: 1.17em; margin: .83em 0 }

h4, p,

blockquote, ul,

fieldset, form,

ol, dl, dir,

menu { margin: 1.12em 0 }

h5 { font-size: .83em; margin: 1.5em 0 }

h6 { font-size: .75em; margin: 1.67em 0 }

h1, h2, h3, h4,

h5, h6, b,strong { font-weight: bolder }

blockquote { margin-left: 40px; margin-right: 40px }

i, cite, em,

var, address { font-style: italic }

pre, tt, code,

kbd, samp { font-family: monospace }

pre { white-space: pre }

button, textarea,

input, object,

select { display:inline-block; }

big { font-size: 1.17em }

small, sub, sup { font-size: .83em }

sub { vertical-align: sub }

sup { vertical-align: super }

table { border-spacing: 2px; }

thead, tbody,

tfoot { vertical-align: middle }

td, th { vertical-align: inherit }

s, strike, del { text-decoration: line-through }

hr { border: 1px inset }

ol, ul, dir,

menu, dd { margin-left: 40px }

ol { list-style-type: decimal }

ol ul, ul ol,

ul ul, ol ol { margin-top: 0; margin-bottom: 0 }

u, ins { text-decoration: underline }

br:before { content: "\a" }

:before, :after { white-space: pre-line }

center { text-align: center }

abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }

:link, :visited { text-decoration: underline }

:focus { outline: thin dotted invert }

/* begin bidirectionality settings (do not change) */

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override }

*[dir="ltr"] { direction: ltr; unicode-bidi: embed }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed }

@media print {

h1 { page-break-before: always }

h1, h2, h3,

h4, h5, h6 { page-break-after: avoid }

ul, ol, dl { page-break-before: avoid }

}

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/