add: inline-block 属性的间隙问题

lguow · Oct 5, 2019 · c377339 · c377339
1 parent a63bcd2
commit c377339
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 9 deletions.
diff --git a/03-CSS进阶/03-CSS布局.md b/03-CSS进阶/03-CSS布局.md
@@ -27,11 +27,11 @@
 
 1、**table 表格布局**：早期使用的布局，如今用得很少。
 
-2、**float 浮动 + margin**：问题较多。
+2、**float 浮动 + margin**：兼容性好。
 
-3、**inline-block 布局**：问题较多。
+为了兼容低版本的IE浏览器，很多网站（比如腾讯新闻、网易新闻、淘宝等）都会采用 float 布局。
 
-对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+3、**inline-block 布局**：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
 
 4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。
 
@@ -45,9 +45,9 @@ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局
 
 5、响应式布局。
 
-## float 属性
+## float 布局
 
-> 是 CSS 中比较麻烦的一种属性。
+是 CSS 中一种比较麻烦的属性，涉及到 BFC 和清除浮动（面试的重点）。
 
 ### float 属性的特点
 
@@ -63,11 +63,116 @@ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局
 
 在此基础之上，如果给`div1`增加`float: left`属性后，效果如下：
 
-![](http://img.smyhvae.com/20191005_2035.png)
+![](http://img.smyhvae.com/20191005_2037.png)
 
 上图中，可以看到，`div1`设置为浮动后，会脱离文档流，不会对`div2`的布局造成影响；但是`div1`不会脱离文本流，它会影响`div2`中文字的排列。
 
-其实，这正是 float 属性本身的含义。float 本身是用来做图文混排、文字环绕的效果。
+其实，这正是 float 属性的作用。float 本身是用来做图文混排、文字环绕的效果。
+
+### float 所带来的影响
+
+**1、对自身的影响**：
+
+- 形成“块”（BFC）
+
+- 位置尽量靠上
+
+- 位置尽量靠左/右
+
+下面这两个并列的`div1`和`div2`，设置为浮动之后的效果：（都是尽量靠左显示的）
+
+![](http://img.smyhvae.com/20191005_2130.png)
+
+在上方代码的基础之上，增加 `div2`的宽度之后，会发现，`div2`掉下来了：
+
+![](http://img.smyhvae.com/20191005_2135.png)
+
+**2、对兄弟元素的影响**：
+
+- 不影响其他块级元素的位置
+
+- 影响其他块级元素的内部文本
+
+**3、对父级元素的影响**：
+
+- 从父级的布局中“消失”
+
+- 造成父级元素的高度塌陷：父级元素撑开 div1 之后（父级元素里没有其他元素的情况下），如果设置 div1 为 float 之后，，会让父级元素的高度变为0。
+
+## inline-block 布局
+
+对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+
+**思路**：像文本一样去排列 block 元素，没有清除浮动等问题。
+
+**存在的问题**：需要处理间隙。代码举例如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+</head>
+<style>
+	.container{
+		width: 300px;
+		height: 300px;
+		background: pink;
+	}
+
+	.div1{
+		width: 100px;
+		height: 100px;
+		background: green;
+		display: inline-block;
+	}
+
+	.div2{
+		width: 100px;
+		height: 100px;
+		background: yellowgreen;
+		display: inline-block;
+	}
+
+	.div3{
+		background: yellow;
+	}
+</style>
+
+<body>
+	<div class="container">
+		<div class="div1">div1的inline-block 属性</div>
+		<div class="div2">div2的inline-block 属性</div>
+		<div class="div3">
+			琴棋书画不会，洗衣做饭嫌累。
+		</div>
+	</div>
+</body>
+
+</html>
+```
+
+![](http://img.smyhvae.com/20191005_2200.png)
+
+上面的代码，存在两个问题。
+
+**问题一**：如果设置`div2`的宽度为 200px 之后，`div2` 掉下来。
+
+**问题二**：`div1`和`div2`设置为 inline-block之后，这两个盒子之间存在了间隙。这是因为，此时的 `div1`和`div2` 已经被当成文本了。文本和文本之间，本身就会存在间隙。
+
+为了去掉这个间隙，可以有几种解决办法：
+
+办法1：设置父元素`container`的字体大小为0，即`font-size: 0`，然后设置子元素 `div1`、`div2`的字体`font-size: 12px`。
+
+办法2：在写法上，去掉`div1`和`div2`之间的换行。改为：
 
+```html
+<div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div>
+```
 
+## 响应式布局
 
+移动端用得较多，暂时忽略。
diff --git a/14-前端面试/01-页面布局.md b/14-前端面试/01-页面布局.md
@@ -464,14 +464,12 @@
 
 什么时候用 flex 布局 or 表格布局，看具体的场景。二者没有绝对的优势，也没有绝对的不足。
 
-
 方法5：网格布局
 
 - CSS3中引入的布局，很好用。代码量简化了很多。
 
 PS：面试提到网格布局，说明我们对新技术是有追求的。
 
-
 ### 延伸：如果题目中去掉高度已知
 
 问题：题目中，如果去掉高度已知，我们往中间的模块里塞很多内容，让中间的模块撑开。会发生什么变化？哪个布局就不能用了？