html的标签位置属性（学习笔记）

最新推荐文章于 2024-07-27 10:56:19 发布

忆水思寒

最新推荐文章于 2024-07-27 10:56:19 发布

阅读量1.3k

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/chehec2010/article/details/85221692

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

div：定义位置有两种方式：一种是使用相对位置，一是使用绝对位置。

绝对定位有两个属性：left和top，分别是距离网页左边和网页顶部的绝对位置。借助style属性，按照如下的格式进行设置：

style = "position:absolute;left:距离左边距离;top:距离顶部距离"

例如：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <div name = "mydiv" id="mydiv" style="position:absolute;left:200px;top:200px">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     JavaScript
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </div>

相对定位同样也是两个属性：left top

style="position:relative;left:距离左边距离;top：距离顶部距离"

除了定义位置，还能够定义尺寸大小，定义尺寸大小需要用到width和height属性，格式如下：

style="width:宽度;height:高度"

例如：


 
 
   
   
    
    
   
   
   
   
    
     
     
     <div style="position:relative;left:200px;top:100px;width:400px;height:50px">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
              div 层
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </div>

例如：

如何让div居中：


 
 
   
   
    
    
   
   
   
   
    
    
     
     div使用绝对布局，设置
     
     margin
     
     :auto;并设置
     
     top、
     
     left、
     
     right、
     
     bottom的值相等即可，不一定要都是0。
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     {
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     text-align: center; 
     
     /*让div内部文字居中*/
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     background-color: 
     
     #fff;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     border-radius: 
     
     20px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     width: 
     
     300px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     height: 
     
     350px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     margin: auto;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     position: absolute;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     top: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     left: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     right: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     bottom: 
     
     0;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     注意：
     
     margin: 0 
     
     auto； 就是上下距离为0， 
     
     auto就是左右自适应两边距离一样
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     margin
     
     :auto；效果就是左右自适应两边距离一样，效果是一样的 ,水平居中

例如：


 
 
   
   
    
    
   
   
   
   
    
    
     
     仍然是绝对布局，让
     
     left和
     
     top都是50%，这在水平方向上让
     
     div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用
     
     transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     {
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     text-align: center;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     background-color: 
     
     #fff;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     border-radius: 
     
     20px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     width: 
     
     300px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     height: 
     
     350px;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     position: absolute;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     left: 
     
     50%;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     top: 
     
     50%;
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     transform: 
     
     translate(-
     
     50%,-
     
     50%);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }