CSS盒子模型的应用

盒子模型是我们日常常用的布局的方式一般分为content盒模型，标准盒模型
一些基本概念
HTML的大多数元素都是块级(block)元素或行内(inline)元素
块级元素

默认情况下，块级元素会另起一行，并尽可能的充满整个容器。
块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构
块级元素列表：

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元素
盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：