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

元素的宽高特点

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

元素类型转换

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

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

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

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

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

元素的显式和隐藏

note:隐藏 ≠ 删除

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

复制代码
        a {
            display: none;
         }
相关推荐
拖拉斯旋风15 分钟前
与 AI 协作的新范式:以文档为中心的开发实践
前端
dualven_in_csdn16 分钟前
【electron】解决CS里的全屏问题
前端·javascript·electron
库克表示19 分钟前
MessageChannel-通信机制
前端
不爱吃糖的程序媛23 分钟前
Electron 文件选择功能实战指南适配鸿蒙
javascript·electron·harmonyos
拖拉斯旋风24 分钟前
深入理解 Ajax:从原理到实战,附大厂高频面试题
前端·ajax
用户40993225021224 分钟前
Vue 3响应式系统的底层机制:Proxy如何实现依赖追踪与自动更新?
前端·ai编程·trae
www_stdio24 分钟前
使用 Ajax 实现异步数据请求:从原理到实践
javascript·ajax·html
却尘28 分钟前
一个"New Chat"按钮,为什么要重构整个架构?
前端·javascript·next.js
ERIC_s29 分钟前
记一次 Next.js + K8s + CDN 缓存导致 RSC 泄漏的排查与修复
前端·react.js·程序员
168清纯女高30 分钟前
路由动态Title实现说明(工作问题处理总结)
前端