CSS布局——定位概念理解（一）

为什么80%的码农都做不了架构师？>>>   

#positioning概念理解

##CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

##定位体系详解 框在布局时，根据三种定位体系定位。分别是，常规流、浮动和绝对定位。 Normal flow\Floats\Absolute positioning

参见：http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

所以说浮动元素是脱离常规流的。但文档流和文本流这个概念本身不清楚，或者说没有这样的说法。有的网站上说是脱离文档流的，但有人实践得出并没有脱离文档流。

##position 属性值的含义：

###static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 ###relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 ###absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 ###fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

##文档流的理解 CSS2.1标准里面Visual Formatting那一章有讲元素分为三种，floats、absolute positioned还有normal flow。

##无名块框 块级元素的文本行会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

• 通过display可以改变生成的框的类型，比如块级元素可以生成行内框，但它依然是块级元素，只是表现出行内元素的行为。
• display:none与visible:hidden的区别 display设为为none，该框及其所有内容就不再显示，不占用文档中的空间；但hidden虽然隐藏了元素内容，但占用的文档空间依然存在。 ##clear属性 ###定义和用法 clear属性规定元素的哪一侧不允许其他浮动元素。 ###说明 clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 ###取值 left right both none inherit 无继承性 默认为none

转载于:https://my.oschina.net/sheila/blog/398313