CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

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

又称:内联元素

特点:

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

又称:内联块元素

特点:

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