CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

  1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
  2. 默认宽度:撑满父元素
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    人话:宽度默认独占一行,但宽度可调节,高度默认看内容量,也可调节
    行内元素(inline)

又称:内联元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 无法通过 CSS 设置宽高
    人话:可以和其他元素共用一行,只占自己内容的空间,宽高不可调节
    行内块元素(inline-block)

又称:内联块元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
    人话:与上一个的区别是可调节宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
相关推荐
哈罗哈皮4 分钟前
trea也很强,我撸一个给你看(附教程)
前端·人工智能·微信小程序
m0_651562529 分钟前
2026.3.23搭建AI算法可视化部署演示学习笔记
笔记·学习
就是个名称15 分钟前
echart绘制天顶图
linux·前端·javascript
CODE_RabbitV34 分钟前
STM32F103C8T6 理论部分学习笔记
笔记·stm32·学习
arvin_xiaoting42 分钟前
OpenClaw学习总结_II_频道系统_5:Signal集成详解
java·前端·学习·signal·ai agent·openclaw·signal-cli
哆啦A梦15881 小时前
统一返回包装类 Result和异常处理
java·前端·后端·springboot
saadiya~1 小时前
从插件冗余到极致流畅:我的 Vue 3 开发环境“瘦身”实录
前端·javascript·vue.js
小陈phd1 小时前
系统架构师学习笔记(四)——计算机体系结构之校验码
笔记·学习
Yu_Lijing1 小时前
基于C++的《Head First设计模式》笔记——中介者模式
笔记·设计模式·中介者模式
Timer@1 小时前
LangChain 教程 03|快速开始:10 分钟创建第一个 Agent
前端·javascript·langchain