回顾知识点

（1）元素的水平居中

使用margin:0 auto;可以水平居中；

使用text-align:center;给父元素设置使其行内元素水平居中。

1) 使用margin对齐(推荐)

2) 使用left：50%

3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center

（2）元素相对窗口定位

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

2) 使用absolute定位

3) 使用body和html的width和height属性填充窗口

（3）元素左右定位：

1) 使用float左右浮动

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

(4) flex布局

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性

支持（谷歌21+ opera12.1+ firefox 22+ Safari 6.1+ ie 10+）

实现代码

第一种方式

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品字布局</title> 
<style>
 * {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */
 html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
 .header {height: 50%;width: 50%;background-color: red;margin: 0 auto;}
 .main {height: 50%;width: 100%;}
 .main .left {float: left;width: 50%;height: 100%;background-color: blue;}
 .main .right {float: left;width: 50%;height: 100%;background-color: black;}
</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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品字布局</title> 
<style>
 * {margin: 0;padding: 0;}
html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
 .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;}
 .header {height: 50%;}
 .header .div-up {width: 50%;height: 100%;background-color: rgb(255,2545,167);margin: 0 auto;}
 .main {height: 50%;position: relative;}
 .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);}
 .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>
</head>
<body>
<div class="pinzi-flex">
<div class="header">
 <div class="div-up"></div>
</div>
<div class="main">
 <div class="div-left"></div>
 <div class="div-right"></div>
</div>
</div> 
</body>
</html>

第三种方式

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>品字布局</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 html,
 body {
 height: 100%;
 }
 .pinzi-flex {
 display: flex;
 flex-direction: column;
 justify-content: center;
 width: 100%;
 height: 100%;
 }
 .header {
 height: 50%;
 background-color: red;
 width: 50%;
 align-self: center;
 }
 .main {
 height: 50%;
 display: flex;
 }
 .main .div-left {
 width: 50%;
 height: 100%;
 background-color: yellow;
 }
 .main .div-right {
 width: 50%;
 height: 100%;
 background-color: black;
 }
 </style>
</head>
<body>
 <div class="pinzi-flex">
 <div class="header">
 </div>
 <div class="main">
 <div class="div-left"></div>
 <div class="div-right"></div>
 </div>
 </div>
</body>
</html>

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

回顾知识点

实现代码