块元素(block)又称:块级元素
特点:
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
- 默认宽度:撑满父元素
- 默认高度:由内容撑开
- 可以通过 CSS 设置宽高
人话:宽度默认独占一行,但宽度可调节,高度默认看内容量,也可调节
行内元素(inline)又称:内联元素
特点:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 无法通过 CSS 设置宽高
人话:可以和其他元素共用一行,只占自己内容的空间,宽高不可调节
行内块元素(inline-block)又称:内联块元素
特点:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
列。- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 可以通过 CSS 设置宽高
注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
分类方式,行内块元素应该算作行内元素
人话:与上一个的区别是可调节宽高
注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
分类方式,行内块元素应该算作行内元素
CSS-元素的分类与特性
代码对我眨眼睛2023-12-01 7:07
相关推荐
梦想的颜色2 分钟前
TypeScript 完全指南(中):函数、接口、类与高级类型鹏多多4 分钟前
OpenSpec+SDD规范驱动AI Agent开发项目实战指南叶小树咯10 分钟前
React 为什么不能像 Vue 那样 state.count++ricardo197315 分钟前
防抖节流进阶 + requestAnimationFrame:滚动与输入场景的性能优化wjj不想说话16 分钟前
你项目里的 Pinia,可能已经成了第二个 localStorageUpsy-Daisy19 分钟前
IOTA 学习笔记(四):当前 IOTA 架构总览wuhen_n23 分钟前
LangChain JS 入门:快速搭建前端 AI 开发环境山楂树の43 分钟前
JS中??和||的区别U盘失踪了1 小时前
Browser Use — AI驱动浏览器自动化的全新范式天蓝色的鱼鱼1 小时前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎