盒子模型原理

盒模型原理：对所有的盒子：在浏览器中所占据的【空间】进行计算
盒子：只要在浏览器【占据位置的】html元素：都是我们计算的盒子。
——————>inline inline-block block
盒模型使用什么计算盒子在浏览器中占据的位置
width height padding border-with margin

    盒子分类：边框盒子（IE默认）和内容盒子（谷歌默认）

    边框盒子在浏览器占据空间  =  width X height
    内容盒子在浏览器占据的空间 = width + border-width + padding +height+margin

    结论：内容盒子：width height 决定 盒子能容纳多少东西：随着其他变化：盒子在浏览器中占据的位置也变化
        边框位置： width height 决定盒子在父容器中占据的位置，其他变化只会改变盒子能容纳多少东西。

示例：

我的