設(shè)計(jì)一個(gè)滿(mǎn)屏品字布局經(jīng)常會(huì)出現(xiàn)在前端的面試或是筆試題目中拨匆，需要對(duì)CSS能夠靈活的運(yùn)用珊随。首先，這里面涉及到的相關(guān)知識(shí)點(diǎn)有：
1.元素的水平居中：
使用margin:0 auto;可以水平居中；
使用text-align:center;給父元素設(shè)置使其行內(nèi)元素水平居中堂淡。
2.元素相對(duì)窗口定位：
使用position:fixed;固定定位教馆，元素總是根據(jù)瀏覽器的窗口進(jìn)行定位逊谋；
使用position:absolute;絕對(duì)定位；
使用body和html的width和height屬性填充窗口土铺。
3.元素左右定位：
使用float左右浮動(dòng)胶滋；
使用position:absolute;絕對(duì)定位進(jìn)行左右定位。
下面用兩種方式進(jìn)行展示：
方式一：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品字布局</title>
<style>
* {margin: 0;padding: 0;}/* 去除所有元素默認(rèn)的內(nèi)外邊距的值 */
html, body {height: 100%;}/* 默認(rèn)HTML悲敷，body的高度為0究恤，為其設(shè)置高度以使后面的div可以用百分比設(shè)置高度 */
.header {height: 50%;width: 50%;background-color: rgb(255,2545,167);margin: 0 auto;}
.main {height: 50%;width: 100%;}
.main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);}
.main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);}
</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%;}/* 默認(rèn)HTML，body的高度為0后德，為其設(shè)置高度以使后面的div可以用百分比設(shè)置高度 */
.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>
圖片發(fā)自簡(jiǎn)書(shū)App
個(gè)人前端學(xué)習(xí)筆記均為原創(chuàng)部宿。
首發(fā)CSDN： Freya_yyy的博客 。歡迎交流和指導(dǎo)瓢湃。
我是木風(fēng)理张，愿你遇見(jiàn)美好！
