CSS

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

xiongmao
2021-12-18 / 0 评论 / 112 阅读 / 正在检测是否收录...

  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

0

打赏

海报

正在生成.....

评论

博主关闭了所有页面的评论