块级元素（块级元素一般当做容器使用，既可以容纳内联元素也可以容纳块级元素）
特点：
1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话，默认为父元素的宽度。
4.块级元素对应属性display：block；
常见的块级元素:
（1）div：主要用来进行框架布局。
（2）h1～h6：用来设置不同级别的标题。
（3）p:创建段落，会自动在其前后创建一些空白。
（4）hr:用来创建分隔先。
（5）ol:创建有序列表。
（6）ul:创建无序列表。
行内元素（任何不是块级元素的可见元素都是行内元素。行内元素只能够容纳文本或者行内元素。）
特点：
1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
4.行内元素对应属性display：inline；
常见的内联元素:
（1）strong：加粗强调。
（2）em：斜体强调。
（3）s：删除线。
（4）u：下划线。
（5）a：超链接。
（6）span：常用行级，可定义文档中的行内元素。
（7）img：图片。
（8）input:表单。
行级元素与块级元素的转换
如果想将块级元素与行级元素相互转换，该怎么办呢？
可以在css样式中用display:inline将块级元素设为行级元素
同样，也可以用display:block将行级元素设为块级元素
行级-块级元素
如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？
此时就可以用display:inline-block将元素设置为行级-块级元素。
块级元素和行内元素的分类
html中的块级元素：
html中的行内元素：
我们知道html中元素对外表现都是一个个盒子或者说是框，那么这些盒子是否都一样呢？前面说过，这些盒子有的是从上到下竖着摆放的，而有的是横着摆放的。另外，有的盒子装的内容是直接展示的，有的却是魔术盒，根据标签和属性决定具体的展示内容。
替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。
最明显的两个例子：
另外，textarea、select、object、video都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
HTML 的大多数元素是非替换元素，浏览器直接将其内容显示出来。例如：div, p, span
普通流中，块元素独占一行。例如：div，p，h1等。
普通流中，行内元素左右可以有其他行内元素。
块级元素，width，height，margin，boder的设置遵循盒模型。
行内替换元素，width，height，margin，boder的设置遵循盒模型。另外，当其宽高有auto属性时，其表现如下：
css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
替换元素和非替换元素
html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
置换元素(替换元素)和非置换元素(不可替换元素)
行内元素与块级元素的总结
置换和非置换元素
盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。
目前有： 标准盒子模型和IE盒子模型 2种盒模型 ，区别在于：
为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外
块级元素：div , p , form, ul, li , ol, dl,form, address, fieldset, hr, menu, table...
行内元素(内联元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：
box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。
box-sizing:border-box： IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。
box-sizing：inherit ： 从父级元素中继承该属性。
如果设置box-sizing：border-box来使用IE6混杂盒模型 ，那么
设置padding与border后，内容区的宽度和高度被压缩为70px 70px,盒子的原尺寸仍然是100px 100px
当一个容器宽度定义为 width:100%之后，如果再增加 padding 或者 border 则会溢出父容器，是向外扩张的。如果使用该样式，指定为 box-sizing: border-box则 padding 和 border 就不会再溢出，而是向内收缩的，这个效果是非常实用的。
