CSS中的display属性的详解与实例应用，以及解决行内元素存在间隙的bug问题

首先，display中开发中常用的属性基本上就是一下几种：

none	block	inline	inline-block	inherit
隐藏	让标签隐块级元素显示	让标签以行内元素显示	让标签以行内快元素显示	从父类中继承

1 display:none用于隐藏某个元素

----这个没什么好说的，加上就隐藏了呗

2display:block用于让某个元素以块级元素显示

---那啥是块级元素？

常见的有div, h1~h6, ul, ol, li, p

---有块级元素啥特点？

总是从新的一行开始
高度，行高，外边距，内边距都是可控的
宽度默认是100%
可以容纳块级元素和行内快元素

3display:inline用于让某个元素以行内元素显示

---那啥是行内元素？

常见的有a ,span ,strong ,b , em , i ,del ,s ,u

---有块级元素啥特点？

和相邻的行内元素都是在一行上
宽度和高度都是无效的，垂直方向上的内边距和外边距是无效的，但是水平方向的是有效的
宽度默认是本身内容的宽度
只能容纳文本和其他行内元素（a标签比较特殊，能够容纳块级元素）

4 display:inline-block用于让某个元素以行内快元素显示

---那啥是行内快元素？

常见的有a ,span ,strong ,b , em , i ,del ,s ,u

---有块级元素啥特点？

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。（解决办法：给他的父元素加上inline-block）
默认宽度就是它本身内容的宽度。
高度，宽度，外边距，内边距都可控

5display:inherit 用于继承父元素的display的值

-------------------------------------------------实例讲解---------------------------------------------

block:

    <style>
        .for{
            height: 100px;
            display: block;
            background-color: #968bff;
        }
        .bar{
            height: 100px;
            display: block;
            background-color: #67ff7b;
        }
    </style>
</head>
<body>
<div class="for"></div>
<div class="bar"></div>
</body>

如图所示：（参照上边的特点）

inline:

    <style>
        .for{
            height: 100px;
            display: inline;
            background-color: #968bff;
        }
        .bar{
            height: 100px;
            display: inline;
            background-color: #67ff7b;
        }
    </style>
</head>
<body>
<div class="for">inline001</div>
<div class="bar">inline001</div>
</body>

此时设置的宽高已经失效：

inline-block:

    <style>
        .for{
            height: 100px;
            display: inline-block;
            background-color: #968bff;
        }
        .bar{
            height: 100px;
            display: inline-block;
            background-color: #67ff7b;
        }
    </style>
</head>
<body>
<div class="for">inline001</div>
<div class="bar">inline001</div>
</body>

此时设置宽高仍然有效：不但具有了行内元素的在一行显示的特性，同时也具有了块级元素的特性。

但是有一个问题就是设置inline和inline-block的时候，两个元素之间都有间距，这个是为什么呢？

实际上，这是inline元素自身出现的问题，而inline-block结合了inline和block属性，当然也就存在这个问题了。这些空隙是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的div标签写成一行，空白符消失，菜单之间也就紧凑起来了。不信大家且看：

我这样吧两个div写成一行，再看效果：

<body>
<div class="for">inline001</div><div class="bar">inline001</div>
</body>

但是这样写导致结构不清晰不说，不能所有的都写成一行啊，这显然是不合理的，怎么办呢？只要是以行内元素显示的，都一定有一个font-size,只需要把这个元素的font-size设置为0，把这个元素的font-size设置为定值（一定要设置，因为font-size会继承）就可以了，大家且看：

    <style>
        .for{
            height: 100px;
            display: inline-block;
            background-color: #968bff;
            font-size: 14px;
        }
        .bar{
            height: 100px;
            display: inline-block;
            background-color: #67ff7b;
            font-size: 14px;
        }
        body{
            font-size: 0px;
        }
    </style>
</head>
<body>
<div class="for">inline001</div>
<div class="bar">inline001</div>
</body>

Inherit:

继承父亲的display方式

    <style>
        .bar{
            height: 100px;
            display: inline;
            background-color: #67ff7b;
            font-size: 14px;
        }
        .for{
            display: inherit;
            height: 50px;
            background-color: #ff5cfe;
        }
    </style>
</head>
<body>
<div class="bar">
    <div class="for">我设置高度无效，因为继承了父亲，以inline显示</div>
</div>
</body>

好了，对大家有帮助就点个关注吧，工作一年了，持续总结工作中的经验和bug,持续更新··················

CSS中的display属性的详解与实例应用，以及解决行内元素存在间隙的bug问题

猜你喜欢