html的四種區域性佈局

第一種實現方式：浮動佈局

將左右的div寬度設為300px，分別左右浮動，中間盒子不設寬度。注意：先寫右邊盒子，再寫中間盒子，否則先渲染中間盒子，中間盒子會佔滿該行剩下的寬度，右邊盒子只能換行顯示，就會出現下面的情況。

第二種：絕對定位（position:absolute）

設定父盒子position:relative（相對定位），三個子盒子position：absolute，左盒子left:0，右盒子right:0中間盒子left:300pxright:300px。

第三種：flex佈局

父盒子 display:flex，左右盒子設定寬度：300px，中間盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考慮元素尺寸自由伸縮。

第三種：flex佈局

父盒子 display:flex，左右盒子設定寬度：300px，中間盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考慮元素尺寸自由伸縮。