css盒模式

理解盒模式 可以从以下几个方面来梳理

1 块级元素 会另起一行 可以设置width height margin padding border属性 默认宽度为容器100%

2 行内元素 和其他元素同在一行 高度和宽度为内容的宽高 可以设置margin-left 和 margin-right 但是无法设置margin-top 和 margin-bottom 可以设置border 和 padding

3 正常流 从左 向 右 从上 到 下 显示 要让文档脱离正常流的方法 浮动 或者 定位

4 根元素 位于 html 文档顶部 html就是根元素

5 盒模型 html 中每个元素都可以被描述成一个盒子模型 它有四个边界 margin padding border content

6 元素的背景 主要是应用于内容 内边距到边框的区域

7 display:inline-block 拥有block 属性具有宽高的特性 还需要inline 不换行的特性 特点：在使用的时候会有空白符 可以通过设置父级的font-size:0 来消除间隙 不兼容ie6-7

8 css float属性  被设置的元素都强制变成块级元素 可以设置宽高 浮动元素在浮动的时候 其margin不会超过包含块的padding  浮动元素会一个一个按顺序往下排而不会发生重叠现象。总结 float元素会脱离元素的文档流 保证及时的清除浮动

 

出处 http://luopq.com/2015/10/26/CSS-Box-Model/