一个满屏 品 字布局 如何设计?

需要用到的技术

1.     元素水平居中对齐

1)        使用margin对齐(推荐)

2)        使用left：50%

3)        使用text-align

2.  元素对相对窗口定位

1)        使用filxed（推荐）

2)        使用absolute定位

3)        使用html和body的width和height填?这个窗口

3.     元素左右定位

1)        使用float左右浮动

2)        使用绝对定位进行左右定位（推荐）

具体实现的代码

html

1 <div class="main">
2  <div class="wrapper-up">
3    <div class="div-square-up"></div>
4  </div>
5  <div class="wrapper-down">
6    <div class="div-square-left"></div>
7    <div class="div-square-right"></div>
8  </div>
9 </div>   

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;
      }