MDN是一個權威且維護及時的Web技術開發文檔網站，其中對于CSS布局的介紹也是詳細而且實用。在實際開發中，經常會用到CSS布局，這里介紹一些MDN上的CSS布局技巧。

/* 等高布局 */
.container {
display: table;
table-layout: fixed;
height: 100%;
}
.item {
display: table-cell;
vertical-align: top;
}
/* 圣杯布局 */
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.content {
flex: 1;
}
.left,
.right {
width: 200px;
}
/* 雙飛翼布局 */
.container {
display: flex;
width: 100%;
height: 100%;
}
.wrap {
flex: 1;
}
.left,
.right {
flex-basis: 200px;
margin-bottom: -999em;
padding-bottom: 999em;
}
/* flex布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc((100% - 20px * 2) / 3);
margin-bottom: 20px;
}

上面四種布局分別是等高布局、圣杯布局、雙飛翼布局和flex布局。等高布局的原理是給容器元素設定表格屬性，每個子元素都是表格單元格；圣杯布局的原理是將布局分為三部分：中間主要內容、左邊輔助或菜單欄、右邊輔助或廣告欄；雙飛翼布局的原理是將左右兩個輔助欄與主要內容都放在一個容器里，并利用負邊距和padding屬性來固定寬度；flex布局則是將父容器設置為彈性容器，并設置子元素等分或根據需求自適應。

以上這些布局技巧是我們平時開發中經常用到的，學會靈活使用這些技巧可以幫助我們更高效地完成布局工作。