行内元素、块元素及行内块元素

1、行内元素(inline element)特点:
(1)可以和其他元素在一行显示,不自动换行。
(2)不可以设置宽高。
(3)margin左右方向有效,上下无效。
(4)padding上下左右方向都有效,但是上下方向不影响布局。
行内元素转换为块元素: display: block;
常见的行内元素

属性描述
a锚点
b粗体
big大字体
br换行
em强调
i斜体
small小字体
span常用内联容器,定义内容区块
strong强调

2、块级元素特点(block element):
(1)可以自动换行,多个块元素标签写在一起,默认自上而下排列。
(2)可以设置宽高。
(3)margin,padding设置均有效。
行内元素转换为行内块元素: display:inline-block;
常见的块元素

属性描述
div常用的块级容器
dir目录列表
dl定义列表
form交互表单
h1-h6标题
hr水平分割线
ol排列列表
ul非排列列表
p段落
table表格

注:只有文字才能形成段落和标题,所以 p 和 h中不能放块级元素
3、行内块元素特点(inline-block element):
(1)和相邻的行内元素在一行,但之间会有缝隙,一行可以显示多个。
(2)默认宽度是本身内容的宽度,可以设置宽高。
(3)可以设置margin和padding。
行内块元素有:img、input、td等。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页