css3伸縮布局實現三列固定

2021-07-02 22:10:44 字數 1372 閱讀 3554

display:-webkit-box; 容器成為伸縮模型

box-flex:通過比例讓元素以塊狀填充

box-ordinal-group: 元素顯示順序

box-orient:伸縮流方向

box-direction:布局順序

box-lines:伸縮換行(暫不支援)

box-pack:主軸對齊

box-align:側軸對齊

-webkit-line-clamp:限制在乙個塊元素顯示的文字的行數

* 

.page, .min

.h.page

.box-left, .box-right

.box-center

.box-center

.box-right

class="page">

class="box-center h">

主內容h1>

div>

class="box-left h">

左邊欄h1>

div>

class="box-right h">

右邊欄h1>

div>

div>

/*通過float實現固定*/

.bo-left, .bo-right

.bo-left

.bo-right

.bo-center

/*通過position實現固定*/

.b-left, .b-right

.b-left

.b-right

class="min"

style="margin-top: 90px; height: 90px;">

class="bo-left h">

左邊欄h1>

div>

class="bo-right h">

右邊欄h1>

div>

class="bo-center h">

主內容h1>

div>

div>

class="min"

style="margin-top: 90px; height: 90px;">

class="b-left h">

左邊欄h1>

div>

class="b-right h">

右邊欄h1>

div>

class="bo-center h">

主內容h1>

div>

div>

CSS3的伸縮布局

css3在布局方面做了非常大的改進,使得我們對塊級元素的布局排列變得十分靈活,適應性非常強,其強大的伸縮性,在響應式開中可以發揮極大的作用,使得開發人員一下子就過上了小康的生活。伸縮盒模型經歷了幾次演變,大致分為舊版伸縮布局 過渡伸縮布局 新版伸縮布局 同樣為了避免混淆,我們以學習新版伸縮布局為主 ...

CSS3 伸縮布局 Flexbox

display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...

CSS3 伸縮布局(一)

css3引入了一種新的布局模式 flexbox布局,即伸縮布局盒模型 flexible box 用來提供乙個更加有效的方式制定 調整和分布乙個容器裡專案布局,即使它們的大小是未知或者動態的,這裡簡稱為flex。flexbox布局常用於設計比較複雜的頁面,可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保...