From 05c0f1255809ee59ba913e54ed3af26559aeefa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=9D=96=E8=8C=B9?= <1848686492@qq.com>
Date: Mon, 14 Oct 2024 11:24:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?'20241014=E8=AF=BE=E5=A0=82=E7=AC=94?=
=?UTF-8?q?=E8=AE=B0'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...22\345\255\220\346\250\241\345\236\213.md" | 291 ++++++++++++++++++
.../20241012.html" | 0
2 files changed, 291 insertions(+)
create mode 100644 "\347\216\213\351\235\226\350\214\271/20241014--CSS\347\233\222\345\255\220\346\250\241\345\236\213.md"
create mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html"
diff --git "a/\347\216\213\351\235\226\350\214\271/20241014--CSS\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\347\216\213\351\235\226\350\214\271/20241014--CSS\347\233\222\345\255\220\346\250\241\345\236\213.md"
new file mode 100644
index 0000000..e2f3834
--- /dev/null
+++ "b/\347\216\213\351\235\226\350\214\271/20241014--CSS\347\233\222\345\255\220\346\250\241\345\236\213.md"
@@ -0,0 +1,291 @@
+# 盒子模型
+## 前言
+盒子模型（box model）。无论是div、span、还是a都是盒子。
+
+## 盒子中的区域
+一个盒子中主要的属性就五个：width、height、padding、border、margin。
+- width和height：**内容**的宽度和高度（不是合资的宽度和高度）
+- padding：内边距
+- border：边框
+- margin：外边距
+
+盒子模型的示意图：
+
+
+代码演示：
+
+
+
+上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
+
+注意：**宽度和真实占有宽度，不是一个概念！**
+
+## 标准盒模型和IE盒模型
+标准盒子模型：
+
+
+
+IE盒子模型：
+
+
+
+
+CSS盒模型和IE盒模型的区别：
+
+- 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+
+注：Android中也有margin和padding的概念，意思差不多，区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分。
+
+## ``标签也有margin
+
+``标签正确的理解是这样的：整个网页最大的盒子是``，即浏览器。而``是``的儿子。浏览器给``默认的margin大小是8个像素，此时``占据了整个页面的一大部分区域，而不是全部区域。
+
+看一下代码：
+```html
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+ 有生之年
+ 狭路相逢
+
+
+
+
+
+```
+上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
+
+
+
+## 认识width、height
+下面这两个盒子，真实占有宽高，都是302*302：
+
+盒子1：
+
+```css
+.box1{
+ width: 100px;
+ height: 100px;
+ padding: 100px;
+ border: 1px solid red;
+}
+```
+
+盒子2：
+
+```css
+.box2{
+ width: 250px;
+ height: 250px;
+ padding: 25px;
+ border: 1px solid red;
+}
+```
+
+
+真实占有宽度 = 左border + 左padding + width + 右padding + 右border
+
+上面这两个盒子的盒模型图如下：
+
+
+
+**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。
+
+## 认识padding
+
+### padding区域也有颜色
+
+padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
+### padding有四个方向
+描述4个方向的padding。
+
+方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
+
+小属性的写法：
+
+```css
+ padding-top: 30px;
+ padding-right: 20px;
+ padding-bottom: 40px;
+ padding-left: 100px;
+```
+
+综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
+
+```css
+padding:30px 20px 40px 100px;
+```
+
+如果写了四个值，则顺序为：上、右、下、左。
+
+如果只写了三个值，则顺序为：上、右和左、下。
+
+如果只写了两个值，则顺序为：上和下、左和右。
+
+比如说：
+
+```
+padding: 30px 40px;
+```
+
+则顺序等价于：30px 40px 30px 40px;
+
+要懂得，**用小属性层叠大属性**。比如：
+
+```
+padding: 20px;
+padding-left: 30px;
+```
+
+上面的padding对应盒子模型为：
+
+
+
+下面的写法：
+
+```
+padding-left: 30px;
+padding: 20px;
+```
+
+第一行的小属性无效，因为被第二行的大属性层叠掉了。
+
+### 一些元素，默认带有padding
+
+一些元素，默认带有`padding`，比如ul标签。如下：
+
+
+
+上图显示，不加任何样式的ul，也是有40px的padding-left。
+
+为了便于控制可以使用`*`进行清除：
+
+```css
+ *{
+ margin: 0;
+ padding: 0;
+ }
+```
+
+## 认识border
+
+border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
+
+颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。
+
+### border-style
+border的所有的线型如下：
+
+
+追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。
+
+所以，比较稳定的border-style就几个：solid、dashed、dotted。
+
+### border拆分
+
+border是一个大综合属性。比如说：
+
+```css
+border:1px solid red;
+```
+
+就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。
+
+PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
+
+border属性是能够被拆开的，有两大种拆开的方式：
+
+- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
+
+- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
+
+综上所述：**一个border属性，是由三个小属性综合而成的**。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。
+
+举例如下：
+
+```
+border-width:10px 20px;
+border-style:solid dashed dotted;
+border-color:red green blue yellow;
+```
+
+效果如下：
+
+
+
+（1）按三要素拆：
+
+```css
+border-width:10px; //边框宽度
+border-style:solid; //线型
+border-color:red; //颜色。
+```
+等价于：
+
+```
+border:10px solid red;
+```
+
+(2)按方向来拆：
+
+```css
+border-top:10px solid red;
+border-right:10px solid red;
+border-bottom:10px solid red;
+border-left:10px solid red;
+```
+
+等价于：
+
+```css
+border:10px solid red;
+```
+
+（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
+
+```css
+ border-top-width:10px;
+ border-top-style:solid;
+ border-top-color:red;
+ border-right-width:10px;
+ border-right-style:solid;
+ border-right-color:red;
+ border-bottom-width:10px;
+ border-bottom-style:solid;
+ border-bottom-color:red;
+ border-left-width:10px;
+ border-left-style:solid;
+ border-left-color:red;
+```
+
+等价于：
+
+```css
+border:10px solid red;
+
+```
\ No newline at end of file
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html"
new file mode 100644
index 0000000..e69de29
--
Gitee
From 245e665b6f5bc24bd9de519c9d2ed010dc1e03a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E9=9D=96=E8=8C=B9?= <1848686492@qq.com>
Date: Mon, 14 Oct 2024 11:27:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?'20241014=E8=AF=BE=E5=A0=82=E7=AC=94?=
=?UTF-8?q?=E8=AE=B0'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../20241012.html" | 0
1 file changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html"
diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/20241012.html"
deleted file mode 100644
index e69de29..0000000
--
Gitee