品字布局是一種常用的網頁布局方式，特點是將內容分為上下兩個區域和左右兩個區域。在CSS中，品字布局可以通過定位、浮動、flex等方式實現。

/*使用絕對定位實現品字布局*/
.container{
position: relative;
height: 100%;
}
.top{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
}
.left{
position: absolute;
top: 40%;
left: 0;
width: 30%;
height: 60%;
}
.right{
position: absolute;
top: 40%;
right: 0;
width: 70%;
height: 60%;
}
/*使用浮動實現品字布局*/
.top{
height: 40%;
float: left;
width: 100%;
}
.left{
width: 30%;
height: 60%;
float: left;
}
.right{
width: 70%;
height: 60%;
float: right;
}
/*使用flex實現品字布局*/
.container{
display: flex;
flex-direction: column;
height: 100%;
}
.top{
flex: 1;
}
.bottom{
display: flex;
flex: 1;
}
.left{
flex: 1;
}
.right{
flex: 3;
}

以上是使用CSS實現品字布局的三種方法，分別使用了絕對定位、浮動和flex布局。根據實際情況選擇合適的方法可以使布局更加靈活和穩定。