页面布局中的嵌套规则以及行内元素和块级元素的区别是什么

嵌套规则：

1. 块级元素可以嵌套行内元素
2. 行内元素可以嵌套行内元素
3. 行内元素不可以嵌套块级元素
4. 文字类块级元素不可以嵌套块级元素
5. 容器类块级元素可以嵌套块级元素

文字类块级元素如：p，h1-h6等
容器类块级元素如：div，table，tr，form，ul，li等
行内元素：a img input strong em del span等

块级元素的特点：

①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。

行内元素(内联元素)的特点：

①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

行内元素和块级元素的区别是什么：

1.行内元素与块级元素直观上的区别

行内元素会在一条直线上排列，都是同一行的，水平方向排列

块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

块级元素与行内元素之间的转换：

display:inline; //块级元素（独占一行）变为行内元素--可以文本居中
display:block; //行内元素变为块级元素--可以设置宽高
display:inline-block; //其实仍是行内元素，但是可以设置width及height属性等