CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

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

又称:内联元素

特点:

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

又称:内联块元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
    人话:与上一个的区别是可调节宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
相关推荐
派小心.1 分钟前
App埋点排查:iOS冷启动事件漏报先看初始化还是上报
前端·数据分析
東隅已逝,桑榆非晚3 分钟前
stack和queue(类函数学习和模拟实现)
c++·笔记·学习
事圆则缓11 分钟前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
peter676813 分钟前
css揭秘-背景和边框
前端·css
LHR_friendship17 分钟前
HCIA的相关笔记
笔记·hcia
派小心.21 分钟前
小程序埋点验收:自定义事件上报后页面参数怎么核对
前端·数据分析
前端snow10 小时前
ai agent --- postgreSQL 关系型数据库
前端
卷无止境11 小时前
ECharts:把数据变成故事的可视化利器
前端
Eric_见嘉11 小时前
在职前端 Skill 和 MCP 分享
前端·后端·agent
liangshanbo121511 小时前
面试题:如何优化 Webpack 的打包速度?
前端·webpack·node.js