From ea50bdf13bb262d70b32d96440607c6a36431d33 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Fri, 14 Jan 2022 22:31:45 +0800
Subject: [PATCH] fix

---
 blog/front-end-learn/css-box.md          | 160 ++++++++++++++++++++++-
 blog/front-end-learn/demo/css-box-2.html |  18 +++
 blog/front-end-learn/demo/css-box-3.html |  32 +++++
 blog/front-end-learn/demo/css-box-4.html |  14 ++
 4 files changed, 219 insertions(+), 5 deletions(-)
 create mode 100644 blog/front-end-learn/demo/css-box-2.html
 create mode 100644 blog/front-end-learn/demo/css-box-3.html
 create mode 100644 blog/front-end-learn/demo/css-box-4.html

diff --git a/blog/front-end-learn/css-box.md b/blog/front-end-learn/css-box.md
index b23bd2e..08ad651 100644
--- a/blog/front-end-learn/css-box.md
+++ b/blog/front-end-learn/css-box.md
@@ -83,7 +83,14 @@ display: block;
 - width
 - height
 
-（4）边框
+```css
+.box {
+  width: 100px;
+  height: 100px;
+}
+```
+
+## 边框 border
 
 ```css
 /* 粗细 线条样式 颜色（不分先后顺序）*/
@@ -108,11 +115,9 @@ border-color: 边框颜色
 - dashed 虚线
 - dotted 点线
 
-盒子尺寸 = width / height + 边框线
-
 布局顺序：从外到内，从上到下
 
-（5）内边距 padding
+## 内边距 padding
 
 ```css
 /* 可取 4 个值、3 个值、2 个值、1 个值 */
@@ -120,12 +125,157 @@ padding: 上 右 下 左;
 padding: 上 左右 下;
 padding: 上下 左右;
 padding: 上下左右;
+
+/* 单个方向 */
+padding-top: 10px;
+padding-bottom: 10px;
+padding-left: 10px;
+padding-right: 10px;
 ```
 
 规律：顺时针，值不够看对边
 
-（6）导航实例
+## 导航实例
 
 [](demo/css-box-1.html ':include :type=code')
 
 [](demo/css-box-1.html ':include height=70')
+
+## 盒子尺寸计算
+
+```
+box-sizing: content-box 默认
+盒子最终宽度 = width(content) + padding + border
+
+box-sizing: border-box
+盒子最终宽度 = width = padding + border + content
+```
+
+## 外边距 margin
+
+设置值的方式和 padding 类似
+
+```css
+/* 可取 4 个值、3 个值、2 个值、1 个值 */
+margin: 上 右 下 左;
+margin: 上 左右 下;
+margin: 上下 左右;
+margin: 上下左右;
+
+/* 单个方向 */
+margin-top: 10px;
+margin-bottom: 10px;
+margin-left: 10px;
+margin-right: 10px;
+```
+
+使用 margin 让元素居中
+
+```css
+.box {
+  width: 100px;
+  height: 100px;
+  background-color: #ccc;
+  margin: 0 auto;
+}
+```
+
+## 清除浏览器默认样式
+
+京东
+
+```css
+* {
+  margin: 0;
+  padding: 0;
+}
+```
+
+淘宝
+
+```css
+blockquote,
+body,
+button,
+dd,
+dl,
+dt,
+fieldset,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+input,
+legend,
+li,
+ol,
+p,
+pre,
+td,
+textarea,
+th,
+ul {
+  margin: 0;
+  padding: 0;
+}
+```
+
+常用的清除样式
+
+```css
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+```
+
+去掉列表前的符号
+
+```css
+ul {
+  list-style: none;
+}
+```
+
+## 外边距折叠现象
+
+- 合并现象
+- 塌陷现象
+
+（1）合并现象
+
+- 场景：垂直布局的块级元素，上下的 margin 会合并
+- 结果：最终两者距离为 margin 的最大值
+- 解决方法：只给其中一个盒子设置 margin
+
+[](demo/css-box-2.html ':include :type=code')
+
+[](demo/css-box-2.html ':include height=400')
+
+（2）塌陷现象
+
+- 场景：相互嵌套的块级元素，子元素的 margin-top 会作用在父元素上
+- 结果：导致父元素一起往下移动
+- 解决方法：
+
+1.  给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
+2.  给父元素设置 overflow:hidden;
+3.  转换为行内块元素
+4.  设置浮动
+
+[](demo/css-box-3.html ':include :type=code')
+
+[](demo/css-box-3.html ':include height=530')
+
+## 行内标签的 margin/pading
+
+垂直方向不生效，使用行高 line-height 实现
+
+[](demo/css-box-4.html ':include :type=code')
+
+[](demo/css-box-4.html ':include height=60')
diff --git a/blog/front-end-learn/demo/css-box-2.html b/blog/front-end-learn/demo/css-box-2.html
new file mode 100644
index 0000000..3b9ef51
--- /dev/null
+++ b/blog/front-end-learn/demo/css-box-2.html
@@ -0,0 +1,18 @@
+<style>
+    .box-1 {
+        width: 100px;
+        height: 100px;
+        background-color: #698e6a;
+        margin-bottom: 50px;
+    }
+
+    .box-2 {
+        margin-top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: #7f9faf;
+    }
+</style>
+
+<div class="box-1"></div>
+<div class="box-2"></div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-box-3.html b/blog/front-end-learn/demo/css-box-3.html
new file mode 100644
index 0000000..6a24b47
--- /dev/null
+++ b/blog/front-end-learn/demo/css-box-3.html
@@ -0,0 +1,32 @@
+<style>
+    .box-father {
+        width: 200px;
+        height: 200px;
+        background-color: #b2b6b6;
+    }
+
+    .box-child {
+        width: 100px;
+        height: 100px;
+        background-color: #7f9faf;
+        margin-top: 100px;
+    }
+
+    .resolve {
+        overflow: hidden;
+        margin-top: 20px;
+    }
+</style>
+
+<div class="box-wrap">
+    <!-- 元素的margin-top 作用在了父元素上 -->
+    <div class="box-father">
+        <div class="box-child"></div>
+    </div>
+
+    <!-- [完美解决方案]给父元素设置 overflow:hidden; -->
+    <div class="box-father resolve">
+        <div class="box-child"></div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-box-4.html b/blog/front-end-learn/demo/css-box-4.html
new file mode 100644
index 0000000..2db5759
--- /dev/null
+++ b/blog/front-end-learn/demo/css-box-4.html
@@ -0,0 +1,14 @@
+<style>
+    .box {
+        border: 1px solid #eee;
+    }
+
+    .box span {
+        margin: 20px;
+        padding: 20px;
+    }
+</style>
+
+<div class="box">
+    <span>乾坤空落落，岁月去堂堂。</span>
+</div>
\ No newline at end of file
-- 
GitLab