html元素盒模型，块级元素和内联元素区别

1、【盒模型】

盒模型：html文档中的每个元素都被描绘成矩形盒子，这个模型称为盒模型。

盒模型包括：margin（外边距），border（边框），padding（内边距），content（内容区域）。
元素占据的空间：margin+border+padding+content。

正常盒模型：属性width/height = content宽高。
IE盒模型 （ IE 5 和 6 ） ：属性width/height = margin+border+padding+content。

补充： CSS2.1 规定的宽度高度行为
box-sizing: content-box     对应正常盒模型
box-sizing: border-box     对应IE盒模型

2、【块级元素和内联元素区别】

块级元素：

• 默认情况下，块级元素会独占一行，其宽度自动填满其父元素宽度；
• 块级元素可以包含行内元素和其他块级元素（p除外）；
• 块级元素可以设置width,height属性；
• 块级元素可以设置margin,padding属性；
• 包括：div,p,h1-h6,form,ul,ol,table,canvas,video,audio,address,article,header,footer,aside,menu,figure,hr等

行内元素：

• 行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化；
• 行内元素只能包含数据和其他行内元素；
• 行内元素设置width,height无效；
• 行内元素的水平方向的padding,margin都会产生边距效果，但是竖直方向上的padding,margin都是无效的；
• 包括：a,b,em,abbr,acronym,strong,span,img,button,input,label,select,textarea等