欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css中元素的分类

程序员文章站 2022-10-04 23:39:19
按照显示元素分类: 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变;其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置。 行内元素的水平方向的padding-left,padding-right,margin-left,margi ......

按照显示元素分类:

  • 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变;其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)(<a>、<span>、<strong>)
  • 块级元素(block-element):总是独占一行,元素占据的高度,顶底左右边距可以人为设置;其宽度缺省为所在容器的100%,可人为设置;(<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote> <form>
  • 空元素(void-element):即没有内容的html元素,例如:br、meta、hr、link、input、img

按照元素是否可替换分类:

  • 替换元素:浏览器根据其标签的元素与属性来判断显示具体的内容。

    比如:<input   type="text" />,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

    (x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

  • 非替换元素: (x)html 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。

    比如<p>wanmei.com</p>

    浏览器将把这段内容直接显示出来。

  • 备注:行内替换元素的属性和行内块元素一致,竖直方向也能产生效果,几乎所有的可替换元素都是行内元素,例如<img>、<input>等等