From 5ea0d91383cdddd674b7a3cdd7f7af88e0166a4f Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Mon, 24 Jan 2022 10:56:08 +0800
Subject: [PATCH] fix

---
 blog/front-end-learn/css-decorate.md          | 162 ++++++++++++++++++
 blog/front-end-learn/css-position.md          |  29 ++++
 blog/front-end-learn/demo/css-decorate-1.html |  27 +++
 .../front-end-learn/demo/css-decorate-10.html |  25 +++
 .../front-end-learn/demo/css-decorate-11.html |  10 ++
 .../front-end-learn/demo/css-decorate-12.html |   9 +
 blog/front-end-learn/demo/css-decorate-2.html |  20 +++
 blog/front-end-learn/demo/css-decorate-3.html |  29 ++++
 blog/front-end-learn/demo/css-decorate-4.html |  31 ++++
 blog/front-end-learn/demo/css-decorate-5.html |  20 +++
 blog/front-end-learn/demo/css-decorate-6.html |  10 ++
 blog/front-end-learn/demo/css-decorate-7.html |  10 ++
 blog/front-end-learn/demo/css-decorate-8.html |  33 ++++
 blog/front-end-learn/demo/css-decorate-9.html |  16 ++
 blog/front-end-learn/index.md                 |   2 +
 15 files changed, 433 insertions(+)
 create mode 100644 blog/front-end-learn/css-decorate.md
 create mode 100644 blog/front-end-learn/demo/css-decorate-1.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-10.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-11.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-12.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-2.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-3.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-4.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-5.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-6.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-7.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-8.html
 create mode 100644 blog/front-end-learn/demo/css-decorate-9.html

diff --git a/blog/front-end-learn/css-decorate.md b/blog/front-end-learn/css-decorate.md
new file mode 100644
index 0000000..bcafaf4
--- /dev/null
+++ b/blog/front-end-learn/css-decorate.md
@@ -0,0 +1,162 @@
+# CSS 装饰
+
+## 1. 垂直对齐 vertical-align
+
+基线(baseline)：浏览器文字类型元素排版中存在用于对齐的基线
+
+| 属性值   | 效果           |
+| -------- | -------------- |
+| baseline | 默认，基线对齐 |
+| top      | 顶部对齐       |
+| middle   | 中部对齐       |
+| bottom   | 底部对齐       |
+
+```css
+vertical-align: middle;
+```
+
+示例:
+
+[](demo/css-decorate-1.html ':include :type=code')
+
+[](demo/css-decorate-1.html ':include height=50')
+
+> 浏览器把行内和行内块当做文字处理，文字默认基线对齐
+
+示例一：输入框垂直居中对齐
+
+[](demo/css-decorate-2.html ':include :type=code')
+
+[](demo/css-decorate-2.html ':include height=70')
+
+示例二：图片垂直居中对齐
+
+[](demo/css-decorate-3.html ':include :type=code')
+
+[](demo/css-decorate-3.html ':include height=450')
+
+示例三：图片水平垂直居中
+
+[](demo/css-decorate-4.html ':include :type=code')
+
+[](demo/css-decorate-4.html ':include height=420')
+
+## 2. 光标类型 cursor
+
+| 属性值  | 效果                 |
+| ------- | -------------------- |
+| default | 默认，箭头           |
+| pointer | 小手，提示可点击     |
+| text    | 工字型，提示可选择   |
+| move    | 十字光标，提示可移动 |
+
+示例：
+
+[](demo/css-decorate-5.html ':include :type=code')
+
+[](demo/css-decorate-5.html ':include height=110')
+
+## 3. 边框圆角 border-radius
+
+```css
+/* 单值 4个角一样*/
+border-radius: 数字px/百分比;
+
+/* 多值 左上角开始，顺时针赋值，没有赋值看对角*/
+border-radius: 左上 右上 右下 左下;
+```
+
+（1）正圆
+
+- 盒子必须是正方形
+- 设置边框圆角为盒子宽高的一半
+
+示例：
+
+[](demo/css-decorate-6.html ':include :type=code')
+
+[](demo/css-decorate-6.html ':include height=220')
+
+```css
+/* 最大值 50% */
+border-radius: 50%;
+```
+
+（2）胶囊按钮
+
+- 盒子设置为长方形
+- 设置边框圆角为高度的一半
+
+```css
+border-radius: height/2;
+```
+
+示例：
+
+[](demo/css-decorate-7.html ':include :type=code')
+
+[](demo/css-decorate-7.html ':include height=70')
+
+## 4. 溢出部分效果 overflow
+
+溢出部分：盒子内容部分超出盒子范围的区域
+
+| 属性值  | 效果                               |
+| ------- | ---------------------------------- |
+| visible | 默认，溢出部分可见                 |
+| hidden  | 溢出部分隐藏                       |
+| scroll  | 无论是否溢出都显示滚动条           |
+| auto    | 根据是否溢出，自动显示或隐藏滚动条 |
+
+示例：
+
+[](demo/css-decorate-8.html ':include :type=code')
+
+[](demo/css-decorate-8.html ':include height=120')
+
+## 5. 元素本身隐藏
+
+```css
+/* 占位隐藏 */
+visibility: hidden;
+
+/* 不占位隐藏（常用） */
+display: none;
+```
+
+[](demo/css-decorate-9.html ':include :type=code')
+
+[](demo/css-decorate-9.html ':include height=120')
+
+示例：默认隐藏 鼠标悬停显示
+
+[](demo/css-decorate-10.html ':include :type=code')
+
+[](demo/css-decorate-10.html ':include height=220')
+
+## 6. 元素整体透明 opacity
+
+属性值：
+
+- 0-1 之间的数字；
+- 0 完全透明，1 完全不透明
+
+示例：
+
+[](demo/css-decorate-11.html ':include :type=code')
+
+[](demo/css-decorate-11.html ':include height=120')
+
+## 7.半透明
+
+```css
+background-color: rgba(0, 0, 0, 0.5);
+```
+
+示例：
+
+[](demo/css-decorate-12.html ':include :type=code')
+
+[](demo/css-decorate-12.html ':include height=120')
+
+https://www.bilibili.com/video/BV1Kg411T7t9?p=166&spm_id_from=pageDriver
diff --git a/blog/front-end-learn/css-position.md b/blog/front-end-learn/css-position.md
index 38235c4..5d1aef0 100644
--- a/blog/front-end-learn/css-position.md
+++ b/blog/front-end-learn/css-position.md
@@ -71,3 +71,32 @@ top: 100px;
 
 - 子绝父相：父级相对定位，子级绝对定位
 - 绝对定位查找父级的方法：逐级向上，最终是浏览器窗口
+
+## 固定定位
+
+```css
+positions: fixed;
+```
+
+特点：
+
+- 脱标-不占位置
+- 相对于浏览器定位
+- 具备行内块特点
+
+## 元素层级关系
+
+1. 不同布局方式元素的层级关系：
+
+```css
+标准流 < 浮动 < 定位
+```
+
+2. 同层级，后写的会覆盖在先写的元素
+
+3. 设置元素层级
+
+```css
+/* 默认值0；数值越大，显示越靠前 */
+z-index: 数值;
+```
diff --git a/blog/front-end-learn/demo/css-decorate-1.html b/blog/front-end-learn/demo/css-decorate-1.html
new file mode 100644
index 0000000..b5a2586
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-1.html
@@ -0,0 +1,27 @@
+<style>
+    .text {
+        border-bottom: 1px solid #ccc;
+    }
+
+    .text-baseline {
+        vertical-align: baseline;
+    }
+
+    .text-top {
+        vertical-align: top;
+    }
+
+    .text-middle {
+        vertical-align: middle;
+    }
+
+    .text-bottom {
+        vertical-align: bottom;
+    }
+</style>
+<div>
+    <span class="text text-baseline">绝知此事要躬行</span>
+    <span class="text text-top">绝知此事要躬行</span>
+    <span class="text text-middle">绝知此事要躬行</span>
+    <span class="text text-bottom">绝知此事要躬行</span>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-10.html b/blog/front-end-learn/demo/css-decorate-10.html
new file mode 100644
index 0000000..cb80716
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-10.html
@@ -0,0 +1,25 @@
+<style>
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+        position: relative;
+    }
+
+    .box:hover .box-qrcode {
+        display: block;
+    }
+
+    .box-qrcode {
+        position: absolute;
+        top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: pink;
+        display: none;
+    }
+</style>
+
+<div class="box">
+    <div class="box-qrcode"></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-11.html b/blog/front-end-learn/demo/css-decorate-11.html
new file mode 100644
index 0000000..d72fd45
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-11.html
@@ -0,0 +1,10 @@
+<style>
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+        opacity: .5;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-12.html b/blog/front-end-learn/demo/css-decorate-12.html
new file mode 100644
index 0000000..193a24e
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-12.html
@@ -0,0 +1,9 @@
+<style>
+    .box {
+        /* width: 100px; */
+        height: 100px;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-2.html b/blog/front-end-learn/demo/css-decorate-2.html
new file mode 100644
index 0000000..b733a1b
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-2.html
@@ -0,0 +1,20 @@
+<style>
+    input {
+        height: 50px;
+    }
+
+    input[type="button"] {
+        height: 30px;
+    }
+
+    .middle input {
+        vertical-align: middle;
+    }
+</style>
+
+<div>
+
+    <input type="text" />
+    <input type="button"
+           value="搜索" />
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-3.html b/blog/front-end-learn/demo/css-decorate-3.html
new file mode 100644
index 0000000..52f29fe
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-3.html
@@ -0,0 +1,29 @@
+<style>
+    .box {
+        border: 1px solid #ccc;
+        width: 500px;
+    }
+
+    img {
+        height: 200px;
+        width: 200px;
+    }
+
+    .middle-box {
+        margin-top: 20px;
+    }
+
+    .middle-box img {
+        vertical-align: middle;
+    }
+</style>
+
+<div>
+    <div class="box">
+        <img src="https://api.isoyu.com/bing_images.php" /><input type="button"
+               value="搜索" /></div>
+
+    <div class="box middle-box">
+        <img src="https://api.isoyu.com/bing_images.php" /><input type="button"
+               value="搜索" /></div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-4.html b/blog/front-end-learn/demo/css-decorate-4.html
new file mode 100644
index 0000000..84259e9
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-4.html
@@ -0,0 +1,31 @@
+<style>
+    .box {
+        width: 400px;
+        height: 400px;
+        background-color: skyblue;
+
+        /* 水平居中 */
+        text-align: center;
+    }
+
+    .box::after {
+        height: 100%;
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    img {
+        height: 200px;
+        width: 200px;
+        /* 垂直居中 */
+        /*方式一*/
+        vertical-align: middle;
+        /*方式二*/
+        /* display: block; */
+    }
+</style>
+
+<div class="box">
+    <img src="https://api.isoyu.com/bing_images.php" />
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-5.html b/blog/front-end-learn/demo/css-decorate-5.html
new file mode 100644
index 0000000..a8eca6a
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-5.html
@@ -0,0 +1,20 @@
+<style>
+    .cursor--pointer {
+        cursor: pointer;
+    }
+
+    .cursor--text {
+        cursor: text;
+    }
+
+    .cursor--move {
+        cursor: move;
+    }
+</style>
+
+<div class="box">
+    <div>默认，箭头</div>
+    <div class="cursor--pointer">小手，提示可点击</div>
+    <div class="cursor--text">工字型，提示可选择</div>
+    <div class="cursor--move">十字光标，提示可移动</div>
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-6.html b/blog/front-end-learn/demo/css-decorate-6.html
new file mode 100644
index 0000000..df3f2c5
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-6.html
@@ -0,0 +1,10 @@
+<style>
+    .box {
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        background-color: skyblue;
+    }
+</style>
+
+<div class="box"></div>
diff --git a/blog/front-end-learn/demo/css-decorate-7.html b/blog/front-end-learn/demo/css-decorate-7.html
new file mode 100644
index 0000000..5b230bc
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-7.html
@@ -0,0 +1,10 @@
+<style>
+    .box {
+        width: 100px;
+        height: 50px;
+        border-radius: 25px;
+        background-color: skyblue;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-8.html b/blog/front-end-learn/demo/css-decorate-8.html
new file mode 100644
index 0000000..b56bfd1
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-8.html
@@ -0,0 +1,33 @@
+<style>
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+
+        overflow: hidden;
+    }
+</style>
+
+<div class="box">
+    江夏赠韦南陵冰
+
+    李白〔唐代〕
+
+    胡骄马惊沙尘起，胡雏饮马天津水。
+    君为张掖近酒泉，我窜三色九千里。(三色 一作：三巴)
+    天地再新法令宽，夜郎迁客带霜寒。
+    西忆故人不可见，东风吹梦到长安。
+    宁期此地忽相遇，惊喜茫如堕烟雾。
+    玉箫金管喧四筵，苦心不得申长句。
+    昨日绣衣倾绿尊，病如桃李竟何言。
+    昔骑天子大宛马，今乘款段诸侯门。
+    赖遇南平豁方寸，复兼夫子持清论。
+    有似山开万里云，四望青天解人闷。
+    人闷还心闷，苦辛长苦辛。
+    愁来饮酒二千石，寒灰重暖生阳春。
+    山公醉后能骑马，别是风流贤主人。
+    头陀云月多僧气，山水何曾称人意。
+    不然鸣笳按鼓戏沧流，呼取江南女儿歌棹讴。
+    我且为君槌碎黄鹤楼，君亦为吾倒却鹦鹉洲。
+    赤壁争雄如梦里，且须歌舞宽离忧。
+</div>
\ No newline at end of file
diff --git a/blog/front-end-learn/demo/css-decorate-9.html b/blog/front-end-learn/demo/css-decorate-9.html
new file mode 100644
index 0000000..66d658c
--- /dev/null
+++ b/blog/front-end-learn/demo/css-decorate-9.html
@@ -0,0 +1,16 @@
+<style>
+    .box-1 {
+        width: 100px;
+        height: 100px;
+        visibility: hidden;
+    }
+
+    .box-2 {
+        width: 100px;
+        height: 100px;
+        display: none;
+    }
+</style>
+
+<div class="box-1"></div>
+<div class="box-2"></div>
diff --git a/blog/front-end-learn/index.md b/blog/front-end-learn/index.md
index 5aa3941..cb423e5 100644
--- a/blog/front-end-learn/index.md
+++ b/blog/front-end-learn/index.md
@@ -35,3 +35,5 @@
 10. [CSS 实战](blog/front-end-learn/css-product.md)
 
 11. [CSS 定位](blog/front-end-learn/css-position.md)
+
+12. [CSS 装饰](blog/front-end-learn/css-decorate.md)
-- 
GitLab