CSS--绝对定位解析

position : absolute;
left : 10px || 10% || auto
默认值:auto
left right的百分数相对于包含块的宽度
top bottom 相对于包含块的高度
定位是相当于最近的非static祖先元素或者根元素
在left right都声明的情况下:
计算公式 left+margin-left+border+width+padding+margin-right+right=包含块width+padding

下面只深入解析left right都声明的情况

①定位元素没指定宽度,指定了left和right,没指定margin
元素在包含块水平居中,width被拉伸

②定位元素没指定宽度,指定了left和right,指定了margin
如果左右margin都为auto,和第一种情况是一样的,如果有一个为auto,另一个为某个值,为auto的会为0,width拉长。

③定位元素指定了宽度,指定了left和right,没指定margin
right会失效,重新计算

④定位元素指定了宽度,指定了left和right,指定了margin
如果margin都为auto,两margin会拉伸并相等,让等式满足。
如果只有一个为auto,为auto的会自动拉升(必须显示声明)
如果只有一个margin显示声明为定值,另一个没声明,right会重新计算。
如果只有一个为auto,另一个没声明,margin会拉伸以满足等式。

综上 ,声明了width的,width永不会变,没声明width,width会尽量变现得长一点。

垂直方向和水平规则是一样的。
过度受限时,会重新计算bottom.
left right top 为auto时是与其假设为静态时的位置对齐的。 bottom不行

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,524评论 1 89
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 7,045评论 0 7
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 400评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 798评论 0 2
  • - 在设置中间件的时候设置中间件:参数 - 在中间件的handle 方法中设置参数。然后就可以使用了
    搁浅_6a34阅读 151评论 0 0