zoukankan      html  css  js  c++  java

  • display显示属性理解

    display属性设置一个元素应如何显示，是我们在前端开发中常常使用的一个属性，其中，最常见的有：

    一.隐藏元素display:none;


    主要区别visibility：hidden; 和display:none
    display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
    visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
    visibility属性指定一个元素应可见还是隐藏。默认元素是可见的：visibility:visible;


    比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！

    二.块元素display:block;


    块元素特性：
    • 块元素的display属性值默认为block。
    • 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
    • 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。支持margin：auto;
    • 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
    • 块元素中可以容纳其他块级元素或行内元素。
    • 常见的块元素由<p><div><h1><li>等等。

    三.内联元素display:inline;


    内联元素特性：
    • 内联元素的display属性值默认为inline。
    • 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级内联元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
    • 内联元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
    • 内联元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
    • 常见的内联元素由<a><em><img>等等。
    • 内联元素一般不可以包含块级元素。

    通过对一个行内元素设置display:　block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。

    应用：

    如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。

     
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         *{padding: 0;margin:0;list-style: none;}
    8.         ul li{float: left;}
    9.         a{display:block; 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
    10.     </style>
    11. </head>
    12. <body>
    13.     <ul>
    14.         <li><a href="">1</a></li>
    15.         <li><a href="">2</a></li>
    16.         <li><a href="">3</a></li>
    17.         <li><a href="">4</a></li>
    18.         <li><a href="">5</a></li>
    19.     </ul>
    20. </body>
    21. </html>

    效果如下：

    四.内联块元素display:inline-block;


    内联块元素特性：
    • 不强制换行,没有宽度内容撑开宽高
    • 支持宽、高、margin、padding，但不支持margin：auto;
    • 内联块元素居中可使用父容器居中。
    • 即使margin padding都设置为0；代码换行仍然会产生空白符，解决方法：设置父元素字体大小为0像素
    • IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以
    • 常见内联块元素

    根据名字，实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。举例说明，我们之前在做横向导航菜单的时候，一般是用ul li a组合，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。

    代码如下：

     
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
    8.         li{display: inline-block;border: thin solid red;}
    9.     </style>
    10. </head>
    11. <body>
    12.     <ul>
    13.         <li><a href="">1</a></li>
    14.         <li><a href="">2</a></li>
    15.         <li><a href="">3</a></li>
    16.         <li><a href="">4</a></li>
    17.         <li><a href="">5</a></li>
    18.     </ul>
    19. </body>
    20. </html>

    效果图如下：

    确实实现了横向的排列，实际上，也可以设置宽和高，大家可以自己尝试。但是，很明显有一个问题---我将padding和margin的值都设置为0，为什么他们之间还会有距离呢？实际上，这是inline元素自身出现的问题，而inline-block结合了inline和block属性，当然也就存在这个问题了。这些空隙是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

    解决方法：我们要明白空白符归根结底是一个字符，只要我们将ｕｌ中的字符的大小设置位０，那么空白符也就不会存在了，但是这是a的字体大小也会继承ul的字体大小，那么就不见了，该怎么办，只需要将a中再设置一个字体不为0的大小覆盖即可。

     
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. <style>
    7. ul{font-size: 0;}
    8. ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
    9. li{display: inline-block;border: thin solid red;font-size: 15px;}
    10. </style>
    11. </head>
    12. <body>
    13. <ul>
    14. <li><a href="">1</a></li>
    15. <li><a href="">2</a></li>
    16. <li><a href="">3</a></li>
    17. <li><a href="">4</a></li>
    18. <li><a href="">5</a></li>
    19. </ul>
    20. </body>
    21. </html>

    最终得到的效果图如下：

    五.display:inherit;

    本文地址：http://www.cnblogs.com/zhaowy/

    版权声明：本文为原创文章，版权归 作者所有，欢迎分享本文，转载请保留出处！
  • 相关阅读:
    [翻译]ASP.NET MVC 3 开发的20个秘诀（六）[20 Recipes for Programming MVC 3]：找回忘记的密码
    No.9425 [翻译]开发之前设计先行
    [翻译]ASP.NET MVC 3 开发的20个秘诀（五）[20 Recipes for Programming MVC 3]：发送欢迎邮件
    内联（inline）函数与虚函数（virtual）的讨论
    内联函数、模板、头文件杂记(转)
    gdb使用整理
    data structure and algorithm analysis上一点摘录
    lsof by example 例子
    linux core文件机制
    转一篇shared_ptr的小文
  • 原文地址：https://www.cnblogs.com/zhaowy/p/8400215.html
Copyright © 2011-2022 走看看