码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • CSS元素的显示模式


    一.什么是元素显示模式

    元素显示模式就是元素(标签)以什么方式进行显示;比如:

    独占一行,一行可以显示多个

    HTML元素一般分为块元素和行内元素两种类型。

    二.元素分类

    1.块元素

    常见的块元素有

    ~

    、

    、

    、
      、
        、
      1. 等,其中
        是最典型的块元素。

         块级元素的特点

        1. 比较霸道,自己独占一行。
        2. 高度、宽度、外边距、内边距都可以控制。
        3. 宽度默认是容器(父级宽度)的100%
        4. 是一个容器及盒子,里面可以放行内或者块级元素。

        注意 

        文字类的元素内不能使用块级元素

        标签主要用于存放文字,因此

        里面不能放块级元素,特别是不能放

        同理,

        ~

        等都是文字类块级标签,里面也不能放其他块级元素。

        文字类块级元素里不能放其他块元素

        实际效果: 

         

        2.行内元素 

        常见的行内元素有、、、、、、、、、等,其中标签是最典型的行内元素,有的地方也将行内元素称为内联元素 

        行内元素特点 

        1. 相邻行内元素在一行上,一行可以显示多个。
        2. 高、宽直接设置是无效的。
        3. 默认宽度就是它本身内容的宽度。
        4. 行内元素只能容纳文本或其他行内元素。 

        注意 

        • 链接里面不能再放链接(即a标签里面不能再放a标签)
        • 特殊情况链接里面可以放块级元素,但是给转换一下块级模式最安全 

        3.行内块元素 

        在行内元素中有几个特殊的标签 - 、、他们同时具有块元素和行内元素的特点。有些资料称他们为行内块元素。

        行内块元素的特点

        和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。

        默认宽度就是它本身内容的宽度(行内元素特点)。

        高度、宽度、外边距、内边距都可以控制(块级元素特点) 

        三.元素显示模式转换 

        特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一个模式的特性,

        比如:想要增加链接的触发范围。

        转换为块元素: display:block;

        转换为行内元素:display:inline;

        转换为行内块元素:display:inline-block; 

      2. 相关阅读:
        苹果手机之间怎么传音乐,怎么把音乐传到苹果手机上
        Simulink与Arduino烧录配置
        sonarqube二次安装启动报错解决方法
        worthington组织解离方法丨用 95% O 2 :5% CO 2平衡
        ApiFox衔接前后端开发人员,提升沟通效率实践
        我的第二本书:Java微服务
        剑指offer-刷题笔记-中难题-JZ41 数据流中的中位数
        牛客刷题<四>移位运算与乘法
        Playwright测试自动化工具
        docker安装mysql5.7,搭建主从同步,使用mycat实现读写分离
      3. 原文地址:https://blog.csdn.net/weixin_54401017/article/details/134552628
    • 最新文章
    • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
      用 Hashids 优雅解决 C 端自增 ID 暴露问题
      V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
      LLVM Pass快速入门(四):代码插桩
      milkup:桌面端 markdown AI续写和即时渲染
      基于项目工程构建SBOM(软件物料清单)的研究
      鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
      .NET 中如何快速实现 List 集合去重?
      扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
      浅谈数据访问层
    • 热门文章
    • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
      奉劝各位学弟学妹们,该打造你的技术影响力了!
      五年了,我在 CSDN 的两个一百万。
      Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
      面试官都震惊,你这网络基础可以啊!
      你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
      心情不好的时候,用 Python 画棵樱花树送给自己吧
      通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
      13 万字 C 语言从入门到精通保姆级教程2021 年版
      10行代码集2000张美女图,Python爬虫120例,再上征途
    小工具 小游戏
    Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

    京公网安备 11010502049817号