内联元素和块级元素.doc

一、行内元素与块级元素的基本概念1.块元素(block element)：块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.2.内联元素(inline element),也叫行内元素：内联元素在一个文本行内生成元素框，而不会打断这行文本。内联元素最好的例子就是XHTML中的a元素。strong和em也属于内联元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。尽管“块”和“内联”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自内联元素（即不能嵌套在行内元素中）。但是CSS中，对于显示角色如何嵌套不存在任何限制。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。3.可变元素：可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。二、行内元素与块级元素的三个区别 ：1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列，都是同一行的，水平方向排列 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置 width 无效，height 无效(可以设置 line-height) ，margin上下无效，padding 上下无效 。记住对行内元素设置宽度width无效。设置高度height无效，可以通过line-height来设置。设置margin只有左右margin有效，上下无效。设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的！text-align属性是两者表现的又以不同之处在W3CCSS2.1规范第16.2节对text-align有详细地描述：值：left|right|center|justify|inherit初始值：匿名值，由direction的值而定，如果direction为ltr则为left，如果direction为rtl则为right。应用于:块级元素，表格单元格，行内块元素继承性:是计算后的值：初始值或指定值这个特性描述了如何使一个块元素的行内内容对齐。注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。解释一下，行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如SPAN元素，IFRAME元素和元素样式的display:inline的都是行内元素；块级内容跟则是由块级元素构成，DIV是最常用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。这样，我们对这个特性的认识应该就清楚了。但是，问题来了，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。猜猜是哪个浏览器这么特立独行啊？IE！IE6/7及IE8混杂模式中，text-align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto;margin-right:auto”。但这个方式IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的text-align:center;。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”：三、行内元素和块级元素列表 1.块级元素列表 ： 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目 定义一个框架集 创建 HTML 表单 定义最大的标题 定义副标题 定义标题 定义标题 定义标题 定义最小的标题 创建一条水平线 元素为 fieldset 元素定义标题 标签定义列表项目 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 定义在脚本未被执行时的替代内容 定义有序列表 定义无序列表 标签定义段落 定义预格式化的文本 标签定义 HTML 表格 标签表格主体（正文） 表格中的标准单元格 定义表格的页脚（脚注或表注） 定义表头单元格 标签定义表格的表头 定义表格中的行 2.行内元素列表 ： 标签可定义锚 表示一个缩写形式 定义只取首字母缩写 字体加粗 可覆盖默认的文本方向 大号字体加粗 换行 引用进行定义 定义计算机代码文本 定义一个定义项目 定义为强调的内容 斜体文本效果 向网页中嵌入一幅图像 输入框 定义键盘文本 标签为 input 元素定义标注（标记） 定义短的引用 定义样本文本 创建单选或多选菜单 呈现小号字体效果 组合文档中的行内元素 语气更强的强调的内容 定义下标文本 定义上标文本 多行的文本输入控件 打字机或者等宽的文本效果 定义变