码农知识堂 - 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. 相关阅读:
        如何选择线程数量
        MySQL函数
        Fiori 动态磁贴示例
        VR全景技术打造“智慧亚运”,实现720度自由视角
        如何做好风险管控,杜绝项目风险突然爆发?
        STM32单片机DS18B20测温液晶1602显示例程(Proteus仿真+程序)
        【Qt】:常用控件(五:显示类控件)
        MySQL数据库备份实战
        java基础面试题
        没有基础可以转行ICT行业吗?
      3. 原文地址:https://blog.csdn.net/weixin_54401017/article/details/134552628
    • 最新文章
    • 攻防演习之三天拿下官网站群
      数据安全治理学习——前期安全规划和安全管理体系建设
      企业安全 | 企业内一次钓鱼演练准备过程
      内网渗透测试 | 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号