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

---
 blog/front-end-learn/css-box.md          | 65 ++++++++++++++++++++++++
 blog/front-end-learn/demo/css-box-1.html | 36 +++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 blog/front-end-learn/demo/css-box-1.html

diff --git a/blog/front-end-learn/css-box.md b/blog/front-end-learn/css-box.md
index 37c095b..b23bd2e 100644
--- a/blog/front-end-learn/css-box.md
+++ b/blog/front-end-learn/css-box.md
@@ -64,3 +64,68 @@ display: block;
 - a 标签内部可以嵌套任意内容
 
 > a 标签不能嵌套 a 标签
+
+## 盒子模型
+
+（1）盒子
+
+标签可以看做是一个盒子
+
+（2）盒子模型：
+
+- 外边距区域 margin
+- 边框区域 border
+- 内边距区域 padding
+- 内容区域 content
+
+（3）盒子内容的宽高
+
+- width
+- height
+
+（4）边框
+
+```css
+/* 粗细 线条样式 颜色（不分先后顺序）*/
+/* 默认4个方向都有*/
+border: 10px solid red;
+
+/* 单个方向 */
+border-top: 10px solid red;
+border-bottom: 10px solid red;
+border-left: 10px solid red;
+border-right: 10px solid red;
+
+/* 单个属性 */
+border-width: 边框粗细
+border-style: 边框样式
+border-color: 边框颜色
+```
+
+线条可选样式
+
+- solid 实线
+- dashed 虚线
+- dotted 点线
+
+盒子尺寸 = width / height + 边框线
+
+布局顺序：从外到内，从上到下
+
+（5）内边距 padding
+
+```css
+/* 可取 4 个值、3 个值、2 个值、1 个值 */
+padding: 上 右 下 左;
+padding: 上 左右 下;
+padding: 上下 左右;
+padding: 上下左右;
+```
+
+规律：顺时针，值不够看对边
+
+（6）导航实例
+
+[](demo/css-box-1.html ':include :type=code')
+
+[](demo/css-box-1.html ':include height=70')
diff --git a/blog/front-end-learn/demo/css-box-1.html b/blog/front-end-learn/demo/css-box-1.html
new file mode 100644
index 0000000..6e98975
--- /dev/null
+++ b/blog/front-end-learn/demo/css-box-1.html
@@ -0,0 +1,36 @@
+<style>
+    .box {
+        border-top: 3px solid #ff8500;
+        border-bottom: #edeef0;
+    }
+
+    .box a {
+        /* 先写盒子大小 */
+        display: inline-block;
+        width: 80px;
+        height: 40px;
+
+        /* 推荐先写上背景，便于查看盒子大小 */
+        /* background-color: #edeef0; */
+
+        /* 再写文字样式 */
+        line-height: 40px;
+        text-align: center;
+        color: #4c4c4c;
+        font-size: 12px;
+        text-decoration: none;
+    }
+
+    /* 鼠标悬停效果 */
+    .box a:hover {
+        background-color: #edeef0;
+        color: #ff8044;
+    }
+</style>
+
+<div class="box">
+    <a href="#">首页</a>
+    <a href="#">文章</a>
+    <a href="#">分类</a>
+    <a href="#">标签</a>
+</div>
\ No newline at end of file
-- 
GitLab