CSS-标签显示模式

2018-09-09  本文已影响0人  哎呦呦胖子斌

块级元素

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

上一篇 下一篇

猜你喜欢

热点阅读