fix

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

+# CSS 背景相关属性
+
+## 背景颜色
+
+```css
+/* 默认背景色是透明；背景色在背景图之下*/
+background-color: transparent;
+```
+
+## 背景图片
+
+```css
+background-image: url(图片路径);
+```
+
+示例：
+
+[](demo/css-background-1.html ':include :type=code')
+
+[](demo/css-background-1.html ':include height=540')
+
+## 背景平铺
+
+background-repeat
+
+| 取值      | 效果                           |
+| --------- | ------------------------------ |
+| repeat    | （默认值）水平和垂直方向都平铺 |
+| no-repeat | 不平铺                         |
+| repeat-x  | 水平方向平铺（x 轴）           |
+| repeat-y  | 垂直方向平铺（y 轴）           |
+
+示例：
+
+[](demo/css-background-2.html ':include :type=code')
+
+[](demo/css-background-2.html ':include height=540')
+
+## 背景位置
+
+```css
+background-position: 水平方向位置 垂直方向位置;
+```
+
+属性值
+
+方位名词（最多只能表示 9 个位置）
+
+- 水平方向：left center right
+- 垂直方向：top center bottom
+
+数字+px（坐标）
+
+- 坐标轴 原点(0,0) 盒子的左上角
+- x 轴 水平方向
+- y 轴 垂直方向
+- 图片左上角与坐标原点重合
+
+示例：
+
+[](demo/css-background-3.html ':include :type=code')
+
+[](demo/css-background-3.html ':include height=540')
+
+## 背景属性连写
+
+```css
+/* 不分先后顺序 */
+background: color image repeat position;
+```
+
+示例：
+
+[](demo/css-background-4.html ':include :type=code')
+
+[](demo/css-background-4.html ':include height=540')
+
+## img 标签和背景图片区别
+
+img
+
+- 不设置高宽会默认显示
+- 重要突出的图使用 img
+
+background-image
+
+- 需要设置元素尺寸
+- 装饰性图片使用背景图

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

+# CSS 盒模型
+
+## 元素显示模式
+
+- 块级
+- 行内
+- 行内块
+
+## 块级元素
+
+- 独占一行
+- 宽度默认为父元素 100%；高度默认由元素撑开
+- 可以设置宽度和高度
+
+代表标签
+
+```
+div p h ul li dl dt dd form
+header nav footer
+```
+
+## 行内元素
+
+- 一行显示多个
+- 宽度和高度默认由内容撑开
+- 不可以设置宽度和高度
+
+代表标签
+
+```
+a span b u i s strong ins em del
+```
+
+## 行内块元素
+
+- 一行显示多个
+- 可以设置宽度和高度
+
+代表标签
+
+```
+input textarea button select
+```
+
+## 元素显示模式转换
+
+```css
+display: block;
+```
+
+| 属性值       | 效果       |
+| ------------ | ---------- |
+| block        | 块级元素   |
+| inline-block | 行内块元素 |
+| inline       | 行内元素   |
+
+## HTML 嵌套规范注意点
+
+- 块级元素一般作为大容器;
+- 可以嵌套文本、块级元素、行内元素、行内块元素
+
+> p 标签中不要嵌套 div p h 等块级元素
+
+- a 标签内部可以嵌套任意内容
+
+> a 标签不能嵌套 a 标签
+
+## CSS 特性
+
+- 继承性
+- 层叠性
+
+（1）继承性 inherited
+
+子元素有默认继承父元素样式的特点
+
+可继承的常见属性（文字属性都可以继承）
+
+```
+color
+font-style font-weight font-size font-family
+text-align text-indent
+line-height
+```
+
+通过调试工具判断样式是否可继承
+
+继承失效的特殊情况
+
+如果元素有浏览器默认样式，就不继承父元素属性
+
+- a 标签的 color 会继承时效
+- h 系列标签的 font-size 会继承失效
+
+（2）层叠性
+
+同一个标签设置`不同`的样式
+
+- 样式`层叠叠加`，共同作用在标签上
+
+同一个标签设置`相同`的样式
+
+- 样式会`层叠覆盖`，最终写在最后的样式生效
+
+当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
+
+> 技巧: 编辑器多行输入

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

@@ -5,12 +5,6 @@
 - 文字颜色 color
 - 背景颜色 background-color
 
-默认背景色是透明
-
-```css
-background-color: transparent;
-```
-
 | 颜色表示方式   | 表示含义                      | 属性值             |
 | -------------- | ----------------------------- | ------------------ |
 | 关键词         | 预定义的颜色名                | red、green、blue   |

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

+<style>
+    .box {
+        width: 100%;
+        /* 元素必须给一个尺寸才能显示背景图 */
+        height: 500px;
+        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

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

+<style>
+    .box {
+        width: 100%;
+        /* 元素必须给一个尺寸才能显示背景图 */
+        height: 500px;
+        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
+        background-repeat: no-repeat;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

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

+<style>
+    .box {
+        width: 100%;
+        /* 元素必须给一个尺寸才能显示背景图 */
+        height: 500px;
+        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

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

+<style>
+    .box {
+        width: 100%;
+        /* 元素必须给一个尺寸才能显示背景图 */
+        height: 500px;
+        /*
+        两种写法等价
+        background-color: #fff;
+        background-image: url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0);
+        background-repeat: no-repeat;
+        background-position: center;
+        */
+        background: #fff url(https://cn.bing.com/th?id=OHR.FanjingStairs_ZH-CN0360402048_UHD.jpg&rf=LaDigue_UHD.jpg&w=300&h=300&c=8&rs=1&o=3&r=0) no-repeat center;
+    }
+</style>
+
+<div class="box"></div>
\ No newline at end of file

blog/front-end-learn/element.md → blog/front-end-learn/html-element.md

-# 标签元素
+# HTML 标签元素
 
 ## 1、标题标签 Heading
 

blog/front-end-learn/index.md

@@ -14,12 +14,16 @@
 
 ## 内容
 
-1. [HTML 基本认知](blog/front-end-learn/basic.md)
+1. [HTML 基本认知](blog/front-end-learn/html-basic.md)
 
-2. [标签元素](blog/front-end-learn/element.md)
+2. [HTML 标签元素](blog/front-end-learn/html-element.md)
 
-3. [CSS 层叠样式表](blog/front-end-learn/css.md)
+3. [CSS 层叠样式表](blog/front-end-learn/css-basic.md)
 
 4. [CSS 字体和文本样式](blog/front-end-learn/css-font.md)
 
 5. [CSS 选择器](blog/front-end-learn/css-selector.md)
+
+6. [CSS 背景相关属性](blog/front-end-learn/css-background.md)
+
+7. [CSS 盒模型](blog/front-end-learn/css-box.md)