fix

blog/front-end-learn/css-decorate.md

+# 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

blog/front-end-learn/css-position.md

@@ -71,3 +71,32 @@ top: 100px;
 
 - 子绝父相：父级相对定位，子级绝对定位
 - 绝对定位查找父级的方法：逐级向上，最终是浏览器窗口
+
+## 固定定位
+
+```css
+positions: fixed;
+```
+
+特点：
+
+- 脱标-不占位置
+- 相对于浏览器定位
+- 具备行内块特点
+
+## 元素层级关系
+
+1. 不同布局方式元素的层级关系：
+
+```css
+标准流 < 浮动 < 定位
+```
+
+2. 同层级，后写的会覆盖在先写的元素
+
+3. 设置元素层级
+
+```css
+/* 默认值0；数值越大，显示越靠前 */
+z-index: 数值;
+```

blog/front-end-learn/demo/css-decorate-1.html

+<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

blog/front-end-learn/demo/css-decorate-10.html

+<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

blog/front-end-learn/demo/css-decorate-11.html

+<style>
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+        opacity: .5;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

blog/front-end-learn/demo/css-decorate-12.html

+<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

blog/front-end-learn/demo/css-decorate-2.html

+<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

blog/front-end-learn/demo/css-decorate-3.html

+<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

blog/front-end-learn/demo/css-decorate-4.html

+<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

blog/front-end-learn/demo/css-decorate-5.html

+<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

blog/front-end-learn/demo/css-decorate-6.html

+<style>
+    .box {
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        background-color: skyblue;
+    }
+</style>
+
+<div class="box"></div>

blog/front-end-learn/demo/css-decorate-7.html

+<style>
+    .box {
+        width: 100px;
+        height: 50px;
+        border-radius: 25px;
+        background-color: skyblue;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

blog/front-end-learn/demo/css-decorate-8.html

+<style>
+    .box {
+        width: 100px;
+        height: 100px;
+        background-color: skyblue;
+
+        overflow: hidden;
+    }
+</style>
+
+<div class="box">
+    江夏赠韦南陵冰
+
+    李白〔唐代〕
+
+    胡骄马惊沙尘起，胡雏饮马天津水。
+    君为张掖近酒泉，我窜三色九千里。(三色 一作：三巴)
+    天地再新法令宽，夜郎迁客带霜寒。
+    西忆故人不可见，东风吹梦到长安。
+    宁期此地忽相遇，惊喜茫如堕烟雾。
+    玉箫金管喧四筵，苦心不得申长句。
+    昨日绣衣倾绿尊，病如桃李竟何言。
+    昔骑天子大宛马，今乘款段诸侯门。
+    赖遇南平豁方寸，复兼夫子持清论。
+    有似山开万里云，四望青天解人闷。
+    人闷还心闷，苦辛长苦辛。
+    愁来饮酒二千石，寒灰重暖生阳春。
+    山公醉后能骑马，别是风流贤主人。
+    头陀云月多僧气，山水何曾称人意。
+    不然鸣笳按鼓戏沧流，呼取江南女儿歌棹讴。
+    我且为君槌碎黄鹤楼，君亦为吾倒却鹦鹉洲。
+    赤壁争雄如梦里，且须歌舞宽离忧。
+</div>
\ No newline at end of file

blog/front-end-learn/demo/css-decorate-9.html

+<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>

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)