CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

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

又称:内联元素

特点:

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

又称:内联块元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
    人话:与上一个的区别是可调节宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
相关推荐
我要让全世界知道我很低调1 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined23 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
岑梓铭7 分钟前
计算机网络第九章——数据链路层《局域网》
网络·笔记·计算机网络·考研·408
njsgcs22 分钟前
cad_recognition 笔记
笔记
蓝倾38 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong42 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹44 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982444 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js