Web前端+后台开发工程师yule的经验积累之HTML+CSS

经验积累之 HTML+CSS

7个你不了解的CSS单位

　　我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。

body {

font-size: 14px;

}

div {

font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px

}

　　你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。

　　但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。

<body>

<div>

Test

<div>

Test

<div>

Test

</div>

</body>

　　实例

　　虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是<html>元素了。

html {

font-size: 14px;

}

div {

font-size: 1.2rem;

}

　　这样在上面的那三个嵌套的div娃们的字体大小都是 1.2*14px = 16.8px 了。

　　适用于网格布局

　　Rems 不仅仅只是在设置字体大小上很方便。再炒个栗子，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，

.container {

width: 70rem; // 70 * 14px = 980px

}

　　概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。

　　vh and vw

　　响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？这就是 vh 和 vw 单位为我们提供的。

　　1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。

　　可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide {      height: 100vh;  }

　　假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有？！

　　实例

　　vmin and vmax

　　vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。

　　那么问题来了，我们应该在什么场景下使用这两个单位呢？

　　假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：

.box {

height: 100vmin;

width: 100vmin;

}

　　如果你要让这个方形框框始终铺满整个视口的可见区域（四边始终触摸到屏幕的四边）

.box {

height: 100vmax;

width: 100vmax;

}

　　结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。

　　ex and ch

　　ex 和 ch 单位，类似于 em 和 rem, 依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。

　　ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。

　　ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。很多时候，它是字体的中间标志。

x-height; the height of the lower case x

　　这些单位有很多用途，大部分用于版式的微调。比方说，sup 元素（上角文字标），可以通过position:relative;bottom: 1ex;实现。类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：

sup {

position: relative;

bottom: 1ex;

}

sub {

position: relative;

bottom: -1ex;

}

　　结论

　　持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的全部技能。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。花点时间去阅读新的技术规范，注册订阅一些不错的网站或者资源，类似 cssweekly这样的。当然不要忘记现在就去注册像TUTS +这样的网站来获取每周的更新，课程，免费教程还有资源！

html5 右键菜单: <div style='display:inline' contextmenu="mymenu">右击我试试</div>
<menu type="context" id="mymenu">
<menuitem label="菜单1" onclick="alert('这是菜单1');" icon="http://d.lanrentuku.com/down/gif/gif-0145.gif"></menuitem>
<menuitem label="菜单2" onclick="alert('这是菜单2');" icon="http://d.lanrentuku.com/down/gif/gif-0161.gif"></menuitem>
<menu label="菜单3">
<menuitem label="菜单3-1" icon="http://d.lanrentuku.com/down/gif/gif-0184.gif" onclick="alert('这是菜单3-1');">
</menuitem>
<menu label="菜单3-2" >
<menuitem label="菜单3-2-1" icon="http://d.lanrentuku.com/down/gif/gif-0171.gif" onclick="alert('这是菜单3-2-1');">
</menuitem>
</menu>
</menu>
</menu>

换ico

IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">

可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">

expression

定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。

#container { width: expression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }

QQ聊天

表格不被撑开: table-layout: fixed; word-break: break-all;;border-collapse: collapse

透明度: opacity:0.8; filter: alpha(opacity=80);

初始化: 1. html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baselinebaseline;
background: transparent;
}
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; }
2. charset "utf-8″;
html { background:url(/www/pic/head_back.gif) repeat-x top #FFF }
body { width:920px; font:12px Arial; margin:0 auto; padding:0; color:#000; }
a { color:#000; text-decoration:none }
a:hover { color:#f00; text-decoration:underline }
ul, ol, p, dl { margin:0; padding:0 }
ul, ol, dl { height:100%; overflow:hidden }
li { list-style:none }
img { border:none }
h1, h2, h3, h4 { font:12px Verdana; margin:0; padding:0 }
input { font:12px Verdana }
3.
/*为背景定义颜色*/
html {
color: #000;
font-family: Arial, "宋体";
font-size: 12px;
background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
/*去除IE中div的默认高度*/
div { width: 100%; line-height: 0; }
/*合并边线,边线空间至零.*/
table { border-collapse: collapse; border-spacing: 0; }
/*清除边线*/
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
/*添加空字符清除融合*/
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
/* to preserve line-height and selector appearance */
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size:100%;
}
/*IE下legend不继承 */
legend { color: #000; }
/*a标记初始化*/
a { text-decoration: none; }
/*p标签缩进*/
p { text-indent: 2em; }
body { overflow-x: hidden; }
4. 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; }
}
5. html {
color: #666;
font-family: "宋体";
font-size: 12px;
background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size:100%;
}
legend { color: #000; }
body { overflow-x: hidden; }
a { color: #007dc5; text-decoration: none; }
/*clear*/
* html .clear_float { zoom: 1; }
.clear_float { display: block; }