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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sjinsa/article/details/70903940

需要用到技术

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>

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页