码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • display详解


    目录

    • 了解
    • 对外显示
      • block块级元素
        • 块级元素特点
      • inline内联(行内)元素
        • 内联元素特点
      • inline-block(非官方说法)行内快元素
        • inline-block(非官方说法)行内快元素特点
      • 三者区别
      • 根据需要三者可以相互转换
      • 隐藏元素
    • 对内显示
      • display:flex
      • display:grid

    了解

    首先display分为对外显示和对内显示
    对外显示:block、inline、inline-block
    对内显示:flex、grid流式布局

    对外显示

    block块级元素

    常见的块元素有p标签、div标签、ul标签、ol标签、h1~h6等。

    块级元素特点

    • 独占一行
    • 可以设置width、height属性。
    • 在不设置宽情况下,宽默认为父元素内容区宽
    • 块级元素里可以放任意类型元素,不过要注意。
    • 文字类元素标签内不能放其它块元素,比如
      • p标签里不能放p和div标签
      • h1-h6标签里不能放p, div元素

    inline内联(行内)元素

    常见的行内元素有:a、strong、span、i、del等

    内联元素特点

    • 相邻的行内元素会在一行显示,放不下时会换行显示
    • 设置width、height属性是无效的。其宽高随其内容大小而撑开。
    • 行内元素里只能放文本或其它行内元素
    • 注意:
      • a标签中不能再放a标签。但a标签中可以放块级元素
      • 实际开发中,在某些情况下会把a标签转换为块级元素

    inline-block(非官方说法)行内快元素

    以下元素具有行内块元素的特性:img、表单类元素、video , audio等以上元素本质上叫可替换元素(归类归到行内元素)。
    官方本没有行内快元素的说法

    inline-block(非官方说法)行内快元素特点

    • 相邻的行内块(或行内)元素会在一行显示,放不下会换行。
    • 相邻的行内块元素之间会有空白间隙。
    • 元素默认宽为它本身内容宽,可设置width、height属性。

    三者区别

    元素类型排列方式盒模型属性内容
    块级(block)独占一行width、height有效任意元素
    行内块(inline-block)一行可显示多个width、height有效行内或行内块元素
    内联(inline)一行可显示多个width、height无效行内或文本元素

    根据需要三者可以相互转换

    比如要将div转成行内标签,只需要在css中写上
    div{display:inline;}
    即可

    隐藏元素

    属性功能—
    display:none;隐藏元素可以将元素隐藏,子孙元素全部隐藏不可见。并且只要父元素隐藏,子孙没有任何办法可见。
    元素隐藏后不会占空间。就好比页面当中就没有加过这个元素一样。
    visibility :hidden;隐藏元素将元素隐藏,子孙元素全部不可见,但是给子孙加上 visibility:visible;时,子孙可见。
    隐藏后仍占其位置,会留下空白的一块区域。基本不用。

    对内显示

    display:flex

    单独发一篇

    display:grid

    单独发一篇

  • 相关阅读:
    Spring Boot中Spring MVC的基本配置讲解与实战(包括静态资源配置,拦截器配置,文件上传配置及实战 附源码)
    定制自己的 Excel 界面 + 保存 Excel
    插件器件小的引脚孔,制造过程中可能存在的一些问题
    postgres数据库报错无法写入文件 “base/pgsql_tmp/pgsql_tmp215574.97“: 设备上没有空间
    托管海外服务器有哪些要求?
    day60
    2024年护网行动全国各地面试题汇总(5)作者:————LJS
    Golang Map:高效的键值对容器
    数据库字段,逗号拼接存储,如何将其拆分查询
    chrome浏览器插件开发
  • 原文地址:https://blog.csdn.net/Ningmengyouzhi/article/details/128021333
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号