CSS定位教程

好的程序员web前端培训分享CSS定位教程，CSS定位（Positioning）属性可以让你对元素进行定位。CSS定位和浮动CSS提供定位和浮动属性，允许您构建柱状布局，将布局的一部分与另一部分重叠，并完成通常需要使用多个表格多年的任务。定位的基本思想很简单，它允许你定义一个元素的框相对于它的正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，此功能非常强大且令人惊讶。知道用户代理支持CSS2中的定位远远超过其他任何东西，这并不奇怪。另一方面，浮动首先在CSS1中引入，并且基于Netscape在Web早期添加的功能。不过，浮动并不完全是定位，而且肯定也不是正常的流式布局。我们将在后面的章节中阐明浮动的含义。　　一切都是盒子div，h1或p元素通常被称为块级元素。这意味着这些元素显示为一个内容，一个“块框”。相比之下，span和strong等元素被称为“行内元素”，因为它们的内容显示在行内，或“行内框”。您可以更改使用显示属性生成的框的类型。这意味着通过将display属性设置为block，您可以使内联元素（例如元素）表现得像块级元素。您还可以通过将display设置为one来使生成的元素完全没有框架。这样，该框及其所有内容将不再显示，也不会占用文档中的任何空间。但在一种情况下，即使未明确定义块级元素也会创建它们。当一些文本被添加到块级元素（如div）的开头时，就会发生这种情况。即使文本没有被定义为段落，它也会被这样处理：

　　在这种情况下，框表示是一个匿名块框，因为它不与特定定义的元素相关联。块级元素的文本行也会发生类似的事情。假设有一段包含三行文本。每行文本形成一个未命名的框。不能直接给匿名块或者行框应用样式，因为没有地方可以应用样式（注意lineboxes和inlineboxes是两个概念）。然而，它有助于理解您在屏幕上看到的一切都形成了某种盒子。CSS定位机制CSS具有三种基本定位机制：正常流定位、浮动定位和绝对定位。除非另有说明，否则所有框均按正常流程放置。也就是说，元素在正常流中的位置由元素在(X)HTML中的位置决定。CSS定位属性CSS定位属性允许您定位元素。　　块级盒子从上到下依次排列，盒子之间的垂直距离由盒子的垂直边距计算。行内框水平排列成一行。它们可以使用水平填充、边框和边距来隔开。但是，垂直填充、边框和边距不会影响行内框的高度。由一行组成的水平框称为行框，行框的高度总是足够大以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。　　在后面的章节中，我们将为您详细讲解相对定位、绝对定位和浮动。CSS位置属性通过使用位置属性，我们可以在4种不同类型的定位之间进行选择，这会影响元素框的生成方式。position属性值的含义：static　　元素框正常生成。块级元素生成一个矩形框作为文档流的一部分，而内联元素创建一个或多个行框放置在它们的父元素中。relative　　元素框偏移一定距离。该元素保留其未定位的形状，并保留其最初占用的空间。absolute　　元素框完全从文档流中移除，并相对于其包含块定位。包含块可以是文档中的另一个元素或初始包含块。元素先前在正常文档流中占据的空间被关闭，就好像该元素不存在一样。定位元素以生成块级框，而不管它最初在正常流中生成的框类型。固定元素框的行为类似于将位置设置为绝对，但它的包含块是窗口本身。　　提示：相对定位实际上被认为是正常流定位模型的一部分，因为元素的位置是相对于其在正常流中的位置的。CSS定位属性CSS定位属性允许您定位元素。