網站建設

彈性盒模型布局網頁。彈性盒布局模型是(shì)CSS3規範中提出(chū)的(de)一(yī / yì ／yí)種新的(de)布局方式。使用該模型,可以(yǐ)很輕松地(dì / de)創建自适應浏覽器窗口的(de)布局，可以(yǐ)解決浮動定位等方法難以(yǐ)解決的(de)問題（李東海，HTML5+CSS3從入門到(dào)精通：清華大(dà)學出(chū)版社，2017；曾祥利，柴炜嘉，響應式布局中栅格系統和(hé / huò)彈性盒子(zǐ)的(de)比較：産業與科技壇，2015），爲(wéi / wèi)網頁設計提供了(le／liǎo)更加靈活的(de)操作方法。

要(yào / yāo)開啓彈性盒模型，隻需要(yào / yāo)設置父盒子(zǐ)的(de)display屬性值爲(wéi / wèi)box（或者inline—box）即可，實現父容器裏面子(zǐ)元素的(de)排列方式、順序、方向等問題。比如不(bù)使用浮動和(hé / huò)定位的(de)情況下實現塊級元素的(de)水平排列，可以(yǐ)把父元素的(de)寬度按照比例分配子(zǐ)元素且自适應高度。但是(shì)部分浏覽器還不(bù)能很好的(de)支持CSS3的(de)屬性,在(zài)書寫CSS代碼的(de)時(shí)候,需要(yào / yāo)明确目标浏覽器前綴。

2011年之(zhī)後，display屬性值改設爲(wéi / wèi)flex（或者inline-flex），大(dà)部分新版浏覽器基本都不(bù)用使用前綴了(le／liǎo)，這(zhè)也(yě)是(shì)所謂的(de)标準語法或新版本語法。但是(shì)display:flex不(bù)能完全替代display:box。