行内元素(inline-level)
行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
常见的行内元素有:< a >< strong>< b>< em>< del>< span >等
行内元素的特点:
- 总是和相邻的行内元素在同一行上(物以类聚)
- 设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。
- 默认宽度是他自身内容的宽度。
- 行内元素只能容纳其他行内元素或者文本。
特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。
行内块元素(inline-block)
普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,比如< img >、< input >/< td >,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。
行内块元素的特点:
- 和相邻行内元素在同一行,但是之间会有空白缝隙。
- 默认宽度是它本身内容的宽度。
- 宽度、高度、行高、外边距以及内边距都可以手动设置。
块级元素(block-level)
块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。
块级元素有以下几个特点:
- 总是另起一行(特立独行)
- 可以设置其宽度、高度,内外边距
- 在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)
- 可以容纳行内元素和其他块元素。
- 常见的块级元素有:< div >/< h1 >~< h6 >/< p >/< ul >/ < table >< u l> < ol>等,其中< div >是最常用最典型的块级元素。
特殊:文字类的块级元素不能放块元素,例如< p >/< h1 >~< h6 >/< dt >
标签显示模式转换(display)
既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。
块元素——>行内元素 : display:inline;
行内元素——>块: display:block;
块、行内元素——>行内块: display: inline-block;
空元素
空元素:空元素下是没有子级节点和内容的,空元素是在开始标签中结束的,没有闭合标签.
常见的空元素有:br、hr、 img、 input、 link、 meta