inline-block 之 “幽灵空白节点”
1. 问题&现象
上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title>
<style>
.box {
width: 200px;
height: 200px;
overflow-x: auto;
}
.box::-webkit-scrollbar {
background-color: aqua;
}
.box1 {
display: inline-block;
height: 100%;
width: 100%;
background-color: antiquewhite;
}
style>
head>
<body>
<div class="box">
<div class="box1">div>
div>
body>
html>
效果展示：
问题1：看效果图，子元素box1的高度是100%，计算出来应该200px，为什么纵轴还多了个滚动条呢？
2. “幽灵空白节点”的产生&解决
上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title>
<style>
.box {
background-color: antiquewhite;
}
.box1 {
display: inline-block;
}
style>
head>
<body>
<div class="box">
<div class="box1">div>
div>
body>
html>
效果图：
从效果图中我们可以看出：父子元素都未设置高度，但是父元素box明显有高度
原因：
将子元素box1设置成inline-block后，子元素box1同级其实多出来了一个所谓的“空白节点”，而父元素的高度是由这个“空白节点”撑开的， 这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样。 这个“空白节点”我们称之为“幽灵空白节点”
解决方案：
- 子元素box1设置 display: block;
- 父元素box：font-size: 0;（font-size是有继承性的，子元素需要重新设置一下font-size）
回答上边的问题1：
因为box1的display设置成inline-block，父元素下边其实多了一个有一定高度的空白节点，父元素高度200px，子元素box1高度也是200px，那父元素下边实际内容高度其实是 子元素内容高度+空白节点高度，内容高度大于父元素高度，又因为父元素设置了overflow-x设置了auto（overflow-y也会变成auto），所以就出现了纵向滚动条