display: inline-block的总结

在这里插入图片描述

问题：当子组件动态的被拉高的时候，父组件的高度不变。

这就出现了两个组件相嵌的效果（如下）

在不拉高的情况下是正常的

在这里插入图片描述

但是一旦拉高就不正常了

在这里插入图片描述

我尝试了很多种办法，设置高度，浮动，定位什么的都没有用，后来看了一下网易云音乐的源代码，发现他用到了这个display:inline-block;居然奇迹般的好了，真的特别牛！
在这里插入图片描述

知识点

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
style>
head>
<body>

<h1>display 属性h1>

<h2>display: inlineh2>
<div>Shanghai is one of the four direct-administered municipalities of
<span class="a">the People's Republic of Chinaspan>. Welcome to
<span class="a">Shanghaispan>!div>

<h2>display: inline-blockh2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of Chinaspan>. Welcome to <span class="b">Shanghaispan>!div>

<h2>display: blockh2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of Chinaspan>. Welcome to <span class="c">Shanghaispan>!div>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

display:inline的效果

由效果图可以看出，inline不支持设置宽高、内边距，外边距，即使设置了也不会产生应有的效果。

在这里插入图片描述

display:block的效果

由效果图可以看出，display：block 虽然支持宽高、内边距、外边距的设置，但是每一个block后面，都会默认自动添加一个换行符。

在这里插入图片描述

display：inline-block的效果

在这里插入图片描述

由上述效果图可以看出，inline-block综合以上两个的优点，可以设置宽、高、边距，而且还不会自动换行。

而且inline-block还有一个好处就是，当变得拥挤时会自动换行。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LvyADXCg-1661074224226)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220821172826488.png)]$

当我调整模块home的宽度过大的时候会自动换行。

在这里插入图片描述

✨ $\textcolor{blue}{原创不易，为了最基础的欲望！}$

👍 $\textcolor{green}{点赞，不会损失一匹布！}$

⭐️ $\textcolor{green}{收藏，不会丢失一厘金！}$

✏️ $\textcolor{green}{留下痕迹，却会温暖作者的心！}$

在这里插入图片描述

相关阅读:
自建图床实现typora图片上传
MyBatis批量更新SQL
MySQL — VARCHAR 长度截断问题
[CC2642r1] ble5 stacks 蓝牙协议栈介绍和理解
Ftp连接显示connection refused问题的解决
20221126给Chrome浏览器安装扩展程序——猫抓
JSON和全局异常处理
Nodejs安装及快速入门
Istio服务网格进阶⑦：Istio流量治理之故障注入与重试
flutter Podfile.lock与pubspec.yaml版本不同问题

原文地址：https://blog.csdn.net/m0_59792745/article/details/126453163

display: inline-block的总结

目录

问题：当子组件动态的被拉高的时候，父组件的高度不变。

知识点

display:inline的效果

display:block的效果

display：inline-block的效果