CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

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

又称:内联元素

特点:

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

又称:内联块元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
    人话:与上一个的区别是可调节宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
相关推荐
elseif12319 小时前
初学者必背【考点清单(大全)】【上篇】
开发语言·c++·笔记·学习·循环结构·分支结构·考纲
234710212719 小时前
4.17 学习笔记
开发语言·软件测试·笔记·python·学习
智者知已应修善业19 小时前
【51单片机按键控制流水灯+数码管显示按键次数】2023-6-15
c++·经验分享·笔记·算法·51单片机
扣脑壳的FPGAer19 小时前
数字信号处理学习笔记--Chapter 1.4.1 时域采样定理基本概念
笔记·学习·信号处理
前端老石人20 小时前
前端网站换肤功能的 3 种实现方案
开发语言·前端·css·html
冴羽yayujs20 小时前
2026 年的 JavaScript 已经不是你认识的 JavaScript 了
前端·javascript
小灰灰搞电子20 小时前
PyQt QWebChannel详解-C++与Web页面的无缝双向通信
前端·pyqt
M ? A20 小时前
你的 Vue v-for,VuReact 会编译成什么样的 React 代码?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
午安~婉20 小时前
Electron桌面应用(续3)
前端·javascript·electron·重构通用模型·异步可迭代对象
W.A委员会20 小时前
伪类与伪元素
前端·javascript·css