页面元素可以分为下面三种:块状元素、内联元素、内联块状元素。
块状元素
常见块状元素:由HTML4的默认样式表可以看出来块状元素定义了这些:html, address, blockquote【块引用】, body, dd, div, dl, dt, fieldset【form控件组】, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu【菜单】, pre { display: block; unicode-bidi: embed }
特点:
- 块元素默认占据一行,宽度与父容器一致,高度为内容+padding的高度。
- 块元素可以通过设置margin和padding的值来控制块元素与其他元素的边距以及自身边框与内容的留白(内边距)。
- 块元素可以设置宽度和高度。
- 块元素设置高度,padding,margin会撑大父容器的文档流,当然这要在父容器没有设置固定高度的前提下。
实例:block.html
- 内联元素
常见内联元素:在HTML4的默认样式表中没有显示设置display的元素为inline的都是内联元素,因为display的默认值就是inline。常用的有<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点:
- 和其他元素都在一行上。
- 对行内元素设置高度相关的都是没有效果的,如设置margin-top,margin-bottom,height这些属性都是无效的,可以使用line-height来设置行与行之间的高度。
- 行内元素设置padding的上下边距,并不会撑大父容器的文档流,但是会有效果,会覆盖了上下元素的内容。
- 对行内元素设置宽度也是无效的,行内元素的宽度只有左右内边距和内容宽度来决定。
实例:inline.html
内联块状元素
常见内联块状元素:由HTML4的默认样式表可以看出来内联块状元素定义了这些:button, textarea,input, object,select { display:inline-block; }
特点:
- 行内块元素对其设置高度,宽度,padding和margin都是有效果的。
- 行内块元素不会独占一行,如果该行内块元素在设置完宽度、padding、margin之后,父容器后面的宽度还能够容的下第二元素,那么第二个元素就会与第一个元素同行显示,否则,另起一行。
- 两个同行显示的行内块元素,对其上下的元素的间隔距离,以其中最大的间距为主。
实例:inline-block.html
display属性有四个值可选,分别是block:块元素;inline:行内元素;inline-block:行内块元素;none:元素不显示。通过display的这些属性可以实现不同元素分类间的相互转化,并具有转化后的所有特点。