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

元素的宽高特点

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

元素类型转换

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

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

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

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

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

元素的显式和隐藏

note:隐藏 ≠ 删除

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

复制代码
        a {
            display: none;
         }
相关推荐
Amumu1213827 分钟前
Vue核心(三)
前端·javascript·vue.js
CoCo的编程之路31 分钟前
2026 前端效能革命:如何利用智能助手实现“光速”页面构建?深度横评
前端·人工智能·ai编程·comate·智能编程助手·文心快码baiducomate
RFCEO1 小时前
HTML编程 课程五、:HTML5 新增语义化标签
前端·html·html5·跨平台·语义化标签·可生成安卓/ios·html最新版本
Irene19911 小时前
JavaScript中,为什么需要手动清理事件
javascript·手动清理事件监听器
摘星编程1 小时前
OpenHarmony环境下React Native:Zustand持久化存储
javascript·react native·react.js
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:图片加载实现
android·开发语言·前端·javascript·flutter·php
摘星编程1 小时前
在OpenHarmony上用React Native:Recoil选择器异步数据
javascript·react native·react.js
雨中深巷的油纸伞1 小时前
vue 项目部署到iis后 浏览器刷新404
前端·javascript·vue.js
谢尔登2 小时前
从源码视角来看Pinia!
前端·javascript·vue.js
梦6502 小时前
JavaScript 循环
开发语言·javascript·ecmascript