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

元素的宽高特点

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

元素类型转换

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

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

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

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

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

元素的显式和隐藏

note:隐藏 ≠ 删除

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

复制代码
        a {
            display: none;
         }
相关推荐
Highcharts.js29 分钟前
Highcharts 云端渲染的真相:交互式图表与服务器端生成的边界
前端·信息可视化·服务器渲染·highcharts·图表渲染
zhuyan1081 小时前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐2 小时前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound4862 小时前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla2 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
whuhewei5 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮5 小时前
supabase的webhook报错
开发语言·前端·javascript
qq_12084093715 小时前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
yivifu6 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡6 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能