zoukankan      html  css  js  c++  java
  • 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的值,包括负数。一个元素的后代可能在钙元素的上面或下面,但它们与其祖先元素都归为一组。

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

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

  • 相关阅读:
    高阶函数 练习
    斐波那契数列(Fibonacci sequence)递归函数
    顺序循环队列的基本操作(二)
    顺序循环队列基本操作(一)
    顺序栈的基本操作
    双链表的插入删除
    头插法实现链表逆置
    带头结点单链表的基本操作
    顺序表基本操作
    实现原数组列变成行,再将每一行首尾倒置
  • 原文地址:https://www.cnblogs.com/dingzibetter/p/6168552.html
Copyright © 2011-2022 走看看