盒子模型概念：

盒子模型用来“放”网页中的各种元素

网页设计中的内容如文字，图片等元素，都可以是盒子（div嵌套）

网页中的盒子模型

普通文档流:

            (没有设置  float,position,display  )

            块元素自上而下排列,内嵌元素自左向右排列在同一行.

        border:  border-width （color||style）:(四个方向：上，右，下，左)

      border:[宽度][样式][颜色]

       border-left:[宽度][样式][颜色]

            宽度  width  

            颜色  color      颜色||transparent

            样式  style    （none,hidden） 

利用边框属性transparent绘制三角形
边框属性

内边距属性：设置元素的内容与边框之间的距离（内边距或填充）分四个方向（上，右，下，左）

padding-top：长度值|百分比

复合写法：padding：值1（四个方向）

                 padding：值1  值2（上下， 左右）

                  padding：值1  值2  值3（上，左右，下）

                 padding：值1 值2 值3 值4（上，右，下，左）

值不可以设置负值 不可以设置auto 设置无效  

margin-top:长度值 | 百分比 | auto
外边距属性:设置元素与元素之间的距离（外边距）4个方向（上，右，下，左）

                  margin：值1（四个方向）

                  margin：值1  值2（上下， 左右）

                  margin：值1  值2  值3（上，左右，下）

                  margin：值1 值2 值3 值4（上，右，下，左）

内边距会显示背景，一般常用的布局形式

padding-left设置值，background-image,把背景图片position左边，可以作为小图标显示

类似于，padding-left设置长度，背景

值可以设置负值可以用于布局， 左右值为auto，实现水平方向居中显示效果

      

属性顺序

  块元素的外边距的传递:

如果某个标签的第一个元素设置margin-top或者margin-bottom，margin属性会向父级向上或者向下传递，如果父级元素还是它的父级元素的第一个标签，则会继续向上或向下传递，这是布局时需要注意的地方，一般使用padding内边距来达到需要布局的效果，不过也是有解决方法

1，在父级元素设置 overflow：hidden；

2，padding-top：1px；

 border-top:1px solid #f00;

注意只是在块级元素中起作用

块元素的叠加

垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后的外边距高度=两个发生合并外边距的高度重的最大值

块元素垂直方向的叠加 盒子模型的计算

display:显示属性

                inline:元素显示为内联元素，元素前后没有换行符

                block:元素显示为块元素，元素前后带有换行符

                inline-block:内联块元素，元素呈现为inline，具有block相应特性

                none ：此元素不会被显示

            普通文档流,块元素垂直方向的外边距相遇会融合取大值