CSS-定位的简介-相对定位-绝对定位

Posted 2021-12-18 by xiongmao; tagged with CSS相对定位 , CSS绝对定位 , CSS定位 , 包含块

　 top

  bottom
  left
  right

绝对定位
　-position:absolute
　-绝对定位的特点
　　1.不设置偏移量不会发现变化
　　 2.开启绝对定位后，元素会从文档流脱离
　 　3.绝对定位会使元素提示一个层次
　　 4.绝对定位会改变元素的性质，内行变成块，块的宽高被内容撑开
　　 5.绝对定位元素是相对于其包含块进行定位的
包含块
　-正常情况下
　　包含块就是离当前元素最近的祖先元素

-绝对定位的包含块
　　　包含块就是离它最近的开启了定位的祖先元素
　　　　　　如果所有的祖先元素都没有开启定位则根元素就是它的包含块
　　-html（根元素，初始包含块）

绝对定位的居中
水平居中
left + margin-left + border-left + padding-left + width + padding-right +border-right + marght-right +right
　　当我们开启了绝对定位后
　　水平方向的布局等式就需要添加left 和right 两个值
　　　　　此时规则和之前一样只是多添加了两个值：
　　　　　　　当发生过渡约束：
　　　　　　　　　如果9个值中没有auto 则自动调整right值以使等式满足
　　　　　　　　　如果有auto，则调整auto的值以使等式满足
可设置auto值
margin width left right

-因为left 和right 的默认值为auto，所以如果不指定left 和right
则等式不满足时，会自动调整这两个值
所以是需要设置
left:0; right:0;margin:auto;

垂直方向布局的等式也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height +right
top:0; buttom:0;margin:auto