• css----display(显示) 与 Visibility(可见性)


    隐藏元素

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失

    display可能的值

    部分属性详解:

    1. block

    特点:1)独占一行;

               2)元素的高度,宽度,行高以及顶和底边距均可设置;

               3)不设置宽度时,宽度撑满一行;

    块级元素有:<div> , <p> , <h1> .. <h6> , <ol> , <ul> , <dl> , <table> , <address> , <blockquote> , <form> , <article> , <header> , <footer> , <nav> , <section> , <html> , <body> 等;

    不支持样式:vertical-align;

    2. inline

    特点:1)和其他元素在一行;

               2)内容撑开宽度,即元素的宽度就是它包含的文字或图片的宽度,不可改变;

               3)宽高不可设置;

               4)代码换行被解析成空格;

    内联元素有:<a> , <span> , <br> , <i> , <em> , <strong> , <label> , <q> , <var> , <cite> , <code> , <area> , <del> , <label> , <map> , <mark> , <output> , <pre>  等;

    不支持样式:background-position ;clear ;clip ;height | max-height | min-height ;width | max-width | min-width ;overflow ;text-align ;text-indent ;text-overflow;

    3. inline-block

    特点:1)不设置宽高时,内容撑开高度;

               2)非独占一行;

               3)可设置宽高;

               4)代码换行被解析成空格;

    标签:<audio> ,<button>,<canvas>,<embed>,<iframe>,<img>,<input>,<keygen>,<meter>,<object>,<progress>,<select>,<textarea>,<video>

    不支持样式:clear ;

    4. none

    特点:隐藏元素并脱离文档流;

    标签:<base>,<link>,<meta>,<title>,<datalist>,<dialog>,<param>,<script>,<source>,<style>

    5. list-item

    特点:1)不设宽度时,宽度撑满一行;

               2)独占一行;

               3)可设置宽高;

    6. table

    特点:1)不设置宽度时,宽度由内容撑开;

               2)非独占一行;

               3)支持宽高;

               4)默认具有表格特征,可设置table-layout、border-collapse、border-spacing等表格专有属性;

    7. table-cell

    特点:1)不设置宽度时,宽度由内容撑开;

               2)非独占一行;

               3)支持宽高;

               4)垂直对齐;

               5)同级等高;

  • 相关阅读:
    自定义Hooks:四个典型的使用场景
    FreeSql的各种工程demo上新啦
    萌新看过来,你还学不懂VScode插件吗?
    项目7加法运算前后端分离AspNetMvcApi&Vue实现
    张高兴的 Entity Framework Core 即学即用:(一)创建第一个 EF Core 应用
    task5
    Day09参数+递归
    K8S原来如此简单(四)Service+Ingress
    别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼!
    task23
  • 原文地址:https://www.cnblogs.com/humiao-0626/p/css-display.html
Copyright © 2020-2023  润新知