1.CSS的元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能放一个块级元素 | 可以设置宽度、高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度、高度 | 它本身内容的宽度 | 容纳文本或其他行为元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度、高度 | 它本身内容的宽度 |
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的元素显示模式总结】结果:
文章图片
推荐阅读
- css|html+css实现简单的侧边栏效果
- WordPress主题开发(单击按钮时不执行javascript代码)
- wordpress样式在自定义主题中不起作用,只有html标签会受到影响
- WordPress通过一致的网址提供资源
- WordPress响应式图像不起作用
- WordPress渲染的CSS与CSS文件不匹配
- WordPress相关文章缩略图可以工作,但永久链接错误
- WordPress主菜单对齐
- WordPress页面未显示CSS