内联元素和块级元素.docVIP

一、行内元素与块级元素的基本概念 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属性是两者表现的又以不同之处?在W3C?CSS2.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”：?? 三、行内元素和块