CSS对位置属性用法的详细解释(绝对定位和相对定位的混淆)

CSS对位置属性用法的详细解释(绝对定位和相对定位的混淆)
不太长,忘了位置属性的用法,造成一只手一开始就犯了初学者的错误,那就是绝对和相对的使用。

首先,看一下这两个属性值的官方解释:

位置属性值的含义:

静态

元素框架通常是生成的,块级元素生成一个矩形框,它作为文档流的一部分,内部元素创建一个或多个行框,放置在父元素中。

相对

元素框偏移一定距离。元素保持在其位置的形状,和原来的空间仍然。

绝对的

元件盒是完全脱离文档流中删除,相对其块。包块可以在文件或初始包含块的另一个元素,元素原本占据在正常文档流会关闭,如果元素不存在的空间。一个块级盒子后该元素的位置产生的,不管它产生在正常流的帧的类型

固定的

元素框的表示类似于将位置设置为绝对值,但块是窗口本身。

事实上,默认静态和固定两种情况很容易识别,而相对和绝对容易混淆。

更简单地说,绝对删除文档流中占据的位置,并将其与第一个非静态位置父类进行本地化。一般来说,我们使用顶部和左边来控制位置,这是绝对位置。

相对位置是根据文档流的原始位置(即,未设置位置属性)移动的位置。

因此,当我们需要使移动元素的一些通用元素不因父的变形而改变,因为浏览器窗口的大小发生变化时,我们将父元素一般定义为相对的,而子元素被定义为绝对的,也就是说,绝对是第一个非静态元素定位的父作为参考对象。

我们通常把内容放在中间,让空白:0个自动的,这样就可以了。

至于顶部和边距的差异,有些人可能不知道什么时候,通常用来实现边距定位,实际上这是错误的,它是边距,是占的内容,经常使用这个来勉强定位会使其他元素的位置发生变化或者引起其他的影响。但这种效果不是我们想要的。

因此,识别绝对和相对的区别和使用,以及左上角的右下角来定位它可以减少误差。

顺便说一下,在CSS3,有许多新的属性。他们有一段时间没见面了。背景尺寸:封面是临时记录的。这是自己的还是以后的我没有这个属性提示时我用DW8;

此外,CSS3具有很多属性,IE不支持,即使是9甚至10以上,它可以兼容的,所以我们应该重视浏览器的判断的时候写的,而设计不同的风格根据不同的浏览器。

除IE外均可识别
所有的IE辨认
唯一可以确定的IE6
IE6下IE6版本可以识别
IE6和超过IE6版本可以识别
只有IE7可以识别
IE7和低于IE7版本可以识别
IE7和IE7以上版本可以识别
只有IE8可以识别
只有IE9可以识别

关于位置的使用以上的CSS属性的详细解释(绝对定位和相对定位的混乱)是小编分享给你的所有内容,希望能给大家一个参考,我希望你能支持更多。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部