小编给大家分享一下CSS定位位置的多种方式以及不同方式之间的区别是什么,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
,在进行前端布局的时候,我们经常会用到定位,定位是CSS中重要的一部分,定位是用定位属性位置来进行定位的,位置的值也有很多,具体它有如下几个属性值。常见的属性有如下所示:
<强>值描述
绝对,生成绝对定位的元素,相对于静定位以外的第一个父元素进行定位。元素的位置通过“left"“top",“right"以及“bottom"属性进行规定。
固定,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过“left"“top",“right"以及“bottom"属性进行规定。
相对,生成相对定位的元素,相对于其正常位置进行定位,因此,“左:20“;会向元素的左位置添加20像素。
静态,默认值。没有定位,元素出现在正常的流中(忽略顶部,底部,左、右或者z - index声明)。
继承规定应该从父元素继承位置属性的值。
首先,我们这里用的是标准盒子模型来讲,所以大家在理的时候必需把它看成一个盒子或者一个框。我们先来学习第一个默认参数静态的。
静态:静态定位是位置的默认值,元素框正常生成,也就是没有定位时的正常显示。
绝对:绝对定位
元素从文档流删除,并相对于包含块定位。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。
这里的包含块是指:最近的位置值不是静态的祖先元素(块级或行内),一般会指定一个元素作为绝对定位元素的包含块,将其位置设置为相对而且没有偏移。
固定:固定定位
元素脱离文本流,从普通文本中删除,并相对于浏览器视窗定位,因此不随文档滚动而移动。元素在原本的空间关闭。元素定位后生成一个块级框,不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。包含块:浏览器视窗。
相对:相对定位。相对定位,最常见的使用方式有如下两种:
使用方法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。
使用方法二:把一个元素设置为位置:相对;可以使该元素的子元素相对该元素绝对定位。
绝对/固定和浮动对比
相同之处:元素都会脱离文本流,从普通文本中删除,但是依旧会影响布的局,都会生成一个块级框,无论原来是不是块级元素。
不同之处:浮动的包含块是最近的块级祖先元素。
设置偏移属性:顶端/底/左/右,初始值是汽车。
采用位置定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。在使用的时候需要注意的是:定义偏移量的元素应为位置值不是静态的元素。
有时也需要定义宽度和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据宽度和左属性定义左右,根据顶和高度属性定义上下。
CSS中的别一个属性。那就内容溢出:<强>溢出
通常内容溢出属性有如下几个值:
溢出:可见/隐藏/滚动/汽车/继承
溢出初始值是可见的。
溢出就是咱们常用在:如果一个元素的大小固定,但是其内容放不下,就会导致溢出.overflow控制溢出部分的可见(可见),不可见(隐藏),滚动可见(滚动)。
元素可见性可见性:可见/隐藏/崩溃/继承,初始值是可见的。
看完了这篇文章,相信你对CSS定位位置的多种方式以及不同方式之间的区别是什么有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
