• HTML: css中的display属性

    目录

    display: none

     未使用display: none前

     使用display: none后

    display: inline

    未使用inline之前:

    使用display: inline之后：

    display: block

    未使用inline前： 

     使用display: block之后：

    display: inline-block

    未使用dispinline_block:

    使用display：inline-block之后： 

    display: none

    用于隐藏对象

     未使用display: none前

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #d1 {
    8.       /*背景色为red*/
    9.       background-color: red;
    10.       /*display: none;*/
    11.     }
    12.  
    13.     #d2 {
    14.       /*背景色为blue*/
    15.       background-color: blue;
    16.     }
    17.  
    18.   style>
    19. head>
    20. <body>
    21.   <div id="d1">你好div>
    22.   <div id="d2">再见div>
    23. body>
    24. html>

    展示效果:

     

     使用display: none后

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #d1 {
    8.       /*背景色为red*/
    9.       background-color: red;
    10.       display: none;
    11.     }
    12.  
    13.     #d2 {
    14.       /*背景色为blue*/
    15.       background-color: blue;
    16.     }
    17.  
    18.   style>
    19. head>
    20. <body>
    21.   <div id="d1">你好div>
    22.   <div id="d2">再见div>
    23. body>
    24. html>

    展示效果:

     

    对某一标签使用none之后， 该标签将不再显示再前端， 且原来的位置也不复存在，但该标签代码段还存在于文档中。 

    display: inline

    将标签设置为行内标签

    未使用inline之前:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       /*display: inline;*/
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       /*display: inline;*/
    19.     }
    20.  
    21.  
    22.   style>
    23. head>
    24. <body>
    25.   <div id="s1">你好div>
    26.   <div id="s2">再见div>
    27. body>
    28. html>

    展示效果:  

    使用display: inline之后：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       display: inline;
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       display: inline;
    19.     }
    20.  
    21.  
    22.   style>
    23. head>
    24. <body>
    25.   <div id="s1">你好div>
    26.   <div id="s2">再见div>
    27. body>
    28. html>

    展示效果:

     

     块儿级标签可以设置长宽,, 当我们将div(块儿级标签)标签display: inline之后, 我们设置长宽的代码将会无效, 即便有这个设置长宽的代码，前端也不会有任何显示长宽的效果。

    display: block

    将标签设置为块儿级标签

    未使用inline前： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       /*display: block;*/
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       /*display: block;*/
    19.     }
    20.   style>
    21. head>
    22. <body>
    23.   <span id="s1">你好span>
    24.   <span id="s2">再见span>
    25. body>
    26. html>

    展示效果:

     使用display: block之后：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       display: block;
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       display: block;
    19.     }
    20.   style>
    21. head>
    22. <body>
    23.   <span id="s1">你好span>
    24.   <span id="s2">再见span>
    25. body>
    26. html>

    展示效果:

    行内标签无法设置长宽, 即便设置了前端也不会有任何效果, 当我们将span(行内标签)标签display: block之后, 我们设置长宽的代码生效。

    display: inline-block

    既有块儿级标签的效果， 又有行内标签的特点，譬如既可以在一行显示，又可以在一行设置长宽。

    未使用dispinline_block:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       /*display: inline-block;*/
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       /*display: inline-block;*/
    19.     }
    20.  
    21.  
    22.   style>
    23. head>
    24. <body>
    25.   <div id="s1">你好div>
    26.   <div id="s2">再见div>
    27. body>
    28. html>

    展示效果： 

    使用display：inline-block之后： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.   <style>
    7.     #s1 {
    8.       height: 200px;
    9.       width: 200px;
    10.       background-color: red;
    11.       display: inline-block;
    12.     }
    13.  
    14.     #s2 {
    15.       height: 200px;
    16.       width: 200px;
    17.       background-color: blue;
    18.       display: inline-block;
    19.     }
    20.  
    21.  
    22.   style>
    23. head>
    24. <body>
    25.   <div id="s1">你好div>
    26.   <div id="s2">再见div>
    27. body>
    28. html>

    展示效果：

     

  • 相关阅读:
    windows FFmpeg安装教程
    create® 3入门教程-导航
    设计模式
    深度学习三巨头邀你来参会！赢取RTX 3090！NVIDIA GTC 2022 AI 大会来了！
    知识图谱02——使用python将信息录入neo4j
    猿创征文｜【Vue五分钟】 Vuex状态管理总结
    SpringBoot实战案例：图书管理系统
    主成分分析笔记
    Mac 重启后 nvm -v 报错 zsh: command not found: nvm
    状态管理Pinia
  • 原文地址：https://blog.csdn.net/m0_63001937/article/details/126319862