web前端-html-css-display

display

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      a {
        background-color: #bfa;
        display: none;
        width: 500px;
        height: 500px;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: orange;
        visibility: hidden;
      }
    style>
  head>
  <body>
    <div class="box">div>
    <a href="我是一个大大的超链接">a>
    <span>hellospan>
    <img src="" alt="" />
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

请添加图片描述

1. display

将一个内联元素变成块元素，
- 通过 display 样式可以修改元素的类型
可选值：
- inline: 可以将一个元素作为内联元素显示
- block: 可以将一个元素设置为块元素显示
- inline-block: 将一个元素转换为行内块元素
  
  可以使一个元素既有行内元素的特点又有块元素的特点
  既可以设置宽高，又不会独占一行
- none: 不显示元素，并且元素不会在页面中继续占有位置

display: none;
1

使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置

2. visibility

可以用来设置的元素的隐藏和显示的状态
可选值：
- visible 默认值，元素默认会在页面中显示
- hidden 元素会隐藏不显示
使用 visibility: hidden;隐藏的元素虽然不会在页面中显示，
- 但是它的位置会依然保持

visibility: hidden;
1

相关阅读:
SV-315C 15寸触模屏 I3工控机网络广播主机
云南财经大学计算机考研资料汇总
胆结石患者该怎样做好护理？
java计算机毕业设计社区医疗服务管理系统源程序+mysql+系统+lw文档+远程调试
造车先做三蹦子-之三:自制数据集(6x6数据集)230103
浏览器缓存的优化方案和思路
如何说服技术老大用 Redis ?
联想笔记本win10无法启动vmware虚拟机
Flutter 上传文件和保存在应用程序存储目录
【非对称加密算法】RSA算法

原文地址：https://blog.csdn.net/weixin_64933233/article/details/127815319