Vue 进阶(幺肆贰):CSS- 静态定位,相对定位,绝对定位,固定定位的用法和区别详解
一、前言
CSS
提供了三种基本的定位机制:普通流、浮动和固定定位;通过这三种方式可实现页面的排版布局。
二、普通流
普通流中元素的位置由元素在 (X)HTML
中的位置决定:
块级元素独自占一行,在文本流中从上到下一个接一个地排列;
行内元素在一行中并排排列,遇到父元素的边沿会换行继续排列;
三、浮动
浮动会让元素脱离标准文档流,不再占原来的空间,可以让多个块级元素并排显示。
四、固定定位
固定定位是将元素定在某个位置,定位元素的层级要高于浮动元素;
通过定位可以让元素相对于其正常位置进行偏移出现在别的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置;
定位可以将元素放置在页面中的任何位置,这是标准文档流和浮动无法实现的。
CSS
通过 position
属性设置定位方式,其对应的属性值如下:
绝对定位和固定定位会改变元素的 display
属性,默认将元素转为行内块元素。
五、static 静态定位
按照标准文档流的规则来放置元素,基本不用;
六、relative 相对定位
相对于自己在标准文档流中的位置进行定位;原来的位置仍占有空间;
相对定位示例:
七、absolute 绝对定位
通过设置定位的父级元素或祖先元素来进行定位:
如果父元素或祖先元素没有定位则相对于页面文档进行定位;
绝对定位的元素脱离标准文档流,不再占有原来的位置;
使用绝对定位的元素父元素一般设置为相对定位;
绝对定位示例:
八、fixed 固定定位
相对于浏览器可视窗口进行定位,位置与父元素无关;
会将元素固定在窗口的某个位置不随页面的滚动而改变;
想实现元素的固定定位,只设置定位方式还是不够的,需要结合 CSS
中的方位属性来实现定位。
属性单位可以是 px、cm、%
等;使用时一般是水平方向的属性(left、right
)与垂直方向的属性(top、bottom
)结合使用;top
与 bottom
不要同时使用,left
与 right
不要同时使用。
九、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/bb0c751365963b44c0e91540b】。文章转载请联系作者。
评论