HTML盒模型绝对定位

最新推荐文章于 2025-12-22 14:05:40 发布

原创最新推荐文章于 2025-12-22 14:05:40 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

通过CSS绝对定位技术，我们可以精确控制每个元素的位置，创建出复杂的图形效果，而不需要使用任何图像资源。

运行结果图：

示例代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
         
      #face{
            width: 500px;
            height: 500px;
            background-color: rgb(67, 63, 63);
            position: absolute;
            left: 600px;
            top: 100px;
        }

      #left_eye{
                width: 50px;
                height: 50px;
                background-color: rgb(149, 137, 137);
                position: absolute;
                left: 100px; 
                top: 100px; 
          }  
      
      #right_eye{
            width: 50px;
            height: 50px;
            background-color: rgb(149, 137, 137);
            position: absolute;
            left: 350px; 
            top: 100px; 

          } 

      #mouse{
            width: 300px;
            height: 60px;
            background-color: white;
            position: absolute;
            left: 100px; 
            top: 300px; 

          } 

          #nose1{
            width: 60px;
            height: 60px;
            background-color: red;
            position: absolute;
            left: 225px; 
            top: 175px; 
          } 

          #nose2{
            width: 30px;
            height: 30px;
            background-color: rgb(234, 236, 71);
            position: absolute;
            left: 15px; 
            top: 15px; 
          }

          p{
            text-align: center;
          }

    </style>

  </head>

  <body>

    <div id="face">
        <div id="left_eye"></div>
        <div id="right_eye"></div>
        <div id="mouse"><p></p></div>
        <div id="nose1">
          <div id="nose2"></div>
        </div>
        
    </div>

  </body>
</html>