學習筆記（盒子模型）

盒子模型初步

盒子模型

margin:0 auto;讓一個盒子在其父盒子中水平居中

盒子的兩種初始狀態

1.類似div的盒子一個盒子自動佔據一行
特點：可以設定固定的寬高，margin，padding。
2.類似span盒子一個盒子中的內容會跟同類的盒子並排在一行出現-----類似文字的表現特性。
特點：寬高不能設定，而是由其內容“撐出”，margin和padding沒有上下方面的表現。

佈局初步

1， 將“當前版面”以視覺上界限明顯的方式進行劃分若干個區塊，劃分只用兩種方式：
a) 上下結構：此時，只要使用若干個盒子，自然就是上下結構，無需其他設定。
b) 左右結構：此時使用若干個盒子，並進行相應的浮動，通常的模式：
i. 2個盒子：一左一右
ii. 3個盒子：兩左一右或兩右一左，或一邊倒。
iii. 更多盒子：通常一邊倒。

浮動

則最好總結：佈局需要左右排列，左右排列需要浮動，浮動需要修正其破壞效果——讓父盒子合理包住其子盒子。
１， 給父盒子設定一個固定的高度——通常設計時已知高度且不回改變的時候。
２， 給父盒子的內部最末尾加一個清除浮動的空盒子，如下：<div style=”clear:both”></div>
３， 給父盒子設定一個css屬性：overflow:hidden;