From b2faabe4b839957a6977394ee146f3366b07b846 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Wed, 12 Jan 2022 10:10:43 +0800 Subject: [PATCH] fix --- blog/front-end-learn/css-background.md | 88 ++++++++++++++ blog/front-end-learn/{css.md => css-basic.md} | 0 blog/front-end-learn/css-box.md | 107 ++++++++++++++++++ blog/front-end-learn/css-selector.md | 6 - .../demo/css-background-1.html | 10 ++ .../demo/css-background-2.html | 11 ++ .../demo/css-background-3.html | 12 ++ .../demo/css-background-4.html | 17 +++ .../{basic.md => html-basic.md} | 0 .../{element.md => html-element.md} | 2 +- blog/front-end-learn/index.md | 10 +- 11 files changed, 253 insertions(+), 10 deletions(-) create mode 100644 blog/front-end-learn/css-background.md rename blog/front-end-learn/{css.md => css-basic.md} (100%) create mode 100644 blog/front-end-learn/css-box.md create mode 100644 blog/front-end-learn/demo/css-background-1.html create mode 100644 blog/front-end-learn/demo/css-background-2.html create mode 100644 blog/front-end-learn/demo/css-background-3.html create mode 100644 blog/front-end-learn/demo/css-background-4.html rename blog/front-end-learn/{basic.md => html-basic.md} (100%) rename blog/front-end-learn/{element.md => html-element.md} (99%) diff --git a/blog/front-end-learn/css-background.md b/blog/front-end-learn/css-background.md new file mode 100644 index 0000000..1a3ab26 --- /dev/null +++ b/blog/front-end-learn/css-background.md @@ -0,0 +1,88 @@ +# 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 + +- 需要设置元素尺寸 +- 装饰性图片使用背景图 diff --git a/blog/front-end-learn/css.md b/blog/front-end-learn/css-basic.md similarity index 100% rename from blog/front-end-learn/css.md rename to blog/front-end-learn/css-basic.md diff --git a/blog/front-end-learn/css-box.md b/blog/front-end-learn/css-box.md new file mode 100644 index 0000000..5be42ac --- /dev/null +++ b/blog/front-end-learn/css-box.md @@ -0,0 +1,107 @@ +# 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）层叠性 + +同一个标签设置`不同`的样式 + +- 样式`层叠叠加`，共同作用在标签上 + +同一个标签设置`相同`的样式 + +- 样式会`层叠覆盖`，最终写在最后的样式生效 + +当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果 + +> 技巧: 编辑器多行输入 diff --git a/blog/front-end-learn/css-selector.md b/blog/front-end-learn/css-selector.md index 71b2f3a..0733926 100644 --- a/blog/front-end-learn/css-selector.md +++ b/blog/front-end-learn/css-selector.md @@ -5,12 +5,6 @@ - 文字颜色 color - 背景颜色 background-color -默认背景色是透明 - -```css -background-color: transparent; -``` - | 颜色表示方式 | 表示含义 | 属性值 | | -------------- | ----------------------------- | ------------------ | | 关键词 | 预定义的颜色名 | red、green、blue | diff --git a/blog/front-end-learn/demo/css-background-1.html b/blog/front-end-learn/demo/css-background-1.html new file mode 100644 index 0000000..55525cd --- /dev/null +++ b/blog/front-end-learn/demo/css-background-1.html @@ -0,0 +1,10 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-background-2.html b/blog/front-end-learn/demo/css-background-2.html new file mode 100644 index 0000000..d1017ad --- /dev/null +++ b/blog/front-end-learn/demo/css-background-2.html @@ -0,0 +1,11 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-background-3.html b/blog/front-end-learn/demo/css-background-3.html new file mode 100644 index 0000000..c76855f --- /dev/null +++ b/blog/front-end-learn/demo/css-background-3.html @@ -0,0 +1,12 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/demo/css-background-4.html b/blog/front-end-learn/demo/css-background-4.html new file mode 100644 index 0000000..3858e72 --- /dev/null +++ b/blog/front-end-learn/demo/css-background-4.html @@ -0,0 +1,17 @@ + + +
\ No newline at end of file diff --git a/blog/front-end-learn/basic.md b/blog/front-end-learn/html-basic.md similarity index 100% rename from blog/front-end-learn/basic.md rename to blog/front-end-learn/html-basic.md diff --git a/blog/front-end-learn/element.md b/blog/front-end-learn/html-element.md similarity index 99% rename from blog/front-end-learn/element.md rename to blog/front-end-learn/html-element.md index efeeb2c..19e3d63 100644 --- a/blog/front-end-learn/element.md +++ b/blog/front-end-learn/html-element.md @@ -1,4 +1,4 @@ -# 标签元素 +# HTML 标签元素 ## 1、标题标签 Heading diff --git a/blog/front-end-learn/index.md b/blog/front-end-learn/index.md index 9874cd1..9c74784 100644 --- a/blog/front-end-learn/index.md +++ b/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) -- GitLab