陈力：传智播客古代珍宝币泡泡龙游戏开发第十二讲：盒子的定位方式-CSDN博客

本文链接：https://blog.csdn.net/zhenbaobe/article/details/46969487

陈力：传智播客古代珍宝币泡泡龙游戏开发第十二讲：盒子的定位方式

摘要：通过前节《第十一讲：浮动》学习了贵阳网站建设中的DIV+CSS中盒子模型和浮动进行介绍。框模型是CSS的基础，本文介绍利用CSS进行网页布局定位的四种方式和三种定位机制。阐述了CSS中Position属性与float属性的组合使用时对网页布局定位的影响。以方便网站建设人员在网站建设中加深对PHP教程的了解。本节：陈力：传智播客古代珍宝币泡泡龙游戏开发第十二讲：盒子的定位方式。

什么是DIV+SCC的盒子模型？
在网站建设中关于内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式这些属性。一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图所示。[了解更多]深入理解盒子模型。
DIV是一个容器, 是用来为HTML文档内大块(block level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，DIV的作用就是把内容标识在一个区域内，并不负责其它事情，其中所包含元素的特性均由CSS样式来完成。
CSS是Cascading style sheets的缩写。也称为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS可以将格式和结构分离，以前所未有的能力控制页面布局，制作体积更小下载更快的网页。

DIV、html元素常常被称为块级元素。这些元素显示为一块内容。块级框从上到下一个接一个地排列，就是说块级框会默认换行，框之间的垂直距离是由框的垂直外边距计算出来。与之相反span和strong等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。行内框在一行中水平排列，就是说行内框不自动换行除非人为添加换行或者行内框到达其父框元素的边缘才会换行。
可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(LineBoX)，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高(height)可以增加这个框的高度。
元素框的类型可以使用display属性改变。这意味着，通过将display属性设置为block，可以让行内元素(比如<a>元素)表现得像块级元素一样。将disPlay属性设置为inline，可以让块级元素表现得像行框一样。还可以通过把display设置为none，让生成的元素不可见。这样的话，该框及其所有内容就不再显示，且不占用文档流中的空间。

对于一个网页中的任意元素，根据它的前后顺序，组成了一个个顺序结构，形成文档流的概念。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。
浮动定位的目的，是为了打破默认的按照文档流的显示规则，按照布局要求进行显示。可以用CSS中的float属性实现浮动，如将float属性设置为“left”或“right”，这样元素就会向其父元素的左侧或右侧靠紧。如图。

CSS1中首次提出了浮动,它以Netscape在web发展初期增加的一个功能为基础。浮动不完全是定位，不过，它也不是正常文档流布局。float属性有四个可用的值：Left和Right分别浮动元素到各自的方向，None(默认的)使元素不浮动，Inherit将会从父级元素获取float值。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。元素设置成浮动以后，会生成一个块级元素，而不论它本身是何种元素。该浮动元素将脱离文档流(想象成其漂浮在文档流之上)，它将不再独自占据一行。浮动元素可以设置向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框时自动换行。

CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大。
CSS有三种基本的定位机制：文档流(普通流)、浮动和绝对定位。除非专门指定，否则所有框都在文档流中定位，也就是说，文档流中的元素的位置由元素在x(HTML)中的位置决定。而绝对定位和浮动则是分别通过Position和float属性实现的。对这两个属性的不同设置，就会引起div元素的定位机制的变化，这是网页设计者需要关注的地方。

1、CSS position属性
通过使用Position属性，可以选择4种不同类型的定位static、relative、absolute、fixed。这四种不同的定位方式同时影响了其不同的定位机制。

(1) statie静态定位
这个是默认值，其实此时元素框是没有定位的，因为top,bottom,left,right的设置不起作用。DIV为块级框，在这种情况下，在文档流中从上至下排列，如果是Span元素，其默认为行框，在文档流中从左至右排列。

（2）relative相对定位
元素框相对于自己在文档流的原位置偏移某个距离。元素框仍保持其未定位前的形状，它原本所占的空间仍然保留，但产生的新位置并不占用文档流的空间。生成相对定位的元素，经由top,bottom,left,right的设置相对于其原位置进行定位。如图三个DIV框默认情况下排列应该是从上至下排列，框2元素设置为相对定位后，即CSS样式如下:
#box-relative{position:relative;left:30px;top:20px;}

框2元素相对自己本来的位置(虚线部分)向左偏移了30像素,下偏移了20像素，但其原来的位置仍然是存在的，并且该元素的新位置并不影响其它元素的位置(即其它元素当做该新位置不存在一样)。如果有多个元素使用相对定位切相互重叠则可经z-index设置进行层叠分级。使用相对定位时要小心，否则容易将页面弄得非常乱。相对定位的关键在于定位了的元素的位置是相对于它原本位置进行定位。如果你停止使用相对定位，则元素框的显示位置将恢复正常。

（3）absolute绝对定位
定位为absolute的元素(css样式中position值为aboslute)脱离普通文档流(如图3,框2元素脱离文档流),并相对于其已定位的第一个祖先元素定位。元素原先在普通文档流中所占的空间会关闭,就好像元素原来不存在一样。不论原来它在正常流中生成何种类型的框，元素定位后生成一个块级框。relative与absolute的差别：
第一，相对定位的元素在普通文档流中的位置保留，而绝对定位的元素在普通文档流中的位置会被删除。
第二，relative定位的层是相对于自身，无论其父元素是何种定位方式，而absolute的定位是相对于最近的已定位祖先元素(已定位可以理解为position属性不为reltative)，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(document windows)文档窗口，注意既不是body元素也不是浏览器)。

（4）fixed固定定位
Position属性为fixed的元素定位方式同absolute类似，但它的的定位是相对于WEB浏览器。在WEB浏览器中，元素在文档滚动时，fixed定位元素不会再随着文档滚动而是相对于浏览器停在一个固的定位置。通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。在IE7,ES、FirefoX、OPera、Google等浏览器中使用都没有问题，唯独低版本的IE中，这个属性无效。不过随着旧版本的淘汰，也没有必要在这个兼容性问题上花太多的时间。

（5）几种定位方式的混合使用

1）父元素和子元素使用不同定位方式的组合
在以上文章谈到的定位方式中,除了position属性为fixed的元素定位是相对于浏览器定位，其它的定位方式都是相对于其父元素或者祖先元素(absolute)进行定位。本节将对父元素对子元素的定位影响进行简单阐述。以下几种方式都是子元素可以参照父元素进行定位的情况。
a 父元素position属性为默认值(statie)
此时不管父元素是在普通文档流中还是处在浮动状态(float属性不为none)下，其子元素的position属性可以是static，relative，或者是浮动元素。
b 父元素position属性为relative
此时不管父元素是在普通文档流中还是处在浮动状态下，其子元素的position属性可以是Static,relative,absolute或者是浮动元素。
c 父元素position属性为或absohite或fixed
此时父元素是绝对定位，其float属性是无效的。但子元素的position属性可以是static,relative,absolute或者是浮动元素。
2）同级元素间的定位
同级元素间使用不同的定位方式时，可以使用left,top,right,bottom,margin等属性来调整他们之间的位置,如果有重叠的元素,z-index可以调整重叠元素的重叠层次,但该属性仅能在已定位的元素上奏效,即当元素的position属性为、tatic时z-index属性是无效的。

在DIV+CSS网页布局方式中元素定位是比较晦涩的方面,即使有经验的CSS开发人员也会遇到一些问题。本文“《一步一步跟我学PHP》第十二讲：盒子的定位方式”试图针对CSS定位的三种基本机制和四种定位方式进行一些深人的分析，使DIV+CSS网页布局中的定位技术更容易被理解和应用。