一个满屏品字布局怎么设计？

最新推荐文章于 2025-05-22 22:11:18 发布

sjinsa

最新推荐文章于 2025-05-22 22:11:18 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： CSS常见面试题

本文链接：https://blog.youkuaiyun.com/sjinsa/article/details/70903940

CSS常见面试题专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何设计一个满屏品字布局，详细讲解了三种关键技术：元素水平居中对齐，包括margin对齐、left:50%和text-align:center的方法；元素对相对窗口定位，推荐使用fixed定位；以及元素左右定位，通过float和绝对定位实现。通过这些技术的灵活运用，可以创建出理想的满屏品字布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要用到技术

1. 元素水平居中对齐

1) 使用margin对齐(推荐)

2) 使用left：50%

3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center
2. 元素对相对窗口定位

1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位

2) 使用absolute定位

3) 使用html和body的width和height填?这个窗口
3. 元素左右定位

1) 使用float左右浮动

2) 使用绝对定位进行左右定位（推荐）
第一种方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>满屏品字布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            height: 100%;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/
        }       

        .header{
            height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/
            width: 50%;     
            background: #ccc;           
            margin:0 auto;
        }

        .main{
            width: 100%;
            height: 50%;
            background: #ddd;
        }

        .main .left,.main .right{
            float: left;/*采用float方式，对元素进行左右定位*/
            width:50%;/*此步解决元素相对窗口的定位问题*/
            height:100%;/*此步解决元素相对窗口的定位问题*/
            background: yellow;
        }

        .main .right{
            background: green;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

效果如下：
这里写图片描述
第二种方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>满屏品字布局</title>
    <style type="text/css">
        body{  
          height: 1200px;  
      }  
      .main {  
          position: fixed;  /*此步解决元素相对窗口的定位问题*/
          left: 0;  
          top: 0;  
          height: 100%;  
          width: 100%;  
      }  
      .wrapper-up {  
          height: 50%;  
      }  

      .wrapper-down {  
          height: 50%;  
          position: relative;  
      }  
      .div-square-up {  
          width: 50%;  
          margin: 0 auto;  
          border: 2px solid red;  
          height: 96%;  
          box-sizing: border-box;  
      }  

      .div-square-left {  
          position: absolute;  /*此步解决元素左右定位问题*/
          left: 0;  
          width: 48%;  
          height: 100%;  
          box-sizing: border-box;  
          border: 2px solid red;  
      }  

      .div-square-right {  
          position: absolute;   /*此步解决元素左右定位问题*/
          right: 0;  
          width: 48%;  
          height: 100%;  
          border: 2px solid red;  
          box-sizing: border-box;  
      }  
    </style>
</head>
<body>
    <div class="main">  
         <div class="wrapper-up">  
           <div class="div-square-up"></div>  
         </div>  
         <div class="wrapper-down">  
           <div class="div-square-left"></div>  
           <div class="div-square-right"></div>  
         </div>  
    </div> 
</body>
</html>