块级元素:block
每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素
块元素的特点:
- 每个块级元素都是独自占一行
- 高度,行高以及外边距和内边距都可控制
- 宽度缺省是它的容器的100%,除非设定一个宽度
- 它可以容纳内联元素和其他块元素
- 块级元素可以容纳行内元素和其他块级元素
使用方式:
1、
<text style="display:block">1</text>
2、
<text class="tt">1</text>
.tt{
display: block;
}
行内元素:inline
也叫内联元素、内嵌元素等;行内元素一般都是基于语义级的基本元素,只能容纳文本或其他内联元素
行内元素的特点:
- 和其他元素都在一行上
- 相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行
- 高、行高、外边距和内边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变
- 行内元素只能容纳文本或者其他行内元素
- 行内元素则是根据其自身的内容或子元素来决定其宽度
注意问题:
- 设置宽度
width
无效。 - 设置高度
height
无效,可以通过line-height
来设置。 - 设置
margin
只有左右margin
有效,上下无效。 - 设置
padding
只有左右padding
有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
使用方式:
1、
<text style="display:inline">1</text>
2、
<text class="tt">1</text>
.tt{
display: inline;
}
浮动:float
若设置行内元素 float:left/right
,则该行内元素转换为块级元素,且具有浮动特性。
定位:position
若为行内元素进行定位,position:absolute
或者 position:fixed
都会把行内元素转换为块级元素。