块级元素

默认情况下，块级元素会另起一行，并尽可能的充满整个容器。

块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构

块级元素列表：

html5新增的元素：

figcation：图文信息组标题 ，article：文章，figure：图文信息组

output：表单输出，aside：侧栏内容，footer：区段尾或页尾，audio：音频播放

video：视频播放，section：页面区段，canvas：画布、绘制图形，header：区段头或页头

hgroup：标题组，

address：联系方式信息，ol：有序列表，p：行，form：表单，pre：预格式化文本，blockqute：块引用

h1-h6：标题，table：表格，dd：列表中条目描述，dl：定义列表，div，hr：水平分割线

行内元素（内联元素）

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，

只能包含数据和其他行内元素

行内元素列表：

b，big，i，small，tt，

abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var，

a，bdo，br，img，map，object，q，script，span，sub，sup，

button，input，label，select，textarea

块级元素：

1.会另起一行，

2.可以设置width，height，margin，padding，border属性

3.默认宽度是容器的100%

行内元素：

1.和其他元素在同一行内

2.高度和宽度就是内容的高度和宽度

3.可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性

4.border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加

正常流：从左到右，从上到下显示。要让一个元素不在正常流中，唯一的办法是让元素浮动或定位

非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。比如一个段落的文本都在该元素本身之内，这个段落就是一个非替换元素。

替换元素：作为其他内容占位符的一个元素称为替换元素，根据标签和属性的值来显示内容的元素。比如img元素，它只是指向一个图像文件，这个文件插入到文档流中。大多数表单元素（input，根据type属性来显示内容）也是替换元素。

根元素：位于文档树的顶端，在html文档中就是html元素。

行内元素的盒模型

行内元素也是有盒模型的，但是有几点要注意：

1.对于非替换元素，比如a，span标签等

•可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性；

•行内元素border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加；

2.对于替换元素，比如input，img标签，margin，padding，border都有效果