CSS的position/float/display

时间:2022-09-19 08:56:07

一、position

  1. position属性取值:static(默认)、relative、absolute、fixed、inherit。
  2. postision:static;始终处于文档流给予的位置。它可以快速取消定位,让top,right,bottom,left的值失效。在切换的时候可以尝试这个方法。除了static值,在其他三个值的设置下,z-index才会起作用。(确切地说z-index只在定位元素上有效)
  3. position:relative和 absolute都可以用于定位,区别在于前者的div还属于正常的文档流,后者已经是脱离了正常文档流,不占据空间位置,不会将父类撑开。定位原点 relative是相对于它在正常流中的默认位置偏移,它原本占据的空间任然保留;absolute相对于第一个position属性值不为static 的父类。所以设置了position:absolute,其父类的该属性值要注意,而且overflow:hidden也不能乱设置,因为不属于正常文档 流,不会占据父类的高度,也就不会有滚动条。
  4. position:fixed;旧版本IE不支持,却是很有用,定位原点相对于浏览器窗口,而且不能变。常用于header,footer,或者一些固定的悬浮div,随滚动条滚动又稳定又流畅,比JS好多了。fixed可以有很多创造性的布局和作用,兼容性是问题。
  5. position:inherit。规定从父类继承position属性的值,所以这个属性也是有继承性的,@一丝yisi 前辈注意下。但是任何版本的IE都不支持该属性值。

二、float

  1. float属性取值:none(默认)、left、right、inherit。
  2. float:left(或right),向左(或右)浮动,直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流,会被正常文档流内的块框忽略。不占据空间,无法将父类元素撑开。
  3. 任何元素都可以浮动,浮动元素会生成一个块级框,不论它本身是何种元素。因此,没有必要为浮动元素设置display:block。
  4. 如果浮动非替换元素,则要指定一个明确的width,否则它们会尽可能的窄。(什么叫替换元素?根据元素本身的特点定义的, (X)HTML中的img、input、textarea、select、object都是替换元素,这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。)

三、display

  1. display属性取值:none、inline、inline-block、block、table相关属性值、inherit。
  2. display属性规定元素应该生成的框的类型。文档内任何元素都是框,块框或行内框。
  3. display:none和visiability:hidden都可以隐藏div,区别有点像absolute和relative,前者不占据文档的空间,后者还是占据文档的位置。
  4. display:inline和block,又叫行内元素和块级元素。表现出来的区别就是block独占一行,在浏览器中通常垂直布局,可以用margin来控制块级元素之间的间距;而inline以水平方式布局,垂直方向的margin和padding都是无效的,大小跟内容一样,且无法设置宽高。inline就像塑料袋,内容怎么样,就长得怎么样;block就像盒子,有固定的宽和高。
  5. nline-block就介于两者之间。
  6. table相关的属性值可以用来垂直居中,效果一般。