CSS-元素的分类与特性

块元素(block)

又称:块级元素

特点:

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

又称:内联元素

特点:

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

又称:内联块元素

特点:

  1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排
    列。
  2. 默认宽度:由内容撑开
  3. 默认高度:由内容撑开
  4. 可以通过 CSS 设置宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
    人话:与上一个的区别是可调节宽高
    注意:元素早期只分为:行内元素、块级元素,区分条件也只有一条:"是否独占一行",如果按照这种
    分类方式,行内块元素应该算作行内元素
相关推荐
xjt_090110 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农22 分钟前
Vue 2.3
前端·javascript·vue.js
张人玉27 分钟前
VisionPro 定位与卡尺测量学习笔记
笔记·学习·计算机视觉·vsionprp
songyuc31 分钟前
【BiFormer】BiFormer: Vision Transformer with Bi-Level Routing Attention 译读笔记
笔记·transformer
夜郎king1 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
觉醒大王1 小时前
强女思维:着急,是贪欲外显的相。
java·论文阅读·笔记·深度学习·学习·自然语言处理·学习方法
三水不滴1 小时前
计网:输入网址到网页显示
经验分享·笔记·计算机网络
夏幻灵2 小时前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_2 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝2 小时前
RBAC前端架构-01:项目初始化
前端·架构