CSS盒子知识

此随笔写于学习完CSS盒子之后，所遇到的问题和感悟记录。

1.IE盒子：

IE盒子的特性:对于IE浏览器来说width不是内容宽度.而是内容+外边距+边框的内容总和。

也就是说当盒子增加10px;那么padding减5（双边左右）。

对于普通盒子来说那都是独立的！

2.如果两个盒子 都用div写  那么div是属于块级元素 那么两个盒子是竖直 上下排列  如果给第一个盒子加了浮动 那么第一个盒子脱标了  第二个盒子就是标准文档流中的第一个盒子

如果是三个盒子 如果第一个浮动 那么第二个成了第一个盒子 而第三个不会

3.浮动的元素  不需要转块级直接可以设置宽高  也说明了脱标

4.浮动的元素互相贴靠  比如我有三个盒子123左浮动   他们按顺序贴着当我浏览器缩小时 第三个盒子被挤了  如果有足够空间那么贴2哥  没有去贴1哥  实在没空间了 靠边去了比如底部  自己去贴左墙

5.浮动有字围现象

6.如果一个盒子设定了width400  其他盒子width 只能在400及400以下才可以 不然会掉下去  当然父亲盒子不管加多少padding都没用

7.清楚浮动：overflow:hidden;   一个盒子里装了很多内容 溢出了盒子而加了overfloe:hidden;溢出的隐藏了  只显示盒子大小内的内容即使是拦腰斩了一半

overflow:hidden  有个小方法父亲盒子不写height 加overflow:hidden; 那么浮动的盒子最高的那个父亲会随着他变化（边框与其重合）

这个就有意思了 清楚浮动里最好用的其他我也懒得记了 代码都在笔记本里 文字能想象出来就好

两个盒子左浮动 内容都并排  给第一个盒子加清楚第二个盒子直接跳到了下面  可以淘宝页面里商品展示一个大图下面很多小图这样用 有价格的旁边？？？？

8.在标准文档流中的盒子margin是不叠加的比如我一个盒子margin-bottom:30px;第二个盒子margin-top:50;他们间距是50px; 水平无问题

9.margin描述的是兄弟和兄弟之间   我们要多用padding

若两个盒子（我用的是标准文档流中的盒子不知道浮动可以不可以）第一个盒子和border 第二个盒子加了margin-top两个盒子一起下来了  加了border父亲盒子就不会下来