• 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>

    展示效果：

     

  • 相关阅读:
    C++(17)：lambda捕获this的副本
    使用.NET简单实现一个Redis的高性能克隆版（六）
    读周岭《认知觉醒》第一次有感
    pip安装pytorch报错
    为Ubuntu18.04云服务器创建sudo用户
    Python 基于OpenCV+face_recognition实现人脸捕捉与人脸识别（照片对比）
    六、C++ 运算符重载
    给大家分享一下短视频创业要注意的三个关键问题,准备入行的速速收藏
    光路科技：工业以太网交换机引领工业互联网新篇章
    【2023】M1/M2 Mac 导入Flac音频到Pr的终极解决方案
  • 原文地址：https://blog.csdn.net/m0_63001937/article/details/126319862