css|【CSS基础】CSS的元素显示模式总结 html|css3

1.CSS的元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度、高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度、高度	它本身内容的宽度	容纳文本或其他行为元素
行内块元素	一行放多个行内块元素	可以设置宽度、高度	它本身内容的宽度

2.元素显示模式转换代码

Document - 锐客网a { width: 200px; height: 100px; background-color: pink; /* 转换为块级元素 */ display: block; } div { width: 200px; height: 100px; background-color: skyblue; /* 转换为行内元素 */ display: inline; } span { width: 200px; height: 100px; background-color: orange; display: inline-block; } 行内元素行内元素这是块级元素这是块级元素将行内元素转换为行内块元素将行内元素转换为行内块元素

【css|【CSS基础】CSS的元素显示模式总结】结果：