CSS中跌过的坑

今天整理一下一些CSS中不是那么容易理解的概念。

display

display属性有很多的值，但是经常使用的一般以inline，block最为常见.

我们知道，元素本身被分为块级元素和行级元素，常见的块级元素有p, h1, div等，而行级元素有span, a等.

而通过修改元素的display属性可以用之实现想要实现的效果.

当然，我们还会用到inline-block这样的值.

• inline-block

w3school上是这样描述的：

An inline-block element is placed as an inline element(on the same line as adjacent content), but it behaves as a block element.

我现在的理解是这样的，属性值为inline的元素的高度、宽度是不能修改的，但是block值的元素可以修改其模型的高度以及宽度，将属性值设置为inline-block在显示上是呈现出inline的样式，但是同时具备了block的特性.

举个例子：

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

li元素默认的是block的，如果我们用它来做导航菜单就需要它以inline的样式来显示，但是inline却不能修改其宽度、高度等属性，这时我们就需要将其display属性设置为inline-block.

但事实上，我还是对此有点疑问的，如果只是将li元素设置为inline其样式仍可以通过margin, padding等属性来修改，所以inline-block仍不是唯一的选择?! 不知道这个想法是对是错？

• inline-table

The element is displayed as an inline-level table.

同理，inilne-table属性的元素具有table的属性，但是在显示上是inline样式的.

position

position属性的值相对于display要少的多: static, absolute, fixed, relative和inherit.

其中static是默认的值，而inherit即表示position继承自其父元素.

主要还是来看看absolute, fixed和relative.

• absolute

The element is positioned relative to its first positioned (not static) ancestor element

• fixed

The element is positioned relative to the browser window

• relative

The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position

以上是w3schools对于这些值的定义，下面用一个比较简单的例子感受一下(在Chrome26下测试，有些样式是user agent stylesheet，但不影响理解)

有以下HTML：

<div id="ancestor">
    <div id="father">
	    <div id="son"></son>
	</div>
</div>

以及以下CSS:

#ancestor {
  width: 600px;
  height: 600px;
  background-color: blue;
}
#father {
  width: 400px;
  height: 400px;
  background-color: green;
}
#son {
  width: 100px;
  height: 100px;
  background-color: red;
}

现在为#son添加以下属性值：

top: 100px;
left: 50px;

刷新之后可以发现没有变化，这是因为默认的position是static的，而top,right,bottom,left等是不适用于static的. 继续向#son添加:

position: relative;

可以看到#son的位置发现了变化，所谓的relative也就是指相对于其原来的位置(static的时候)，根据top等属性值移动而到的新位置. 如果将其改为：

position: absolute;

那么整个#son就会发生新的偏移. 而事实上现在的位置是相对于整个窗口而进行top: 100px;, left: 50px;的调整的. 我们可以向#father添加如下属性（not static）：

position: relative;

然后会发现#son又变回了原样，这正是因为#son在寻找其祖先节点中第一个不是static的节点时，发现了#father的display是relative，所以这个绝对定位就是根据#father而来的.

有没有觉得好理解了很多呢……Have a try!

最近膝盖受伤，无法行走，很多事情都做不了，日子也过的云里雾里的. Anyway, go, go, 加油！

–EOF–