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

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的元素显示模式总结】结果:
css|【CSS基础】CSS的元素显示模式总结
文章图片


    推荐阅读