设置top:0;right:0;bottom:0;left:0;的两种作用

本次记录原因

在处理如下文字效果时,在过程中使用了下面的代码语法,感到疑惑就进行了测试验证;

文字效果

代码写法

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

对以上代码感到疑惑,就去查找了相关内容,总结出其的两种作用:

  1. 让明确宽高的盒子水平垂直居中
  2. 让无宽高的盒子填充父容器

实验后效果图

实验效果

实验代码如下:




    
    
    
    Document
    


    

例子结合了两种作用对top:0;right:0;bottom:0;left:0;进行实验

你可能感兴趣的:(设置top:0;right:0;bottom:0;left:0;的两种作用)