绝对定位对元素宽度的影响

2020-11-27 来源：个人技术集锦

一、问题来源自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度div#main并不是我理想中六张图片宽度的总和，原来是我没有显式设置这个容器div#main的宽度。但是问题来了，没有显式地设置容器宽度，大家可能就会感性的认为容器的宽度不应该是被其内容填充而适应的么？根据前面所述的现象，答案自然是否定的，也可以说不是所有情况均是如此，因为实际上定位对容器的宽度也是具有影响的。下面讨论一下绝对定位元素的大小与放置情况的联系。二、包含块首先我们先回顾一下包含块（定位上下文）的基本概念： 1.初始包含块（根元素的包含块）由用户代理确定。 2.浮动元素包含块定义为最近的块级祖先元素。 3.相对定位或静态定位元素包含块由最近的块级框、表单元格、或行内块框祖先元素（任何类型）内容边界构成。 4.绝对定位元素包含块设置为最近的定位不是static的祖先元素（任何类型）的边框界定（对块级父元素）或内容边界界定（对行内父元素）。三、宽度与偏移一般的，元素的大小和位置取决于其包含块。定位就是元素各外边距边界相对于其包含块相应边（内边界与边框相邻边）进行偏移，影响的是元素的所有一切（外边距、边框、内边距、内容）都会移动。故对于一个定位元素有如下等式（后边的计算均基于该式）： left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块的width （式1-1）据此，在未定义元素的宽度width和高度height时，其值大小都会受到定位影响。对于定位元素来说，是否需要设置其宽度高度应根据情况确定。考虑以下几种情况其宽度高度各是多少的确定规则： 1.如果将偏移属性top，left，bottom，right都进行了确定，而未设置外边距，内边距和边框的时候，是否显式设置宽度高度，其值都是由偏移属性确定的；反之若设置了外边距或内边距（auto也算），边框时，高度宽度就是其显式设置值，未显式设宽高的仍由偏移属性确定。 2.对于非替换元素水平轴行为： 1）如果left，width，right都为auto，且没有设置内外边距，边框，则经过计算元素左边位于其静态位置（从左往右读），width“恰当收放”，根据上述等式right为余下的水平距离； 2）当等式中所有值为固定值时，若元素“过度受限”则right会根据上式重置； 3）当上述等式中只有一个属性值为auto时，元素“过度受限”时就会重置这一属性值以满足等式； 4）垂直轴规则类似，但要注意只有top可以取静态位置，bottom做不到。 3.对于替换元素（注意这里没有“恰当收放”的概念，因为替换元素有固有宽高）： 1）先看其width（height）是否显式声明，显式声明则为该值，否则由元素内容实际大小（宽高）决定； 2）再看left，top若为auto则替换为静态位置； 3）再看如果left和bottom值如果还为auto，则令margin的auto都置0，若未被置0就设置为左右相等，上下相等； 4）在此之后如果只剩下一个auto值，则同非替换元素类似，根据等式重置该auto值。 5）当元素“过度受限”时，与非替换元素处理一样，用户代理会忽略right（从左向右读）和bottom。

显示全文

全部栏目

绝对定位对元素宽度的影响