CSS元素宽高特点、类型转化、显式和隐藏(display)

元素的宽高特点

块级元素
  • 可以 设置宽高,不可以和其他元素在一行
  • 设置宽高时,元素的宽高为设置的值
  • 没有设置宽高时,宽度和父级宽高一样,高度由元素内容决定
行级元素
  • 不可以 设置宽高,可以和其他元素在一行
  • 元素的宽高由元素内容决定,对其设置是无效的
行内块级元素
  • 可以 设置宽高,可以和其他元素在一行
  • 没有设置宽高时,宽高由元素内容决定
  • 设置宽高时,就为设置的值

元素类型转换

  • 任何元素都可以进行类型转换

  • 元素类型之间可以相互转换

  • 转换后不会影响元素本身的性质

  • (如:行级元素不可以设置宽高,但是转换为行内块级元素就可以设置宽高了)

    复制代码
       a {
             //转换为块级元素
              display: block;
              //行内块级元素
              display: inline-block;
              //行内元素
              display: inline;
          }

元素的显式和隐藏

note:隐藏 ≠ 删除

页面结构仍然存在,但是元素所占空间会被删除

复制代码
        a {
            display: none;
         }
相关推荐
H048几秒前
symbol为什么说是为了解决全局变量冲突的问题
javascript
HelloReader几秒前
从 Tauri 2.0 Beta 升级到 2.0 Release Candidate Capabilities 权限前缀与内置 Dev Server 网络策略变
前端
只与明月听31 分钟前
RAG深入学习之Chunk
前端·人工智能·python
一枚前端小姐姐1 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
HelloReader1 小时前
Tauri 1.0 升级到 Tauri 2.0从“能跑”到“跑得稳”的迁移实战指南(含移动端准备、配置重构、插件化 API、权限系统)
前端
Always_Passion1 小时前
FE视角下的Referrer全面解析
javascript·面试
JunjunZ1 小时前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven1 小时前
React 19 深度解析:Actions 与 use API 源码揭秘
前端
七牛云行业应用1 小时前
大模型接入踩坑录:被 Unexpected end of JSON 折磨三天,我重写了SSE流解析
javascript·人工智能·代码规范
程序员阿耶2 小时前
5 个让 CSS 起飞的新特性,设计师看了直呼内行
css