display属性

最新推荐文章于 2024-04-11 17:13:48 发布

我的绝伦大人

最新推荐文章于 2024-04-11 17:13:48 发布

阅读量4k

点赞数 7

分类专栏： CSS

本文链接：https://blog.csdn.net/yushuangyushuang/article/details/79216228

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

display的属性

这里写图片描述

一、关于`diaplay:none`

（一）让一个元素隐藏的方法（比较常见的5种）

diaplay:none
visibility:hidden
opacity:0
.hide { //将元素移出可视区 position: absolute; top: -9999px; left: -9999px; }
将元素的宽度和高度设置为0

（二）`diaplay:none` 和 `visibility:hidden`有什么区别

1.display属性依照词义真正隐藏元素,被隐藏的元素不占据文档空间，这种方式产生的效果就像元素完全不存在。不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
2.如同opacity属性，被隐藏的元素在文档布局中仍保留原来的空间，与opacity唯一不同的是它不会响应任何用户交互。

二、关于`diaplay:block`

块状元素的特点

（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行；（一个块级元素独占一行）
（2）元素的高度、宽度、行高以及顶和底边距都可设置；
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

三、关于`diaplay:inline`

内联元素的特点

（1）和其他元素都在一行上；
（2）元素的高度、宽度、行高、外边距和内边距都不可设置；
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

四、关于`diaplay:inline-block`

内联块元素的特点

（1）和其他元素都在一行上；
（2）元素的高度、宽度、行高以及顶和底边距都可设置。

问题一： inline-block元素上浮无法对齐

参考文章一
 参考文章二

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     *{
    border: 0;
    padding: 0;
    margin: 0;
     }
    body{
    font-size: 14px;
     }
     .wrap{
    width: 960px;
    margin: 0 auto;
    margin-top: 100px;
     }
     .ad{
    width: 100px;
    height: 60px;
    background-color: #0088ff;
    color: #fff;
    display: inline-block;
     *display: inline;
     *zoom:1;
     }
     </style>
</head>
<body>
<div class="wrap">
     <div class="ad">过客</div>
     <div class="ad">想把我唱给你听想把我唱给你听</div>
     <div class="ad"></div>
     <div class="ad">穿越太平洋</div>
</div>
</body>
</html>

这里写图片描述

出现这种情况的原因是：

行内元素和替换元素（如<input><textarea>等）会有一个叫做基线（baseline）的玩意，他的位置
位于文本框的底部，即文字的最底端；当块状行内元素无文本填充的时候，它的基线就会自动移至元素的  
最底端；同时，图片以及其他非替换元素的基线也为元素的最底端。

解决办法：

既然页面的混乱是因为“基线对齐”导致的，那只需要设置元素的垂直对齐不参照基线即可，引入vertical-align属性，设置元素的垂直对齐方式。

这里写图片描述

top、middle、bottom任选其一就可实现对齐。
将 vertical-align:top; 加入 .ad{}样式即可，

这里写图片描述

问题二：inline-block元素的默认间距问题

参考文章一

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         *{
    border: 0;
    padding: 0;
    margin: 0;
     }
    body{
    font-size: 14px;
     }
    div{
        width:50px;
        height:20px;
        border:1px solid red;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div>林杨</div>
    <div>余周周</div>
</body>
</html>

这里写图片描述

解决办法：换行符惹的祸

方法一：把标签内容写在同一行  
虽然这会使代码可读性降低，但这也不失为一种解决方法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         *{
    border: 0;
    padding: 0;
    margin: 0;
     }
    body{
    font-size: 14px;
     }
    div{
        width:50px;
        height:20px;
        border:1px solid red;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div>林杨</div><div>余周周</div>
</body>
</html>

方法二：增加注释符

<body>
    <div>林杨</div><!--
    --><div>余周周</div>
</body>

方法三：父元素设置font-size:0

此种方法给父元素设置了font-size:0之后必须给该元素设置font-size

方法四：父元素Letter-spacing：-3px，子元素letter-spacing:0

该方法兼容性良好，可以考虑使用。

方法五：给该元素float:left

此种方法虽然可以实现取消间距，但是可能对布局产生影响，需要考虑布局

我的绝伦大人

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
1
评论
display属性

display的属性一、关于diaplay:none（一）让一个元素隐藏的方法（比较常见的5种）diaplay:none visibility:hiddenopacity:0.hide { //将元素移出可视区 position: absolute; top: -9999px; left: -9999px; }将元素的宽度和高度设置为0
复制链接

扫一扫