块级元素
每个块元素通常会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常用的块级元素有:
<h1>-<h6> <p> <div> <ul> <ol> <li>
特点:
1. 总是从新行开始
2. 高度、行高、外边距以及内边距都是可以控制的
3. 宽度默认是容器的100%
4. 可以容纳内联元素和其他块元素(<p><h>不能放块级元素)
行内元素
行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素:
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>
特点:
1. 和相邻行内元素在一行上;
2. 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或者其他行内元素,不能放块级元素,<a>标签除外
行内块元素
特点:
1. 不自动换行
2. 能够识别宽高
3. 默认排序方式从左到右
标签显示模式转换
块转行内:display:inline
行内转块:display:block
块、行内转换为行内块:display:inline-block