行内元素和块级元素的学习_html/css_WEB-ITnose
行内元素和块级元素的学习
@(css)[妙瞳]
css标准文档流:
简称"标准流",指的是在不使用其它的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中元素可以分为块级元素和行内元素。
块级元素:总是以一个块的形式表现出来,并且跟同级的兄弟一次竖直排列,左右撑满。
行内元素:行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树的一个节点,在这点上,行内元素和块级元素是没有区别的。行内元素不可以设置宽与高,但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。常见的行内元素有a,em,strong等。
盒子在标准流中的定位原则(见我上篇文章:聊聊盒子模型)
(1)行内元素之间的水平margin
当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
(2)块级元素之间的竖直margin
当两个块级元素紧邻时,它们的距离不是margin-bottom与margin-top的总和,而是两者中的较大者。
(3)嵌套盒子之间的margin
当一个div块包含在另一个div块中时,便形成了典型的父子关系。其中子块的margin将以父块的 content为参考。
(4)将margin设置为负值
当margin设置为负值时,会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。
代码演示如下:
CSS
- 第1个列表的第1个项目内容
- 第1个列表的第2个项目内容,内容更长一些, 目的是演示自动折行的效果。
- 第2个列表的第1个项目内容
- 第2个列表的第2个项目内容,内容更长一些,目的是演示自动折行 的效果。
页面效果:
如上代码所示,其内容是body中有两个列表(ul),ul列表中又各有两个列表项目(li)。一共有四层,顶层为body,第二层为ul,第三层为li,第四层为文本。ul和li都为块级元素,而strong则为行内元素,从 DOM 的角度来看,块级元素和行内元素是没有区别的,都是树上的一个节点,而从 CSS 的角度来看,二者就有很多的区别,块级元素有属于自己的区域,而行内元素没有!就如页面效果图所示。标准流就是 CSS 规定的默认的块级无素和行内元素的排列方式。从body标记开始,依次把其中的子元素放到适当的位置。如果一个html更为复杂,层次更多,那么也和这个一样,直至所有的元素被检查一遍,分配到相应的区域。在这个过程,一个一个的盒子自然地形成一个序列,同级别的盒子依次排列在父级盒子中,就像一条河流有干流和支流一样,这就是被称为“流”的原因。
行内元素的特点:
块级元素的特点:
假如我对strong的line-height进行设置,效果如下:
strong{ border:1px solid #000; line-height:50px; }
页面效果:
由上所示,line-height的设置,行内元素strong的高度改变。
假如我们对strong的height进行设置,效果如下:
strong{ border:1px solid #000; height:50px; }
页面效果:
由上所示,height的设置,行内元素strong的高度并未改变。
代码:
li{ border:1px solid green; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px; } strong{ border:1px solid #000; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px; }
页面效果图:
由上可示,对于行内元素strong而言,margin-left和margin-right有效,但是margin-top和margin-bottom失效。对于块级元素li而言,上下左右的margin都有效。
代码:
li{ border:1px solid green; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; } strong{ border:1px solid #000; padding-left:20px; padding-right:20px; padding-top:30px; padding-bottom:20px; }
页面图:
由上所示,对于行内元素strong而言,padding-left和padding-right有效,但是padding-top和padding-bottom失效,只是上下的范围扩大,可是对其他元素内容并没有改变。对于块级元素li而言,上下左右的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 是最常用的块级元素。块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
这样,我们对这个特性的认识应该就清楚了。但是,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。
IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
解决上面的问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”。
代码:
CSS 我是行内元素我是块级元素
页面:
IE8/Firefox/Chrome/Safari/Opera:
IE6/IE7:
代码:
CSS 我是行内元素我是块级元素
IE8/Firefox/Chrome/Safari/Opera:
IE6/IE7:
代码:
CSS 我是行内元素我是块级元素
IE6/IE7/IE8/Firefox/Chrome/Safari/Opera:
块级元素、行内元素分别汇总如下:
Examples of block level elements
block level elements|Element Description information on authorlong quotation