在常規的專案開發中，很多時候不使用響應式框架的前提下，都需要開發人員手動實現自適應，這個時候盒子模型的優勢就體現了出來。盒子結構的合理巢狀，以及css樣式的使用，就能實現簡單的自適應布局。首先實現頁面的結構，父盒子中巢狀兩個子盒子。然後所有div設定高度以便觀察效果，根據要求的比例，計算兩個盒子的百分比，子盒子設定不同的背景顏色。最後使用float屬性，讓兩個子盒子處於一行。盒子模型的缺點是需要進行計算盒子的百分比，而且數值不會很精確（如果是大量的計算工作，開發效率會很低下）。
class
="big"
>
class
="one"
>
div>
class
="two"
>
div>
div>
div
.big
.one
.two
div
.big
.one
.two
彈性盒子模型 display flex
彈性盒模型，即flexbox，是css3中的新特性，其實彈性盒模型的原身是dispaly box。為容器指定彈性盒子，只需在父元素 即容器 中設定 display flex。彈性盒子有兩條軸 橫軸和縱軸，預設橫軸 自左向右 為主軸，縱軸預設自上而下為輔軸。設定了display flex的容器的屬性有...
CSS盒子模型和布局
網頁設計中常聽的屬性名 內容 content 內邊距 padding 邊框 border 外邊距 margin css 盒子模式都具備這些屬性。這些屬性我們可以用日常生活中的常見事物 盒子作乙個比喻來理解，所以叫它盒子模式。css盒子模型就是在網頁設計中經常用到的 css技術所使用的一種思維模型。b...
標準盒子模型和IE盒子模型
盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...