聖盃佈局、雙飛翼佈局、flex佈局

在面試中，我們經常會遇到CSS中兩端寬度固定大小，中間自適應問題

問題：

   編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度爲100px，right寬度爲200px，main處在中間，寬度自適應

解決方法：

聖盃佈局

頁面DOM結構如圖：

設置外層div內邊距，使中間div寬度爲100%，將所有節點設置浮動方向爲left，利用margin-left負值將left元素拉到

父元素content起點，在設置相對定位將left拉到父元素padding起始處，同理right元素也是

雙飛翼佈局

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以形成三欄佈局。不同在於解決 「中間欄div內容不被遮擋」問題的思路不一樣。

頁面佈局如下

雙飛翼佈局不用設置外層父元素，主要設置在中間元素，設置center-content元素寬度100%，內層center1元素設置margin，其他就不多說，直接上style

Flex佈局

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性

頁面佈局：

CSS樣式：