码迷,mamicode.com
首页 > 其他好文 > 详细

有几种定位方式?分别是如何实现定位的?参考点是什么?使用场景是什么?

时间:2020-07-05 21:23:39      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:osi   边框   ati   oat   参考   基础   频繁   head   属性   

CSS 有三种基本的定位方式:文档流、浮动和定位。

  • 文档流(normal flow): 文档流是所有元素布局的基础,作为从左到右、从上到下的布局方式,这是最常用的一种排版布局方式。

  • 浮动(float):float:left/right;浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。适用于实现文字环绕图片和多列布局。

  • 定位(position)有以下四种方式:

定位方式实现方式使用场景
static 默认布局,按照文档流定位; 默认布局;
relative 相对于元素自身正常位置进行定位,元素在文档流中仍占据原来空间,只是表现出来的位置会相对原来的位置偏移; 适用于层叠效果;
absolute 绝对定位,相对于有定位属性的第一个父元素偏移,absolute定位元素会脱离文档流; 适用于小区块的布局使用频繁
fixed 相对浏览器窗口定位,设置的偏移属性,是相对于浏览器窗口的位置。 适用于广告等意图一直出现在用户眼前的信息。

有几种定位方式?分别是如何实现定位的?参考点是什么?使用场景是什么?

标签:osi   边框   ati   oat   参考   基础   频繁   head   属性   

原文地址:https://www.cnblogs.com/qinglaoshi/p/13251613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!