风之力科技
股票代码:781340
400-718-5885或13605745691
service@nwpit.com

技术资讯

24Mar2016
点击

CSS 块级元素、内联元素概念

  曾在网上看到一段说CSS权威的话:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  下面介绍一下css块级元素、内联元素概念:

  p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong。span等元素称为行内元素,它们的内容显示在行中,即“行内框”。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)。

  a、行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。
  b、说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。
  c、一般的块级元素诸如段落

、标 题...、列表、表格、表单、DIV和BODY等元素。而内联元素则如: 表单元素、超级链接、图像 ........  d、块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。  e、在CSS定义中属于一个行内元素,而

是块级元素。

对于学过CSS的人来说一听就能明白。可对于新手来说不易理解,我主要对新手说通熟点吧!

用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而

相当于一个大容器,大容器当然可以放一个小容器了。就是小容器,这样一说你也许会在脑海中有一个初步的印象了吧,如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么办?很简单,我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。

块元素(block element)一般是其他元素的容器元素

 块元素一般都从新行开始,它可以容纳内联元素和其他块元素。常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见下文