10浮动和定位

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS允许浮动任何元素，从图像到段落再到列表，所有元素都可以浮动。float属性可以实现元素浮动，值：left|right|none|inherit。浮动元素会以某种方式将从文档的正常流中删除，不过它还是会影响布局（一个元素浮动时，其他内容会“环绕”该元素）。浮动元素周围的外边距不会合并。如果确实要浮动一个非替换元素，则必须为该元素声明一个width，否则，根据CSS规范，元素的宽度趋于0。none值用于放置元素浮动。

浮动元素的包含块是其最近的块级祖先元素。浮动元素会生成一个块级框。而不论这个元素本身是什么。

浮动元素会延伸，从而包含其所有后代浮动元素。

负外边距可能导致浮动元素移到其父元素的外面。还有一种方法可以让浮动元素超出其父元素的左右内边界：即浮动元素比其父元素更宽。

行内元素和浮动元素重叠时，行内元素完全覆盖浮动图像（包括背景、边框、内容和一切）。另一方面，块元素只是将其内容显示在浮动元素之上，但其背景和边框都在浮动元素之下。

float属性可以避免内容了流过浮动元素，值：left|right|both|none|inherit。要确保一个清除元素（设置clear属性的元素）的顶端与一个浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距。

position属性可以选择4种不同类型的定位，会影响元素框生成的方式，值：static|relative|absolute|fixed|inherit。static：元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative：元素偏移某个距离。absolute：元素框从文档流完全删除，并相对于其包含块定位。fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。对于一个非根元素，如果其position值是raletive或static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成。对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。

top,right,bottom,left位偏移属性，描述了距离包含块最近边的偏移，值<length>|<percentage>|auto|inherit,top和bottom相对于包含块的高度，right和left相对于包含块的宽度。正值会导致向内偏移，使边界朝着包含块的中心移动，而负值会导致向外偏移。当前开发的浏览器都是使用外边距边界来完成偏移的计算。可以用width属性和height属性来为定位元素指定一个宽度和高度。min-width和min-height属性可以为元素的内容区定义一个最小尺寸，值:<length>|<percentage>|inherit.max-width和max-height属性可以为元素的内容区定义一个最大尺寸。最小和最大属性的一个很大的好处是，可以相对安全地混合使用不同的单位。

当内容在元素中放不下时，可以用overflow属性控制溢出的情况，值：visible|hidden|scroll|auto|inherit.默认值visible表明，元素的内容在元素框之外也可见，这一般会导致内容超出其元素框，但不会改变框的形状。值为scroll时，元素的内容会在元素框的边界处剪裁，也就是说，溢出的部分将无法看到，不过还是有办法让用户得到这些额外的内容（如滚动条）。值为hidden时，元素的内容会在元素框的边界处剪裁，不过不会提供滚动接口使用户访问超出剪裁区域的内容。值为auto时，允许用户代理确定采用何种方式，不过都建议在必要时提供一个滚动机制。

当一个绝对定位元素的内容溢出其内容框，而且overflow设置为要求剪裁该内容，通过使用属性clip可以改变剪裁区域的形状，这不会改变内容区的形状，而只是改变将显示内容的区域形状，值：rect(top,right,bottom,left)|auto|inherit.rect(...)的值不是边偏移，而是距元素左上角的距离。可以设置负长度值，使得裁剪区延伸到元素框之外，不过内容只能超越下边界和右边界，不能越过上边界和左边界。rect(...)只接受长度单位和auto。

visibility属性可以控制元素的可见性，值：visible|hidden|collapse|inherit。值为hidden时，元素还在那里，只不过看不见它（而display：none，元素不仅不显示，还会从文档中删除，所以对文档布局没有任何影响）。可以将一个hidden元素的后代元素置为visible，这会使得后代元素正常出现，尽管其祖先元素（以及兄弟）是不可见的。

元素绝对定位时，会从文档流中完全删除。绝对定位元素的包含块是最近的position值不为static的祖先元素。元素绝对定位时，如果除bottom外某个任意偏移属性设置为auto，元素的这个边界会相对于其未定位前本来的边界位置对齐。

非替换元素假如左右外边距都设置为auto，而left、width和right不是auto，左右外边距会设置为相等的值。假如左右外边距都不为auto，用户代理会忽略right的值（从左向右读的语言中）。如果只有一个属性设置为auto，就会修改这个属性来满足给出的等式。垂直轴的规则也类似，但在垂直布局中，只有top可以取静态位置，处于某种原因，bottom做不到，另外，如果一个绝对定位元素的大小在垂直方向上过度受限，将忽略bottom。

非替换元素和替换元素的定位规则不大相同，因为替换元素有固有高度和宽度。从左向右的语言中，如果left为auto，要把auto替换为静态位置。如果值过度受限，用户代理会忽略right的值（对于从左边向右边读的语言）。

z-index属性可以改变元素相互覆盖的顺序。所有整数都可以用作为z-index的值，包括负数。一个元素的后代可能在钙元素的上面或下面，但它们与其祖先元素都归为一组。

固定元素的包含块是视窗。固定定位时，元素会完全从文档流中去除，不会有相对于文档中任何部分的位置。

相对定位通过使用偏移属性移动定位元素。当元素相对定位时，它会从其正常位置移走，不过，原来所占的空间并不会消失。

 

转载于:https://www.cnblogs.com/dingzibetter/p/6168552.html