css笔记2

一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之

相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框

”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block

，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为

none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间

。

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加

到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始

包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生

成一个块级框，而不论原来它在正常流中生成何种类型的框

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上

被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的

位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定

位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果

不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-

index 属性来控制这些框的堆放次序。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持

续到某一行拥有足够的空间为止。

要想阻止行框围绕浮动框，需要对该行框应用 clear 属性。clear 属性的值可以是 left、right

、both 或 none，它表示框的哪些边不应该挨着浮动框。

设置了float的元素，会浮在其它标准流之上，也就是标准流会当它不存在，不过呢，标准流的内

容却是要从他后面开始写起。包围标准的block和inline流

设置了若一个框所包含的元素全为浮动框,脱离了标准文档流,那包含框可能会很小的. 可以在下面

加一个标准流框.以让包含框正常显示.

使用position:absolute的块，它的定位方式先看上框块，如果上层块设置了定位，那就依据上层

块偏移，如果上层块（上上层块。。。。上上上上层块）没设置定。那就看整个页面框架了。（所

谓设置了定位：即是设置了postiton属性，而且不为static哈。

如果设置了绝地定位而没有设置偏移量，那么它仍保持在原来的位置。这个性质可以用于需要使某

个元素脱离标准流，而仍然希望它保持在原来的位置的情况。

position:fixed这个很有意思，可以实现用js实现的跟随滚动条的飘浮窗，不过呢，目前IE对这

个不大支持啊。

#盒子的display属性

通过前面的讲解，读者已经知道盒子有两种类型，一种是 div这样的块级元素，还有一种是span这

样的行内元素。
事实上，对于盒子有一个专门的属性，用以确定盒子的类型，这就是display属性。
display:none;   (盒子会消失，而且不占用地方哦）
display:block;   （块盒）
display:inline;   （行内样式）