GaoWhen高H温

「文不能测字 武不能防身」

Mercurial Hg 的配置文件 hgrc

2010-09-04 14:54:30

其实 hgrc 里面的配置选项是有很多的,这里只列出了目前我配置到的一些选项。

环境

这里默认说的都是 Mac 环境。

简介

用过 vi/vim 的大概一看就知道这是 Hg 的配置文件。

文件

  • 每个系统的配置文件

    • 路径 <install-root>/etc/mercurial/hgrc 或 <install-root>/etc/mercurial/hgrc.d/*.rc
  • 每个用户的配置文件

    • 路径 $HOME/.hgrc
    • 每个项目的配置文件
    • 路径 <repo>/.hg/hgrc
    • 每个项目自己的配置文件里面的配置会覆盖掉以上两个的配置。
    • 这个文件不在版本控制之内,不会随 clone 操作被传送出去,因此里面的配置信息(尤其是密码)是安全的。

推荐两首歌

2009-09-02 14:46:44

1. 东方神起 - どうして君を好きになってしまったんだろう

唯一喜欢的一首

2. 桑田佳佑 - 明日晴れるかな

日剧《求婚大作战》片尾曲,跟着春姑娘看的

下载

どうして君を好きになってしまったんだろう

明日晴れるかな

IE下img多余5像素空白

2009-06-08 12:56:28

IE下img多余5像素空白

版权所有,转载请注明出处,多谢!

嗯,开场先胡扯几句不相关地感言。最近的工作让我有了很多实践的机会,同时也让我收获颇丰。在群里聊天的时候也提到过,所有的学习过程,最好是理论-实践-再理论-再实践。。。的一个循环往复的过程。这里说的理论是个比较宽泛地概念,其中包括书本理论,也包括对实践地总结。只有理论没有实践,往往造成眼高手低,想得好,做得差;只一味地实践却不通过理论地学习和总结,看起来好像忙忙碌碌,到头来会两手空空。

最近地实践中,越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦,需要注意,当然,问题还是一如既往的出现在 IE 下。以下为其中一例:

html


css
ul{
    width: 280px;
}
ul li{
    display:block;
    height:57px;
    width:277px;
}
其中 temp.jpg 尺寸为 277×57

Firefox 下的正常表现: demo-ff IE6 下的非正常表现: demo-ie 很明显地可以看到 IE 中,li 的表现高度,并非我们设定的 57px,而是比其要高,这是因为 img 下面多出了 5px 的空白。

解决方法 一

使 li 浮动,并设置 img 为块级元素

ul{
    width: 280px;
}
ul li{
    float:left;
    display:block;
    height:57px;
    width:277px;
}
img{
    display: block;
}

解决方法 二

设置 ul 的 font-size:0;

ul{
    width: 280px;
    font-size: 0;
}
ul li{
    display:block;
    height:57px;
    width:277px;
}

解决方法 三

设置 img 的 vertical-align: bottom;

ul{
    width: 280px;
    font-size: 0;
}
ul li{
    display:block;
    height:57px;
    width:277px;
}
img{
    vertical-align:bottom;
}

解决方法 四

设置 img 的 margin-bottom: -5px;

ul{
    width: 280px;
    font-size: 0;
}
ul li{
    display:block;
    height:57px;
    width:277px;
}
img{
    margin-bottom: -5px;
}
可以下载 demo 来看

CSS 盒模型

2009-06-05 17:38:20
整理自:[The CSS Box Model](http://css-tricks.com/the-css-box-model/) 中文:[CSS 盒模型](http://www.qianduan.net/css-box-model.html) 版权所有,转载请注明出处,多谢! * * *

网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的,请看下图: thebox

如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 - 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 firebug

注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影响盒子本身的大小,但是它会 影响和盒子有关的其他内容,因此 margin 是盒模型的一个重要的组成部分。

盒子本身的大小是这样计算的:

Width width + padding-left + padding-right + border-left + border-right
Height height + padding-top + padding-bottom + border-top + border-bottom

值未声明的情况

如果未声明 padding 或者 border,那他们或者值为零(使用 css reset 时),或者为浏览器的默认值(很可能不是零,尤其是那些通常没有重置的表单元素)

块级盒的默认宽度

如果未声明宽度,并且盒子是静态或者相对定位的,宽度会保持 100%的 宽度,padding 和 border 会向内推动,而不是向外扩展。

但是,如果明确设置盒子的宽度为 100%,那么 padding 就会向外延展。 weird

The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

要注意的是,盒子的默认宽度并不真的是 100%,而是剩下的可能值(应该是说,剩余真实存在的宽度 - 糖伴西红柿)。应该了解这个特殊值,因为很多情况下,它对于设置/不设置宽度都是非常有用的。

我遇到的最大的麻烦就是 textarea(文本框) 元素了,它们需要设为宽度为所需的"cols"属性,并且不能包含子元素。因此通常需要明确的设置 textarea 的宽度为 100%,但有 padding 时,就会延展 textarea 的宽度。固定宽度环境下,通常可以设置为合适的像素值宽度,但是变宽情况就没那么幸运了。

无宽度的绝对定位盒子

未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。 abs-width

这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。

对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。 text-render-abs

无宽度浮动盒子

同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包含它的宽度,你就是在自找麻烦。

内联元素也是盒子

我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding he border span

折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。

亲眼目睹一下

想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:

   * {
        border: 1px solid red !important;
    }
    
all-is-a-box

定义列表: DL DT DD

2009-04-29 11:04:43

定义列表和其他类型的列表稍有不同,它由两部分组成:名称和定义。DT 指定名称,为内联元素。DD 指定定义,为块级元素。

标准属性

id, class, title, style, dir, lang, xml:lang

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

示例:

dl —— define list——定义列表

dt —— define list title —— 用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。注意:其中不能包含 hx 元素。

dd —— define list define —— 用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解释。

dl 列表中有较为强烈的“描述”、“解释”、“补充”意义。 dt 和 dd 有明显的逻辑关系,dd 从属于 dt,dd 中的内容是对 dt 的“描述”、“解释”、“补充”。 另外,dd 之间虽然是平行关系,但是其描述的内容是多角度的,不同于单纯的 li。

例如: