From aa16583e07a0fb7aa746ea6722aae7e018341270 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Sat, 5 Oct 2019 13:15:25 +0800
Subject: [PATCH] =?UTF-8?q?add:=20CSS=E5=B8=B8=E8=A7=81=E7=9A=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 03-CSS进阶/02-CSS中的非布局样式.md | 25 ++++++++-------
 03-CSS进阶/03-CSS布局.md           | 51 ++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 03-CSS进阶/03-CSS布局.md

diff --git a/03-CSS进阶/02-CSS中的非布局样式.md b/03-CSS进阶/02-CSS中的非布局样式.md
index a5fdcc5..c758710 100644
--- a/03-CSS进阶/02-CSS中的非布局样式.md
+++ b/03-CSS进阶/02-CSS中的非布局样式.md
@@ -73,6 +73,18 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
 
 （2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。
 
+### 常见的字体&文本属性
+
+```css
+	font-style: italic;	/* italic表示斜体，normal表示不倾斜*/
+	font-weight: bold;  /* 字体加粗，100至900 */
+    text-decoration: underline; /* 下划线 */
+    cursor: pointer;  /*鼠标悬停时，光标显示为手形*/
+
+```
+
+`font-weight`属性：在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
+
 ### 其他
 
 - 网络字体
@@ -95,18 +107,6 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
 
 当然，如果想让一段很长的文本不换行，可以直接设置`white-space: nowrap` 这一个属性即可。
 
-## 常见的字体&文本属性
-
-```css
-	font-style: italic;	/* italic表示斜体，normal表示不倾斜*/
-	font-weight: bold;  /* 字体加粗，100至900 */
-    text-decoration: underline; /* 下划线 */
-    cursor: pointer;  /*鼠标悬停时，光标显示为手形*/
-
-```
-
-`font-weight`属性：在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
-
 ## CSS Hack
 
 - CSS Hack 的方式：不合法但可以生效的写法。
@@ -120,3 +120,4 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
 - 替代方案：针对性加 class
 
 
+
diff --git a/03-CSS进阶/03-CSS布局.md b/03-CSS进阶/03-CSS布局.md
new file mode 100644
index 0000000..be00a3d
--- /dev/null
+++ b/03-CSS进阶/03-CSS布局.md
@@ -0,0 +1,51 @@
+
+## 前言
+
+### CSS 布局的演化
+
+- 早期以table为主
+
+- 后来一技巧性布局为主（这些技巧原本并不是用于布局的）
+
+- flexbox/grid
+
+- 响应式布局
+
+### 常见的布局方法
+
+1、**table 表格布局**：早期使用的布局，如今用得很少。
+
+2、**float 浮动 + margin**：问题较多。
+
+3、**inline-block 布局**：问题较多。
+
+对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+
+4、**flex 布局**：为布局而生，非常灵活，是最为推荐的布局写法。唯一的缺点是兼容性问题：
+
+20191005_1200.png
+
+上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
+
+### 常见的布局属性
+
+（1）`display` 确定元素的显示类型：
+
+- block：块级元素。
+
+- inline：行内元素。
+
+- inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
+
+（2）`positon` 确定元素的位置：
+
+- static：默认属性值。
+
+- relative：相对定位。相对于元素本身进行偏移，**不会改变它所占据的空间**。
+
+- absolute：绝对定位。相对于父元素中最近的 relative/absolute 进行偏移，会脱离文档流。音标：[ˈæbsəluːt]。
+
+- fixed：固定定位。相对于可视区域固定，会脱离文档流。
+
+`relative`、`absolute`、`fixed`这三个属性，可以结合 z-index 来设置层级。
+