position 、float 和 display 的取值和各自的意思和用法

2022-03-12T17:25:44

position

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

float

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

display

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

定位机制

上面三个属性都属于 CSS 定位属性。CSS 三种基本的定位机制:普通流、浮动、绝对定位。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »