块级元素与行级元素
比如会有一种情况，给p标签水平居中有作用，但是给font加水平居中属性就没作用（如下）：
|
1
|
p{ color:red; text-align:center;}<br>font{color:red; text-align:center;} |
|
1
|
<p>我是块级标签p</p><br><font>我是行内标签font</font> |
运行预览之后p能使文本水平居中，但是font就不可以（如下）：
那么以上这个问题就和html中的显示模式有关了：
显示模式的特性：
主要分为两大类：
块级元素：当成一个盒子，独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽； 【块级有：div,p,h1~h6,ul,li,dl,dt,dd... 】
行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高【行内有：span，font,b,u,i,strong,em,a,img,input】
行内块元素：即有块元素的特点也有行元素的特点，可以改变宽高，不独立成行，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；【img和input为行内块元素】
那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;
只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。
在这之前有说过 text-align这个属性是否生效，原因是块级标签如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，那么在100%的宽度中居中生效；但是行内元素的宽完全是靠内容撑开，所以宽度就是内容撑开的宽，我们给个背景测试看看：
所以块级是在盒子中间居中了，但是因为行内元素的宽就是内容宽，没有可居中的空间，所以text-align:center;就没有作用；但是如果给font转换为块级就不一样了：
|
1
2
|
p{ background:green; color:red; text-align:center;}font{background:green;color:red; text-align:center;display:block;} |
同理，要是块级转换为行内了，文本也不能居中显示了。
因为在html中，行内元素被视为有文字特性的标签，块级能使文本水平居中，那么在块级当中的行内标签被视为文本的特性，那么块级使用text-align:center；的话，里面的行内标签会被像文本一样水平居中在块级标签中：
不加text-align:center；时：
|
1
2
|
p{ padding:5px;background:green; color:red;}font{ background:yellow;} |
|
1
2
3
|
<p> <font>我是行内标签font</font> <font>我是行内标签font</font></p> |
加上text-align:center;后
|
1
2
|
p{ padding:5px;background:green; color:red;text-align:center;}font{ background:yellow;} |
内联块级元素：和其他元素同一行（行内元素特点），可以设置元素的宽高等（块级元素特点）。
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等 1.行属性标签它和其它标签处在同一行内 2.行属性标签无法设置宽度，高度 行高 距顶部距离 距底部距离//（行可设置边距宽度） 3.行属性标签的宽度是直接由内部的文字或者图片等内容撑开的 4.行属性标签内部不能嵌套行属性标签（a链接内不能嵌套其他链接） <!-- <div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form> --> 1.每一个快属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始 （因为每一个块属性标签都会直接占据一整行的内容，导致下面的内容也只能从新的一行开始） 2.块属性标签都是可以设置宽度、高度，行高，距顶部距离，距底部距离 3.块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100% 4.块属性标签是可以直接嵌套的 5.p标签中不能嵌套div标签
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效 //（行可设置边距宽度）
块级元素和块状元素是一样的。
元素分类应该是：块状元素、内联元素（又叫行内元素）和内联块状元素。
百度上有块状(block)元素和内联(inline)元素的特点，
块状元素：它一般是其它元素的容器元素，可以容纳块状元素和行内元素，它默认是不会和其它元素同一行的。可以在一行显示，不能设置高度宽度。
行内元素：它只能够容纳文本以及其它的行内元素。内元素并不从新的一行开始，水平方向会一个个接着。每个块状元素会从新的一行开始。不能再一行内显示，可以设置高度宽度。
一个行内元素不会单独占一行，而块元素是会单独占一行的。
行内元素是可以在同一行内出现，如：span、em标签等。并且不可以为其设置标签的宽高。
块状元素可以说是一个区域，如：div、p标签等。如果想要并排出现，还需要设置float或position。
//内联元素是拥有块级元素特性的行内元素，行内元素不能设置宽高，内联元素可以设置宽高
块级元素：具有宽高属性，独占一行，如div。
内联元素：不具有宽高，在同一行显示，如span。
内联块：具有宽高，在同一行显示，如img。
把行内元素通过代码display: block;变为块级元素有什么好处？
行内元素无法改变其宽高属性，变为块级元素才可以通过CSS来修改其宽高，我所遇见的需要将行内元素变为块级元素的情况，都是为了改变其宽高。而很多时候我会设置 display: inline-block; 因为如果设置 display: block; 该元素会占一整行。
比如说a标签，不把它变成块级或者行内块就不能给a标签添加width height属性，也不能独占一行
最主要的，块级元素独占一行，行内元素不能独占一行
display:block; 行内元素转换为块级元素。
display:inline; 块级元素转换为行内元素。
此外如果一个元素被设置了 float: left/right; position: absolute/fixed; 也会被自动转为块级元素
clear:left/right/both只对块级元素有效么？
block元素浮动之后已经脱离了文档流了，排列的顺序都不一样了，所以清除了之后有效果，inline-block还是在文档流里面，加浮动不加浮动都没有什么作用的，所以清除也没有影响
要分清楚块级以及行级元素的区别，块级元素浮动后脱离正常文档流并且紧跟着前一个元素后面实现并排效果，而行内元素本身就能实现并排效果，设置浮动看到的也是一样的效果，同样的清除浮动表面上也看不出有变化，但是在审查元素中你就能看到代码变化了，所以是有点效果的。
怎样让两个块级元素出现在一行中？
-
你可以将将块级元素转换为内联块级元素.
-
可以设置浮动.
-
可以利用定位.
-
1. float: left 或者 float: right；
2. display: block （常用） display: list-item （不常用）；
3. position: absolute 会改变元素的 display 属性；
4. IE6 和 IE7 下，元素设置 zoom: 1 会使其具备块级元素有的属性。
本文转载自他人，为尊重原创附上原文链接：http://www.cnblogs.com/lianghong/p/8003948.html
