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

    展示效果：

     

  • 相关阅读:
    PSI项目介绍
    JS 数组的各个方法汇总
    动画二：动画（keyformes）
    LeetCode_数组_中等_915.分割数组
    基于PHP+MySQL的大学生就业指导人力资源网
    二十三、java版 SpringCloud分布式微服务云架构之 Java 多态
    Spring Cloud(Finchley版本)系列教程(二) 客户端负载均衡Ribbon
    绿色便携方式安装apache+mysql+tomcat+php集成环境并提供控制面板
    二十九、【进阶】MySQL索引的概述和索引查询
    图解 Redis 分布式锁，写得太好了！
  • 原文地址：https://blog.csdn.net/m0_63001937/article/details/126319862