CSS-标签显示模式

块级元素

    每个块元素通常会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常用的块级元素有:
<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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容