学习笔记（盒子模型）

盒子模型初步

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;