CSS中跌过的坑

April 17 2013 , Category: CSS

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

display

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

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

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

当然,我们还会用到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仍不是唯一的选择?! 不知道这个想法是对是错?

The element is displayed as an inline-level table.

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

position

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

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

主要还是来看看absolute, fixedrelative.

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

The element is positioned relative to the browser window

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;

刷新之后可以发现没有变化,这是因为默认的positionstatic的,而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的节点时,发现了#fatherdisplayrelative,所以这个绝对定位就是根据#father而来的.

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

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

–EOF–

支持作者 | Article licensed under CC BY-NC-SA 4.0