CSS之布局方式(内/外部显示及inline-block显示类型)附＜行内块空白间隙解决方案＞

一、布局方式

tip:以下示例代码为方便观察已在css中加上边框

布局方式分为外部显示类型和内部显示类型两种：

1. 外部显示类型

浏览器默认的布局方式，控制的是相邻盒子之间的布局，分为块级盒子和行内盒子两种：

a.块级盒子/元素

• 块级元素就可以设置宽度和高度，
• 只有文字内容不设置宽度高度，宽度为父元素的一行，高度为内容撑开的高度。
• 宽度高度可以设置
• 内外边距设置均有效果
• 排列方式，从上至下

比如 <div>，<h1>..<h6> ,<p> 等，单独成行，排列从上向下

它的宽度（指盒子的整体宽度）会占满整个浏览器，后边的盒子会被挤占到下一行去显示。

<!--块级盒子-->
<p>这是一段段落</p>
<p>这是第二段</p>
<h1>这是一个h1</h1>
<div>这是一个盒子</div>

b.行内盒子/元素

• 内联元素的宽高是auto，宽高只会一直随内容的宽高在同步变化。
• 宽度高度是auto，靠内容撑开
• 设置宽度高度无效
• 设置上下内外边距无效
• 排列方式，从左至右

比如 <span>, <a>,<i>,<b>,<s> 等，它的宽度是内容的宽度，后边的盒子会跟在它的后边继续排列

包括行内块

<span >这是一行文字</span>
<a href = "http://www.baidu.com">一个连接</a>
<b>粗体</b>

---

区别：

• 行内盒子：无法手动设置宽高
  padding 和 margin :
  垂直方向上生效，但不会挤占其他盒子的空间， 导致重叠；
  水平方向上则会挤占其他盒子的空间。

.inline {
  margin: 25px;
  padding: 25px;
}
<p>在里边有一个<span class="inline">行内</span>元素</p>
<p>这是另一块级元素</p>

• 块级盒子：宽高、padding 和 margin 都生效并且挤占空间。

<style>
#block2 {
    border: yellow 2px solid;
    height: 100;
    width: 300;
    padding: 10;
    margin: 10;
}
</style>
<p id = "block2">我是一个块级</p>
<p id = "block2">我是另一块级盒子</p>

---

2. 内部显示类型

控制这个盒子内部的 “子盒” 之间的排列方式。
行内盒子里边只能有行内盒子，不能有块级盒子

设置 display 的值修改内部盒子的排列方式

• display: flex 流式布局 :

• display: grid 栅格布局
  一种自适应布局，能根据不同终端自动伸缩容器的宽高

它们属于非正常的文档流。

2.1 flex 流式布局

display:flex

---

首先，放置两个块级盒子：

<div class="container">
    <p>一yiyiyi</p>
    <p>二ererer</p>
</div>

可以看到两个盒子单独占了一行:

---

但此时我们想让一个盒子里的两个块级元素放在相同的一行，那么也相当简单~
只要在style中设置两个块级的父元素display: flex;就可以实现啦！

<style>
.container {
    display: flex;
}
</style>
    
<div class="container">
    <p>一yiyiyi</p>
    <p>二ererer</p>
</div>

让我们看看效果：

Amazing！两个块级元素排列在一行了！

这个排列方式似曾相识，很像行内盒子的布局方式，但在这里我们称为流式布局

二、行内块元素inline-block 显示类型

display:inline-block
例：input、img

属于行内元素/盒子，但以块级元素显示

适用：

1. 盒子的外部类型是行内盒子inline （不把后边的盒子挤占到下一行）
2. 且想同时设置宽高、padding 和 margin

使用inline-blcok显示类型：这个盒子有了宽高，并且无论是水平还是垂直方向上的 padding 和 margin，都可以把周围的盒子的空间挤占掉。

<style>
.inline-block {
    display: inline-block;
    width: 100px;
    padding: 10px;
    margin: 10px;
}
.inline-block, p {
    border: 1px solid red;
}
</style>

<p>这是一个块级<span class="inline-block">这是一个行内元素</span>元素</p>
<p>这是另一个块级元素</p>

可以看到此时，行内元素的宽度、padding和margin在水平和垂直方向上已经生效，且挤占空间，而不是重叠。

2.1行内块的空白间隙解决方案

当使用行内块元素时，会发现一条多出来的空白间隙：

<style>
.box {
	/* 设置背景颜色方便查看间隙 */
    background-color: violet;
}
img {
    width: 200px;
}
</style>

<div class = 'box'>
    <img src = "./pic.jpg">
    <img src = "./pic.jpg">
</div>

如果要使两个行内块元素之间的空白间隙消失，
解决方案:style中给父元素中添加font-size:0

<style>
.box {
    background-color: violet;
    /* 幽灵空白节点：两张图片中间的空白，解决如下 */
    font-size: 0px;
}
img {
    width: 200px;
}
</style>

<div class = 'box'>
    <img src = "./pic.jpg">
    <img src = "./pic.jpg">
</div>