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>等等