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

元素的宽高特点

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

元素类型转换

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

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

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

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

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

元素的显式和隐藏

note:隐藏 ≠ 删除

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

复制代码
        a {
            display: none;
         }
相关推荐
kyriewen14 小时前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
IT_陈寒16 小时前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
To_OC16 小时前
LC 1 两数之和:面试第一道必考题,暴力解法直接被面试官 pass
javascript·算法·leetcode
DigitalOcean17 小时前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年18 小时前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
李惟18 小时前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu1118 小时前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
GuWenyue18 小时前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区18 小时前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github
叁两18 小时前
前端转型AI Agent该如何学习?(前置篇)
前端·人工智能·node.js