diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..d354ae6bf949678d1de71b58a6eff1501881c946 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/01-h5\346\226\260\347\211\271\346\200\247.md" @@ -0,0 +1,480 @@ +# HTML5 的新特性 + +## 本节目标 + +- 学会HTML5的新的语义元素 +- HTML5的媒体元素 + +## 1. HTML5 简介 + +HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 + +HTML5的设计目的是为了在移动设备上支持多媒体。 + +HTML5 为我们提供了一些新特性： + +- 新的语义元素，网页结构布局的时候，我们可以使用新的语义标签，而不是只有div+span标签。 +- 媒体元素，我们可以在html中直接嵌入音频和视频。 +- 新的表单控件，拓展了新的输入类型。`input`标签的`type`属性增加了其他选项，如：calendar，date，time，email，url，search等。 +- 用于绘画的`canvas`元素。 +- 对于本地离线存储的更好的支持。 + +## 2. HTML5代码介绍 + +```html + + + + + + Document + + + + + +``` + +### 2.1 `` + + 网页的第一个标签通常是``，表示文档类型，告诉浏览器如何解析网页。 + + 一般来说，只要简单声明`doctype`为`html`，浏览器就会按照 HTML 5 的规则处理网页。 + +> 有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为``本质上不是标签，更像一个处理指令。 +> +> ```html +> +> ``` + +### 2.2 `` + +``标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个``标签。 + +该标签的`lang`属性，表示网页内容默认的语言。 + +```html + +``` + +> 如果这个设置的语言和浏览器设置的语言不一致，浏览器会弹窗提示是否翻译。 + +### 2.3 `` + + ``标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。 + + ``的子元素一般有下面七个 : + +- ``：设置网页的元数据； +- ``：连接外部样式表。 +- ``：设置网页标题。 +- `<style>`：放置内嵌的样式表。 +- `<script>`：引入脚本。 +- `<noscript>`：浏览器不支持脚本时，所要显示的内容。 +- `<base>`：设置网页内部相对 URL 的计算基准。 + +#### 2.3.1 `<meta>` + +`<meta>`标签用于设置或说明网页的元数据，必须放在`<head>`里面。一个`<meta>`标签就是一项元数据，网页可以有多个`<meta>`。`<meta>`标签约定放在`<head>`内容的最前面。 + + 不管什么样的网页，一般都可以放置以下两个`<meta>`标签。 + +```html +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Page Title + +``` + + 上面例子中，第一个``标签表示网页采用 UTF-8 格式编码，第二个``标签表示网页在手机端可以自动缩放。 + + ``标签有三个属性: + + **（1）charset 属性** + + `charset`属性，用来指定网页的编码方式 。 该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。 + +```html + +``` + + 上面代码声明，网页为 UTF-8 编码。 除非确实有需要，否者`charset`属性的值一般都是`utf-8`。 + + **（2）name 属性，content 属性** + +``标签的`name`属性表示元数据的名字，`content`属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。 + +```html + + + + + +``` + + 元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景 。 + +#### 2.3.2 `` + +`<title>`标签用于指定网页的标题，会显示在浏览器窗口的标题栏。 + +搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。 + +`<title>`标签的内部，不能再放置其他标签，只能放置无格式的纯文本。 + +### 2.4 `<body>` + + `<body>`标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是`<html>`的第二个子元素，紧跟在`<head>`后面。 + +## 3. 网页的语义结构 + +大多数网站的结构都很相似，包含页头，页脚，侧边栏，导航栏，等等。作为网页编写者，我们会给相应的`div`元素起个好理解的名字（比如`class="header"`）。但是对于浏览器而言，它无法确定每个`div`元素中包含的是什么内容。HTML5为此引入了新的语义元素。 + +语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。 + +HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。 + +下面是一个典型的语义结构的网页： + +```html +<body> + <header>页眉</header> + <main> + <article> + <h1>文章标题</h1> + <p>文章内容</p> + </article> + </main> + <footer>页尾</footer> +</body> +``` + +### 3.1 常用标签 + +#### 3.1.1 `<header>` + +`<header>`标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。 + +如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在`<header>`里面。 + +```html +<header> + <h1>公司名称</h1> + <ul> + <li><a href="/home">首页</a></li> + <li><a href="/about">关于</a></li> + <li><a href="/contact">联系</a></li> + </ul> + <form target="/search"> + <input name="q" type="search" /> + <input type="submit" /> + </form> +</header> +``` + +如果`<header>`用在文章的头部，则可以把文章标题、作者等信息放进去。 + +```html +<article> + <header> + <h2>文章标题</h2> + <p>张三，发表于2010年1月1日</p> + </header> +</article> +``` + +由于`<header>`可以用在多种场景，所以一个页面可能包含多个`<header>`，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，`<header>`里面不能包含另一个`<header>`或`<footer>`。 + +#### 3.1.2 `<footer>` + +`<footer>`标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。 + +```html +<body> + <footer> + <p>© 2021 xxx 公司</p> + </footer> +</body> +``` + +上面代码中，版权信息放在`<footer>`里面。 + +`<footer>`也可以放在文章里面。 + +```html +<article> + <header> + <h1>文章标题</h1> + </header> + <footer> + <p>© 禁止转贴</p> + </footer> +</article> +``` + +`<footer>`不能嵌套，即内部不能放置另一个`<footer>`，也不能放置`<header>`。 + +#### 3.1.3 `<main>` + +`<main>`标签表示页面的主体内容，一个页面只能有一个`<main>`。 + +```html +<body> +<header>页眉</header> +<main> + <article>文章</article> +</main> +<aside>侧边栏</aside> +<footer>页尾</footer> +</body> +``` + +注意，`<main>`是顶层标签，不能放置在`<header>`、`<footer>`、`<article>`、`<aside>`、`<nav>`等标签之中。 + +#### 3.1.4 `<article>` + +`<article>`标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（`<h1>`到`<h6>`）。 + +```html +<article> + <h2>文章标题</h2> + <p>文章内容</p> +</article> +``` + +一个网页可以包含一个或多个`<article>`，比如包含多篇文章。 + +#### 3.1.5 `<aside>` + +`<aside>`标签用来放置与网页或文章主要内容间接相关的部分。网页级别的`<aside>`，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的`<aside>`，可以用来放置补充信息、评论或注释。 + +```html +<!-- 网页级别的aside --> +<body> + <main>主体内容</main> + <aside>侧边栏</aside> +</body> +``` + +```html +<p>第一段</p> +<!-- 文章评注 --> +<aside> + <p>本段是文章的重点。</p> +</aside> +``` + +#### 3.1.6 `<section>` + +`<section>`标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如`<article>`可以包含多个`<section>`。 + +```html +<article> + <h1>文章标题</h1> + <section> + <h2>第一章</h2> + <p>...</p> + </section> + <section> + <h2>第二章</h2> + <p>...</p> + </section> +</article> +``` + +#### 3.1.7 `<nav>` + +`<nav>`标签用于放置页面或文档的导航信息。 + +```html +<nav> + <ol> + <li><a href="item-a">商品 A</a></li> + <li><a href="item-b">商品 B</a></li> + <li>商品 C</li> + </ol> +</nav> +``` + +一般来说，`<nav>`往往放置在`<header>`里面，不适合放入`<footer>`。另外，一个页面可以有多个`<nav>`，比如一个用于站点导航，另一个用于文章导航。 + +`<nav>`里面通常是列表，但也可以放置其他标签。 + +#### 3.1.7 `<figure>` 和 `<figcaption>` + +`<figure>`标签可以理解为一个图像区块，将图像和相关信息封装在一起。 + +`<figcaption>`是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。 + +```html +<figure> + <img src="https://example.com/foo.jpg"> + <figcaption>示例图片</figcaption> +</figure> +``` + +除了图像，`<figure>`还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息，封装在一起的语义容器。 + +```html +<figure> + <figcaption>JavaScript 代码示例</figcaption> + <p><code>const foo = 'hello';</code></p> +</figure> +``` + +#### 3.1.8 `<details>` 和 `<summary>` + +`<details>`标签用来折叠内容，浏览器会折叠显示该标签的内容。 + +```html +<details> +这是一段解释文本。 +</details> +``` + +上面的代码在浏览器里面，会折叠起来，显示`详情`，前面有一个三角形，就像下面这样。 + + ![](images/01-img-01.png) + +展开会显示详细内容，然后再次点击，展开的文本又会重新折叠起来。 + +![](images/01-img-02.png) + +`<details>`标签的open属性，用于默认打开折叠。 + +`<summary>`标签用来定制折叠内容的标题。 + +```html +<details> + <summary>这是标题</summary> + 这是一段解释文本。 +</details> +``` + +通过 CSS 设置 `summary::marker`，可以改变标题前面的三角箭头。 + +```css +summary::marker { + content: '\2714'; + color: #696f7c; + margin-right: 5px; +} +``` + +> `::marker`是一个伪元素，伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。`content`属性值，可以是纯文本，html的属性`attr(属性名)`，`url(图片，音频，视频等资源的url)`, +> +> unicode字符集（采用4位的16进制编码，不同浏览器有差异），还可以是计算方法`counter()`。 + +### 3.2 文本标签 + +#### 3.2.1 `<strong>` 和 `<b>` + +- `<strong>`是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。 + +- `<b>`与`<strong>`很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它是 Boldface 的缩写。 + +**区别：** + +`<b>`标签没有语义，是一个纯样式的标签。`<strong>`标签有意义，有强调作用。 + +#### 3.2.2 `<em>` 和 `<i>` + +- `<em>`是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。 + + 虽然浏览器通常会以斜体显示`<em>`，但无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。 + +- `<i>`标签与`<em>`相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。 + +**区别：** + +`<i>`标签的语义不强，更接近是一个纯样式的标签，建议优先使用`<em>`标签代替它。 + +## 4. 多媒体标签 + +除了图像，网页还可以放置视频和音频。 + +### 4.1 `<video>` + +`<video>`标签是一个块级元素，用于放置视频。 如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示`<video>`内部的子元素。 + +```html +<video src="example.mp4" controls> + <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p> +</video> +``` + +HTML 标准没有规定浏览器需要支持哪些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，可以使用`<source>`标签，放置同一个视频的多种格式。 + +```html +<video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p> +</video> +``` + +上面代码中，`<source>`标签的`type`属性的值是视频文件的 MIME 类型，上例指定了两种格式的视频文件：MP4 和 WebM。如果浏览器支持 MP4，就加载 MP4 格式的视频，不再往下执行了。如果不支持 MP4，就检查是否支持 WebM，如果还是不支持，则显示提示。 + +> 视频格式相关知识点请参阅： https://www.zhihu.com/question/20997688/answer/29642529 + +#### 4.1.1 `<video>`属性 + +- `src`：视频文件的网址。 +- `controls`：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。 +- `width`：视频播放器的宽度，单位像素。 +- `height`：视频播放器的高度，单位像素。 +- `autoplay`：视频是否自动播放，该属性为布尔属性。 +- `loop`：视频是否循环播放，该属性为布尔属性。 +- `muted`：是否默认静音，该属性为布尔属性。 +- `poster`：视频播放器的封面图片的 URL。 +- `preload`：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置`autoplay`的情况。它有三个值，分别是`none`（不缓冲）、`metadata`（仅仅缓冲视频文件的元数据）、`auto`（可以缓冲整个文件）。 +- `playsinline`：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。 + +```html +<video width="400" height="400" + autoplay loop muted + poster="poster.png"> +</video> +``` + +> 只设置`autoplay`，自动播放的效果在谷歌浏览器中不能马上生效： +> +> **处理方式：** +> +> 给`<video>`标签添加`muted`属性，设置静音，然后设置`autoplay`就能够自动播放了。 + +### 4.2 `<audio>` + +`<audio>`标签是一个块级元素，用于放置音频，用法与`<video>`标签基本一致。 + +```html +<audio controls> + <source src="foo.mp3" type="audio/mp3"> + <source src="foo.ogg" type="audio/ogg"> + <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p> +</audio> +``` + +#### 4.2.1 `<audio>`属性 + +- `src`：音频文件网址。 +- `autoplay`：是否自动播放，布尔属性。 +- `controls`：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。 +- `loop`：是否循环播放，布尔属性。 +- `muted`：是否静音，布尔属性。 +- `preload`：音频文件的缓冲设置。 + +> chrome、safari、firefox都在某些版本后限制了audio自动播放（chrome是66+），必须要用户与文档产生交互，否则会报错。 +> +> chrome 自动播放策略变为：减少广告杂音对用户的影响以及节省流量，所以禁止自动播放。 + +### 4.3 `<source>` + +`<source>`标签用于`<video>`、`<audio>`的内部，用于指定一项外部资源。单标签是单独使用的，没有结束标签。 + +它有如下属性，具体示例请参见相应的容器标签。 + +- `type`：指定外部资源的 MIME 类型。 +- `src`：指定源文件，用于`<video>`和`<audio>`。 + diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-01.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..16669fdec4c358dbe35a8038a42442865b2ae988 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-01.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-02.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..743b20d58701ef5f66fc2cdb903168f6a1d690cc Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/01-img-02.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/courgette.log" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/courgette.log" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/debug.log" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/debug.log" new file mode 100644 index 0000000000000000000000000000000000000000..8c2d2159b42785e57d22bf18a43bb3188d925341 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/courseware/images/debug.log" @@ -0,0 +1,5 @@ +[1107/153711.769:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: browser +[1107/153711.805:INFO:gpu_process_host.cc(941)] [XWEB_LOG_GPU] GPU process laucnched multi-process mode SUCCESS!!! gpu-process-pid:2984 gpu-process-sandbox:1 +[1107/153711.831:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: gpu-process +[1107/153711.960:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: utility +[1107/153911.860:INFO:crash_reporting.cc(219)] Crash reporting enabled for process: gpu-process diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo01.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..66211ff574df463dcab34fafd8d703b4a62af096 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo01.html" @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>我是第一个页面 + + + + +
主体内容
+ + +
+

+
+
+ + +
+ +
示例图片
+
+ +
+ 这是标题 + 这是一段解释文本。 +
+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo02.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..f8d1999d83430f0feabbaf999552596f654d231d --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/demo02.html" @@ -0,0 +1,13 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/horse.ogg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/horse.ogg" new file mode 100644 index 0000000000000000000000000000000000000000..a39a4e5a6a2cf0d9d39aa46e745c2e51dd0c93c5 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/horse.ogg" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.mp4" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..3b46840196654031cb7d4cdd9053592b105f8df5 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.mp4" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogg" new file mode 100644 index 0000000000000000000000000000000000000000..34588aa17889dc5d49d8f70db8f5fd06ab2a8700 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogg" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogv" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogv" new file mode 100644 index 0000000000000000000000000000000000000000..b476d195864d1de50df2b6eefe82f20c00e0d80d Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/movie.ogv" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/news.mp3" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/news.mp3" new file mode 100644 index 0000000000000000000000000000000000000000..bf69c0d5cf1176093058656b9834b44eb1c77b68 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/01 H5\346\226\260\347\211\271\346\200\247/example/news.mp3" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\346\270\220\345\217\230\347\237\251\345\275\242.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\346\270\220\345\217\230\347\237\251\345\275\242.html" new file mode 100644 index 0000000000000000000000000000000000000000..af5237d0441c09366ee38fa30c6af6b8c5945c62 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\346\270\220\345\217\230\347\237\251\345\275\242.html" @@ -0,0 +1,38 @@ + + + + + + Document + + + + + 您的浏览器不支持Canvas + +
+ + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\351\233\252\350\212\261\351\243\230\350\220\275\346\225\210\346\236\234.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\351\233\252\350\212\261\351\243\230\350\220\275\346\225\210\346\236\234.html" new file mode 100644 index 0000000000000000000000000000000000000000..4ea0c864617eda3b2c4870cccb70f2926dab97a7 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/H5+css3+\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/\351\233\252\350\212\261\351\243\230\350\220\275\346\225\210\346\236\234.html" @@ -0,0 +1,59 @@ + + + + + + Document + +
+ + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/02-canvas.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/02-canvas.md" new file mode 100644 index 0000000000000000000000000000000000000000..720fe369328b1c6c8015ad72c642b1630c35e27e --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/02-canvas.md" @@ -0,0 +1,432 @@ +# Canvas + +## 课前回顾 + +上节课，我们学习了H5的新的语义标签，和多媒体标签。同学们需要慢慢更改自己写HTML代码的习惯，尽量写出具有合理语义结构的代码。 + +## 本节目标 + +- 了解Canvas是什么 +- 能够在画布上绘制基本图形 +- 能够实现简单的动画效果 + +## 1. 概述 + +``元素用语生成图像。它本身就像一个画布， JavaScript 通过操作它的 API，在上面生成图像。它的底层是一个个像素，基本上``是一个可以用 JavaScript 操作的位图（bitmap）。 + +使用 Canvas API 之前，需要在网页里面新建一个``元素。 + +```html + + 您的浏览器不支持 Canvas + +``` + +如果浏览器不支持这个 API，就会显示``标签中间的文字：“您的浏览器不支持 Canvas”。 + +每个``元素都有一个对应的`CanvasRenderingContext2D`对象。Canvas API 就定义在这个对象上面。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +``` + +> 我们会发现，canvas相关属性和方法在VSCode里面并没有给我们提示。这样不方便我们学习。 +> +> **解决方法** +> +> ```js +> /** @type {HTMLCanvasElement} */ +> // 一定要放在下面这个语句前面 +> var canvas = document.getElementById('myCanvas'); +> ``` + +上面代码中，``元素节点对象的`getContext()`方法，返回的就是`CanvasRenderingContext2D`对象。 + +注意，Canvas API 需要`getContext`方法指定参数`2d`，表示该``节点生成 2D 的平面图像。如果参数是`webgl`，就表示用于生成 3D 的立体图案，这部分属于 WebGL API。 + +## 2. 绘制图形 + +Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点`(0, 0)`位于图像左上角，`x`轴的正向是原点向右，`y`轴的正向是原点向下。 + +### 2.1 路径 + +以下方法和属性用来绘制路径。 + +```js +let canvas = document.getElementById('myCanvas'); +let ctx = canvas.getContext('2d'); +``` + +- `ctx.beginPath()`：开始绘制路径。 +- `ctx.closePath()`：关闭路径，它会试图从当前路径的终点连一条路径到起点，让整个路径闭合起来。如果图形已经封闭，或者只有一个点，那么此方法不会产生任何效果。 +- `ctx.moveTo(x, y)`：设置路径的起点，即将一个新路径的起始点移动到`(x, y)`坐标。 +- `ctx.lineTo(x, y)`：使用直线从当前点连接到`(x, y)`坐标。 +- `ctx.fill()`：在路径内部填充颜色（默认为黑色）。 +- `ctx.stroke()`：路径线条着色（默认为黑色）。 +- `ctx.fillStyle`：指定路径填充的颜色和样式（默认为黑色）。 +- `ctx.strokeStyle`：指定路径线条的颜色和样式（默认为黑色）。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +console.log(ctx); +// 开始绘制路径 +ctx.beginPath(); +// 将初始位置设定到（100， 100）位置 +ctx.moveTo(100, 100); +// 连线到（200， 200）的位置 +ctx.lineTo(200, 200); +// 再连线到（100，200）的位置 +ctx.lineTo(100, 200); +``` + +上面代码只是确定了路径的形状，画布上还看不出来，因为没有颜色。所以还需要着色。 + +```js +ctx.fill(); +// 或者 +ctx.stroke(); +``` + +上面代码中，这两个方法都可以使得路径可见。`fill()`在路径内部填充颜色，使之变成一个实心的图形；`stroke()`只对路径线条着色。 + +可以使用`fillStyle`和`stokeStyle`属性指定其他颜色。 + +```js +ctx.fillStyle = 'red'; // 属性设置需要放在方法执行前面，不然无法生效。 +ctx.fill(); + +// 或者 +ctx.strokeStyle = 'red'; +ctx.stroke(); +``` + +### 2.2 线型 + +以下的方法和属性控制线条的视觉特征。 + +- `ctx.lineWidth`：指定线条的宽度，默认为`1.0`。 +- `ctx.lineCap`：指定线条末端的样式，有三个可能的值： + - `butt`：默认值，末端为矩形。 + - `round`：末端为圆形。 + - `square`：末端为突出的矩形，矩形宽度不变，高度为线条宽度的一半。 +- `ctx.lineJoin`：指定线段交点的样式，有三个可能的值： + - `round`：交点为扇形。 + - `bevel`：交点为三角形底边。 + - `miter`：默认值，交点为菱形。 +- `ctx.miterLimit`：指定交点菱形的长度，默认为`10`。该属性只在`lineJoin`属性的值等于`miter`时有效。 +- `ctx.getLineDash()`：返回一个数组，表示虚线里面线段和间距的长度。 +- `ctx.setLineDash()`：数组，用于指定虚线里面线段和间距的长度。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(100, 100); +ctx.lineTo(200, 200); +ctx.lineTo(100, 200); + +ctx.lineWidth = 3; +ctx.lineCap = 'round'; // 线条末端设置为圆角 +ctx.lineJoin = 'round'; // 线条交接点设置为圆角 +ctx.setLineDash([15, 5]); // 设置为虚线 +ctx.stroke(); +``` + +### 2.3 矩形 + +以下方法用来绘制矩形。 + +- `ctx.rect()`：绘制矩形路径。 +- `ctx.fillRect()`：填充一个矩形。 +- `ctx.strokeRect()`：绘制矩形边框。 +- `ctx.clearRect()`：指定矩形区域的像素都变成透明。 + +上面四个方法个格式都一样，都接受四个参数，分别是矩形左上角的横坐标和纵坐标，矩形的宽和高。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.rect(10, 10, 100, 100); // 绘制路径 +ctx.fill(); // 着色，实心矩形 +// 空心矩形 +ctx.rect(110, 10, 100, 100); +ctx.stroke(); // 线条着色，空心矩形 +``` + +`fillRect()`用来向一个矩形区域填充颜色： + +```js +ctx.fillStyle = 'green'; +ctx.fillRect(110, 110, 100, 100); // 一步到位，绘制路径并填色了 +``` + +`strokeRect()`用来绘制一个矩形区域的边框。 + +```js +ctx.strokeStyle = 'blue'; +ctx.strokeRect(110, 10, 100, 100); // 一步到位，绘制路径并填色了 +``` + +`clearRect()`用于擦除指定矩形区域的像素颜色，等同于把早先的绘制效果都去除。 + +```js +ctx.fillRect(10, 10, 100, 100); // 绘制一个实心矩形 +ctx.clearRect(15, 15, 90, 90); // 擦除一个矩形 +``` + +我们可以看到`clearRect()`会将参数设定的区域的内容擦除。 + +### 2.4 弧线 + +以下方法用于绘制弧形。 + +- `ctx.arc()`：通过指定圆心和半径绘制弧形。 +- `ctx.arcTo()`：通过制定两根切线和半径绘制弧形。 + +**`arc()`语法：** + +``` +ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); +``` + +![](images/arc.gif) + +- `x, y` ：是圆心的坐标 +- `radius`：是半径 +- `startAngle` 和`endAngle`则是扇形的起始角度和终止角度（以弧度表示） +- `anticlockwise`：表示做图时，应该逆时针画（true）还是顺时针画（false），这个参数用来控制扇形的方法（比如上半圆还是下半圆） + +绘制一个实心圆：半径为50， 起始角度为0， 终止角角度为2 * PI的完整的圆。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +// 开始绘制 +ctx.beginPath(); // 绘制弧线，需要调用beginPath()方法 +ctx.arc(60, 60, 50, 0, Math.PI*2, true); +ctx.fill(); +``` + +绘制一个空心圆： + +```js +ctx.beginPath(); +ctx.arc(100, 20, 50, 0, Math.PI * 2, false); +ctx.stroke(); +``` + +利用`closePath()`方法，可以绘制一个缺了一块的圆。 + +```js +ctx.beginPath(); +ctx.arc(100, 20, 50, 0, Math.PI * 1.7, false); +ctx.closePath(); // 关闭绘制，会将绘制终点和起点用线连接起来。 +ctx.stroke(); +``` + +**`arcTo()`**用来绘制圆弧，需要给出两个点的坐标，当前点与第一个点形成一条直线，第一个点与第二个点形成另一条直线，然后画出与这两根直线相切的弧线。 + +**语法** + +``` +ctx.arcTo(x1, y1, x2, y2, radius); +``` + +- (x1, y1)：第一个点的坐标 +- (x2, y2)：第二个点的坐标 +- radius：半径 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(20, 20); // 创建开始点 +ctx.arcTo(100, 20, 100, 100, 25); // 根据给出的两个点坐标，绘制弧线 +ctx.lineTo(100, 100); // 弧线绘制完成后，当前点在弧线与第二条线的切点上。再画一条线，将这两点连起来。 +ctx.stroke(); +``` + +### 2.5 文本 + +以下方法和属性用于绘制文本。 + +- `ctx.fillText()`：在指定位置绘制实心字符。 +- `ctx.strokeText()`：在指定位置绘制空心字符。 +- `ctx.font`：指定字型大小和字体，默认值为`10px sans-serif`。 +- `ctx.textAlign`：文本的对齐方式，默认值为`start`。 + +#### 2.5.1 `fillText()` + +`fillText()`用来绘制实心字符。 + +``` +ctx.fillText(text, x, y [, maxWidth]) +``` + +该方法接受4个参数： + +- `text`：所要填充的字符串。 +- `x`,`y`：文字起点的坐标，单位像素。 +- `maxWidth`：文本的最大像素宽度。该参数可选，如果省略，则表示宽度没有限制。如果文本实际长度超过这个参数设置的值，那么浏览器将尝试用较小的字体填充。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); +ctx.fillText('Hello world', 50, 50); +``` + +上面代码在`(50, 50)`位置写入字符串`Hello world`。 + +**注意：**`fillText()`方法不支持文本断行，所有文本一定出现在一行内。如果要生成多行文本，只能调用多次`fillText()`方法。 + +#### 2.5.2 `strokeText()` + +`strokeText()`方法用来添加空心字符，它的参数与`fillText()`一致。 + +```js +ctx.strokeText('Hello world', 50, 50); +``` + +#### 2.5.3 `font` + +上面两种方法绘制的文本，默认都是`10px`大小、`sans-serif`字体。`font`属性可以改变字体设置。该属性的值是一个字符串，使用CSS的`font`属性即可。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = 'Bold 20px Arial'; +ctx.fillText('Hello world', 50, 50); +``` + +#### 2.5.4 `textAlign` + +`textAlign`属性用来指定文本的对齐方式。它可以取以下几个值。 + +- `left`：左对齐 +- `right`：右对齐 +- `center`：居中 +- `start`：默认值，起点对齐（从左到右的文本为左对齐，从右到左的文本为右对齐） +- `end`：结尾对齐（从左到右的文本为右对齐，从右到左的文本为左对齐） + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = 'Bold 20px Arial'; +ctx.textAlign = 'center'; +ctx.fillText('Hello world', 50, 50); +``` + +### 2.6 渐变色 + +以下方法用于设置渐变色效果和图像填充效果。 + +- `ctx.createLinearGradient()`：定义线性渐变样式。 +- `ctx.createRadialGradient()`：定义辐射渐变样式。 + +#### 2.6.1 `createLinearGradient()` + +`createLinearGradient()`方法按照给定直线，生成线性渐变的样式。 + +``` +ctx.createLinearGradient(x0, y0, x1, y1); +``` + +- `x0, y0`：设定起点的坐标 +- `x1, y1`：设定终点的坐标 + +通过不同的坐标值，可以生成从上至下，从左到右的渐变等等。 + +该方法的返回值是一个`CanvasGradient`对象，该对象只有一个`addColorStop()`方向，用来指定渐变点的颜色。`addColorStop()`方法接受两个参数，第一个参数是0到1之间的一个位置量，0表示起点，1表示终点，第二个参数是一个字符串，表示CSS颜色。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var gradient = ctx.createLinearGradient(0, 0, 200, 0); +gradient.addColorStop(0, 'green'); +gradient.addColorStop(1, 'white'); +ctx.fillStyle = gradient; // 将渐变样式赋值给fillStyle属性 +ctx.fillRect(10, 10, 200, 100); // 填充矩形区域 +``` + +#### 2.6.2 `createRadialGradient()` + +此方法定义一个辐射渐变，需要指定两个圆。 + +``` +ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) +``` + +- `x0, y0, r0`：辐射起始的圆的圆心坐标和半径 +- `x1, y1, r1`：辐射终止的圆的圆心坐标和半径 + +该方法的返回值也是一个`CanvasGradient`对象。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100); +gradient.addColorStop(0, 'white'); +gradient.addColorStop(1, 'green'); +ctx.fillStyle = gradient; +ctx.fillRect(0, 0, 200, 200); +``` + +## 3. 动画效果 + +通过改变坐标，很容易在画布 Canvas 元素上产生动画效果。 + +```js +var canvas = document.getElementById('myCanvas'); +var ctx = canvas.getContext('2d'); + +var posX = 20; +var posY = 100; + +setInterval(function () { + ctx.fillStyle = 'black'; + ctx.fillRect(0, 0, canvas.width, canvas.height); // 将画布背景色设置为黑色 + + posX += 1; + posY += 0.25; + + ctx.beginPath(); + ctx.fillStyle = 'white'; + + ctx.arc(posX, posY, 10, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fill(); +}, 30); +``` + +上面代码会产生一个小圆点，每隔30毫秒就向右下方移动的效果。 + +`setInterval()`函数的一开始，将画布重新渲染黑色底色，是为了抹去是上一步的小圆点。 + +上面例子通过设置圆心坐标，可以产生各种运动轨迹。下面是先上升后下降的例子。 + +```js +var vx = 10; +var vy = -10; +var gravity = 1; +setInterval(function() { + postX += vx; + postY += vy; + vy += gravity; + // ... +}, 30) +``` + +## 练习 + +同学课下自己练习雪花飘落的效果。这个效果网上可以看到很多参考答案，希望大家参考别人的代码，自己来实现这个效果。 + +> 实践出真章，只有多练，才能能好的理解canvas的方法和属性的作用和效果。一开始学习模仿别人是很正常的事情，通过别人的代码，理解别人的设计思路。这就是经验。 diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-01.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-01.png" new file mode 100644 index 0000000000000000000000000000000000000000..16669fdec4c358dbe35a8038a42442865b2ae988 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-01.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-02.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-02.png" new file mode 100644 index 0000000000000000000000000000000000000000..743b20d58701ef5f66fc2cdb903168f6a1d690cc Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/01-img-02.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-box.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-box.png" new file mode 100644 index 0000000000000000000000000000000000000000..57d17ead8c4c4022cfd592b12c4cd1dd23518f6a Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-box.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-loadcss.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-loadcss.png" new file mode 100644 index 0000000000000000000000000000000000000000..271ae97914f1532eb4b040b395973cb0effc1395 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-loadcss.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji.png" new file mode 100644 index 0000000000000000000000000000000000000000..e6d63be4aad9b862eec7a761d68c9f243290ce79 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji2.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji2.png" new file mode 100644 index 0000000000000000000000000000000000000000..93ee4fdf880f6bc2ee229557249867bb2dc6ebaf Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/03-taiji2.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/04-bg-image.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/04-bg-image.png" new file mode 100644 index 0000000000000000000000000000000000000000..ad42fc38d8672b5e5e9b50efec398c8db2e82f05 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/04-bg-image.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/arc.gif" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/arc.gif" new file mode 100644 index 0000000000000000000000000000000000000000..4b3e7ee9fbf17abd9d6448e9d77b7f48f2af984b Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/courseware/images/arc.gif" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/action.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/action.html" new file mode 100644 index 0000000000000000000000000000000000000000..de161bf7d36ebb27463c66ed09b738f133351c42 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/action.html" @@ -0,0 +1,40 @@ + + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arc.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arc.html" new file mode 100644 index 0000000000000000000000000000000000000000..226a4511d6c2a4890c41320a484f64c13d7084e5 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arc.html" @@ -0,0 +1,45 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arcTo.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arcTo.html" new file mode 100644 index 0000000000000000000000000000000000000000..79e2459bbd756e5f9a863e3186146a9e417255c4 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/arcTo.html" @@ -0,0 +1,47 @@ + + + + + + + + Document + + + + + + 您的浏览器不支持 Canvas + +
+ + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/demo01.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..8d66518ecee21477ebf54a6eded7db0e5b2936d4 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/demo01.html" @@ -0,0 +1,18 @@ + + + + + + Document + + + + 您的浏览器不支持canvas + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/line.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/line.html" new file mode 100644 index 0000000000000000000000000000000000000000..8068ff748a43a4dfed1329725f43a811ff6886a3 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/line.html" @@ -0,0 +1,50 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/linearGradient.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/linearGradient.html" new file mode 100644 index 0000000000000000000000000000000000000000..74f0319f1be5d5e077e1a7b2bef3f18a4a98faf0 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/linearGradient.html" @@ -0,0 +1,37 @@ + + + + + + + + Document + + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/rect.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/rect.html" new file mode 100644 index 0000000000000000000000000000000000000000..d0c12ca06abb63367f04948aef9f263c7c0beaec --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/rect.html" @@ -0,0 +1,41 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/text.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/text.html" new file mode 100644 index 0000000000000000000000000000000000000000..8d081d5ccf4068def0ba186ee50a686427b0d1e5 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/02 Canvas/example/text.html" @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + 您的浏览器不支持 Canvas + + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..b562cffb5b20c7e2491f45c448912f866c4af0aa --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/03-CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213.md" @@ -0,0 +1,286 @@ +# CSS 选择器和盒模型 + +## 本节目的 + +1. 掌握 CSS 盒子模型 +2. 掌握 CSS 选择器的使用 + +CSS3 是最新的 CSS 的标准。它完全向后兼容，即它兼容之前标准的属性。 + +为了更加方便大家学习CSS相关的内容，我们将CSS 拆分为“模块”。本课程涉及如下模块的学习，这些模块里面既包含了CSS3之前的属性，和CSS3新增的属性。 + +- 选择器 +- 盒模型 +- 背景和边框 +- 文字特效 +- 2D/3D转换 +- 过渡 +- 动画 +- 布局 +- 媒体查询 + +## CSS 究竟是怎样工作的？ + +当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。 + +1. 浏览器载入HTML文件。 +2. 将HTML文件转化为一个 DOM。 +3. 接下来，浏览器会拉去该HTML相关的大部分资源，比如图片、视频和CSS样式。JavaScript 则会稍后进行处理。 +4. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如element、id、class等等）把他们分类。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如标签选择器，类选择器，id选择器等）应用在对应的DOM的节点上，并添加节点依赖的样式。这个步骤称为渲染树。 +5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。 +6. 网页展示在屏幕上（这一步被称为着色）。 + +![](images/03-loadcss.png) + +## 1. 选择器 + +### 1.1 基本选择器 + +| 选择器 | 名称 | 版本 | 描述 | +| ------ | ---------- | ---- | ----------------------------- | +| * | 通配选择器 | CSS2 | 匹配所有元素 | +| E | 标签选择器 | CSS1 | 匹配页面上对应的标签元素 | +| #id | id选择器 | CSS1 | 通过标签的id属性值匹配元素 | +| .class | 类选择器 | CSS1 | 通过标签的class属性值匹配元素 | + +### 1.2 关系选择器 + +| 选择器 | 名称 | 版本 | 描述 | +| ------ | ---------- | ---- | -------------------------------- | +| E F | 后代选择器 | CSS1 | 匹配E标签内的所有匹配的F元素。 | +| E>F | 子代选择器 | CSS2 | 选择父元素是 E 的所有 F 元素。 | +| E+F | 相邻选择器 | CSS2 | 选择紧跟 E 元素的首个 F 元素。 | +| E~F | 兄弟选择器 | CSS3 | 选择前面有 E 元素的每个 F 元素。 | + +### 1.3 属性选择器 + +| 选择器 | 版本 | 描述 | +| ------------- | ---- | ------------------------------------------------ | +| [att] | CSS2 | 选择带有 att 属性的所有元素 | +| [att=value] | CSS2 | 选择带有 att="value" 属性的所有元素 | +| [att~=value] | CSS2 | 选择 att 属性包含单词 "value" 的所有元素。 | +| [att\|=value] | CSS2 | 选择 att 属性值以 "value" 开头的所有元素。 | +| [att^=value] | CSS3 | 选择其 att 属性值以 "value" 开头的所有元素。 | +| [att$=value] | CSS3 | 选择其 att 属性以 "value" 结尾的所有元素。 | +| [att*=value] | CSS3 | 选择其 att 属性值中包含 "value" 子串的所有元素。 | + +### 1.4 伪类选择器 + +CSS 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下、点击完成等，通过伪类可以为元素的状态修改样式。 + +伪类选择器主要可以分为：动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。 + +#### 1.4.1 动态伪类选择器 + +| 选择器 | 版本 | 描述 | +| -------- | ------ | ---------------------------------------------------- | +| :link | CSS1 | 用于链接元素，匹配定义为超链接并且未被访问过的元素。 | +| :visited | CSS1 | 用于链接元素，匹配定义为超链接并且已被访问过的元素。 | +| :active | CSS1/2 | 匹配被激活的元素。常用于链接和按钮。 | +| :hover | CSS1/2 | 用户鼠标停留在元素上的元素。 | +| :focus | CSS1/2 | 匹配获取到焦点的元素。 | + +a标签有4中伪类（即对应四种状态），如下： + +- :link：超链接未点击之前 +- :visited：链接访问过 +- :hover：鼠标放到标签上的时候 +- :active：激活，鼠标点击标签，但是不松手时。 + +a标签的这四种伪类选择器存在着一定的顺序，各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。 + +a标签的这四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active。记忆规则 **LoVe/HAte** ，也就是爱/恨。也可以是其他记忆规则。 + +#### 1.4.2 UI元素状态伪类选择器 + +| 选择器 | 版本 | 描述 | +| --------- | ---- | ---------------------------------------- | +| :checked | CSS3 | 选择每个被选中的复选按钮或单选按钮元素。 | +| :enabled | CSS3 | 匹配所有启用的表单元素 | +| :disabled | CSS3 | 匹配所有禁用的表单元素 | + +UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作。 + +#### 1.4.3 结构伪类选择器 + +| 选择器 | 版本 | 描述 | +| -------------------- | ---- | ------------------------------------------------------------ | +| :fist-child | CSS3 | 选择作为其父的首个子元素的每个元素。 | +| :last-child | CSS3 | 选择作为其父的最后一个子元素的每个元素。 | +| :root | CSS3 | 选择元素的根元素。在HTML文档中，根元素始终是html。 | +| :nth-child(n) | CSS3 | 选择作为其父的第n个子元素的每个元素。 | +| :nth-last-child(n) | CSS3 | 选择作为父的倒数第n个子元素的每个元素，从最后一个子元素计数。 | +| :first-of-type | CSS3 | 选择作为其父的首个指定类型的元素。 | +| :last-of-type | CSS3 | 选择作为其父的最后一个指定类型的元素。 | +| :only-of-type | CSS3 | 匹配父元素的所有子元素中唯一的那个子元素。 | +| :nth-of-type(n) | CSS3 | 选择父元素内具有指定类型的第n个元素 | +| :nth-last-of-type(n) | CSS3 | 选择父元素内具有指定类型的倒数第n个元素 | +| :empty | CSS3 | 选择没有子元素的元素，而且该元素也不包含任何文本节点 | + +**`:nth-child(n)`选择器：** + +这个选择器的原理：首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从`1`开始排序。 + +**参数值情况** + +1. 情况一：可以是整数（1， 2， 3）、关键字（even, odd）。索引是从1开始的。 + +2. 情况二：可以是表达式（an+b）（n=0,1,2,3）。 + - `0n+3`：匹配第三个元素 + - `1n+0`：匹配`n`匹配每一个元素，n 为0时，第0个元素不存在，没有效果。 + - `a`和`b`都必须是整数。而且`an`必须写在`b`前面，不能写生`b+an`的形式。 + +**`:nth-of-type(n)`选择器：** + +这个选择器的原理：首先找到所有当前具有相同特性的兄弟元素，然后按照位置先后顺序从`1`开始排序。 + +**参数值情况**：同`:nth-child`一样。 + +#### 1.4.4 否定伪类选择器 + +`:not()`：用来匹配不符合一组选择器的元素。 + +> **注意**： +> +> - `:not()`伪类不能被嵌套，这意味着 `:not(:not(...))` 是无效的。 +> - 由于伪元素不是简单的选择器，他们不能被当作 `:not()` 中的参数，形如 `:not(p::before)` 这样的选择器将不会工作。 + +### 1.5 伪元素 + +伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 + +伪元素必须紧跟在语句中的简单选择器/基础选择器之后。 + +**注意：**按照规范，应该使用双冒号（`::`）而不是单个冒号（`:`），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。 + +| 选择器 | 版本 | 描述 | +| ----------------------------- | ---------- | ------------------------------------------------------------ | +| ::first-letter(:first-letter) | CSS3(CSS1) | 匹配块级元素的第一行的第一个字母。 | +| ::first-line(:first-line) | CSS3(CSS1) | 匹配块级元素的第一行的内容。 | +| ::before(:before) | CSS3(CSS2) | 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 [`content`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content) 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。 | +| ::after(:after) | CSS3(CSS2) | 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合[`content`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content)属性来为该元素添加装饰内容。这个元素默认是行内元素。 | +| ::selection | CSS3 | 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分） | + +#### 1.5.1 **content属性**: + +CSS 的 `content` 属性用于在元素的`::before`和`::after`伪元素中插入内容。 + +**值**： + +- **`none`**：不会产生伪类元素 +- **`normal`**：`::before`和`::after`伪类元素中会被视为`none` +- **``**：文本内容 +- **``**：指定一个外部资源(比如图片) +- **`attr(x)`**：将元素的X属性以字符串形式返回。如果该元素没有X属性，则返回一个空字符串。 +- **``**：计数器。可以指定两种不同的函数：`counter()`和`counters()` +- **`open-quote` | `close-quote`**：添加引号。 + +## 2. CSS 盒子模型 + +当对一个文档进行布局的时候，浏览器会渲染引擎会根据标准之一的 **CSS 基础框盒模型（CSS basic box model）**，将所有元素表示为一个个矩形的盒子。CSS 决定这些盒子的大小，位置以及属性。 + +每个盒子由四部分组成，其效用由它们各自的边界定义。这四个边界分别是：内容边界（content），内边距边界（padding），边框边界（border），外边框边界（margin）。 + +![](images/03-box.png) + +### 2.1 内容区域 + +内容区域由内容边界限制，容纳元素的“真实”内容，例如文本、图像，或是一个视频播放器。 + +控制内容区域的属性有： + +| 属性名 | 属性值 | 说明 | +| ---------- | ---------------------------- | ---------------------------------------------------------- | +| width | auto \| length \| percentage | 设置元素的宽度。值为"auto"表示无特定宽度，取决其他属性值。 | +| height | auto \| length \| percentage | 设置元素的高度。值为"auto"表示无特定高度，取决其他属性值。 | +| min-width | length \| percentage | 设置元素的最小宽度。 | +| max-width | none \| length \| percentage | 设置元素的最大宽度。“none"为默认值，不设置最大宽度。 | +| min-height | length \| percentage | 设置元素的最小高度。 | +| max-heigth | none \| length \| percentage | 设置元素的最大高度。”none"为默认值，不设置最大高度。 | + +> 对于img元素来说，仅制定`width`属性，其`height`值将根据图片原尺寸等比例缩放。同理，仅设置`height`属性，其`width`值将根据图片原尺寸等比例缩放。 + +### 2.2 内边距区域 + +内边距区域，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。 + +控制内边距的属性有： + +| 属性名 | 属性值 | 说明 | +| -------------- | ---------------------------- | --------------------------------------- | +| padding | [length \| percentage]{1, 4} | 这是简写形式，属性值可以是1~4个的情况。 | +| padding-top | length \| percentage | 设置上内边距。 | +| padding-right | length \| percentage | 设置右内边距。 | +| padding-bottom | length \| percentage | 设置下内边距。 | +| padding-left | length \| percentage | 设置左内边距。 | + +**`padding`属性值情况：** + +```css +/* 应用于所有边 */ +padding: 10px; + +/* 上边下边 | 左边右边 */ +padding: 10px 15px; + +/* 上边， 左边右边， 下边*/ +padding: 10px 15px 20px; + +/* 上， 右， 下， 左*/ +padding： 5px 10px 10px 15px; +``` + +### 2.3 边框区域 + +边框区域扩展至内边距区域，是容纳边框的区域。边框的粗细由 `border-width`和简写的`border`属性控制。 + +假如框盒上设有背景（`background-color`或`background-image`），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。 + +### 2.4 外边距区域 + +外边距区域用空白区域扩展边框区域，以分开相邻的元素。 + +控制外边距的属性有： + +| 属性名 | 属性值 | 说明 | +| ------------- | --------------------------- | --------------------------------------- | +| margin | [length \|percentage]{1, 4} | 这是简写形式，属性值可以是1~4个的情况。 | +| margin-top | length \|percentage | 设置上外边距。 | +| margin-right | length \|percentage | 设置右外边距。 | +| margin-bottom | length \|percentage | 设置下外边距。 | +| margin-left | length \|percentage | 设置左外边距。 | + +**`margin`属性值情况：** + +```css +/* 应用于所有边 */ +margin: 10px; + +/* 上边下边 | 左边右边 */ +margin: 10px 15px; + +/* 上边， 左边右边， 下边*/ +margin: 10px 15px 20px; + +/* 上， 右， 下， 左*/ +margin： 5px 10px 10px 15px; +``` + +## 作业 + +绘制一个太极图效果： + +![](images/03-taiji.png) + +熟悉伪元素选择器的使用，只用一个div盒子来完成效果。 + +> **提示** +> +> ![](images/03-taiji2.png) +> +> 1. 只有一个div的盒子 +> 2. div盒子设置白色背景，左边框设置黑色背景 +> 3. 给每个div盒子设置before和after伪元素，一个放在盒子中心的上方，一个放在盒子中心的下方（使用绝对定位） +> 4. 设置伪元素的宽高，边框宽度和颜色，然后div盒子和伪元素盒子设置圆角边框（border-radius） + +大圆的半径为200px，中间小圆的半径20px; diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-box.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-box.png" new file mode 100644 index 0000000000000000000000000000000000000000..57d17ead8c4c4022cfd592b12c4cd1dd23518f6a Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-box.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-loadcss.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-loadcss.png" new file mode 100644 index 0000000000000000000000000000000000000000..271ae97914f1532eb4b040b395973cb0effc1395 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-loadcss.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji.png" new file mode 100644 index 0000000000000000000000000000000000000000..e6d63be4aad9b862eec7a761d68c9f243290ce79 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji2.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji2.png" new file mode 100644 index 0000000000000000000000000000000000000000..93ee4fdf880f6bc2ee229557249867bb2dc6ebaf Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/courseware/images/03-taiji2.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/background.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/background.html" new file mode 100644 index 0000000000000000000000000000000000000000..f4721a5d5b79c244a3825f0358c1e9f59962136d --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/background.html" @@ -0,0 +1,110 @@ + + + + + + + Document + + + +

背景颜色：background-color

+
+

尝试将span元素的背景色修改我是span内部的内容

+
+ +
+

背景图片：background-image

+

两个一样大小的盒子，第一个是比盒子大的背景图像，第二个比盒子小的背景图像。

+

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

+
+
+
+
+
+

控制图像平铺: background-repeat

+

background-repeat属性值，不同值展示不一样的效果

+
+

no-repeat，不重复

+
+

repeat-x，水平重复

+
+

repeat-y，垂直重复

+
+

repeat，两个方向重复

+
+
+

控制图像大小: background-size

+

可选择值有数值大小或百分比，关键字cover, contain。为了展示，我先设置了background-repeat：no-repeat;

+
+

数字大小：backgroud-size: 100px 160px;

+
+

关键字cover：background-size: cover

+
+

关键字contain: background-size: contain

+
+
+
+

控制图像位置：background-position

+
+

background-position: center center;

+
+

background-position: 20px 10%

+
+

background-position: center 20px

+
+

background-position: top 20px right 10px

+
+
+
+

背景附着：background-attachment

+

该属性值有两个值：值为scroll，则当页面滚动时，背景会移动。值为fixed时，背景被固定在可视窗口固定位置。

+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/border.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/border.html" new file mode 100644 index 0000000000000000000000000000000000000000..dc6ea3755b22f846808b7763b0323539d5703a34 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/border.html" @@ -0,0 +1,87 @@ + + + + + + + + Document + + + + +
+

Borders

+

Try changing the borders.

+
+ +
+ +
+ 
+            border: solid 10px;
+            border-radius: 10px 40px 40px 10px;
+
+
+
+
+ 
+            border: solid 10px red;
+            border-radius: 20px;
+
+
+
+

box-shadow效果

+
    +
  • 外阴影常规效果
    box-shadow:5px 5px rgba(0,0,0,.6);
    • +
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);
    • +
  • 外阴影模糊外延效果
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
    • +
  • 内阴影效果
    box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;
    • +
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);
    • +
+ + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/content-counter.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/content-counter.html" new file mode 100644 index 0000000000000000000000000000000000000000..56efbdba61ff12f90f864930b9a85eac0259666d --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/content-counter.html" @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/balloons.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/balloons.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..7d2e42c55bbde56369634f97be3c5b60ab6fad4d Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/balloons.jpg" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/star.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/star.png" new file mode 100644 index 0000000000000000000000000000000000000000..a0f5da20c9f638ec0e4d22c0d11315b59f980dbd Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/star.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/tree.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/tree.png" new file mode 100644 index 0000000000000000000000000000000000000000..817c4b2a207798e6d684fa6524bc09622127bfe0 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/images/tree.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/nth-child.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/nth-child.html" new file mode 100644 index 0000000000000000000000000000000000000000..a070418adc72570ccf392bb4aada4d8362daa85f --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/nth-child.html" @@ -0,0 +1,142 @@ + + + + + + + + Document + + + + +

span:nth-child(2n+1), 子元素中没有 + <em> 元素。 +

+

子元素中索引为 1, 3, 5, 7 的元素被选中。

+
+ Span 1! + Span 2 + Span 3! + Span 4 + Span 5! + Span 6 + Span 7! +
+ +
+ +

span:nth-child(2n+1), 子元素中包含一个 + <em> 元素。 +

+

子元素中索引为 1, 5, 7 的元素被选中。
+ 3 虽然也是计算结果，但是索引为3的这个子元素并不是<span>。 +

+
+ Span! + Span + This is an `em`. + Span + Span! + Span + Span! + Span +
+ +
+ +

span:nth-of-type(2n+1), 子元素中包含一个 + <em> 元素。 +

+

子元素中索引为 1, 4, 6, 8 的元素被选中。
+ nth-of-type，查找是在所有标签为span的子元素，然后按照先后顺序索引从1开始排序。然后找索引符合2n+1规则的元素。 +

+
+ Span! + Span + This is an `em`. + Span! + Span + Span! + Span + Span! +
+ +
+ +

span:first-child，找到作为第一个子元素的span元素

+
+
+ Span 1! + Span 2 + Span 3! +
+ +
+ This is an `em`. + Span! + Span +
+
+ +
+ +

span:first-of-type，找出兄弟元素中其类型的第一个元素

+
+
+ Span 1! + Span 2 + Span 3! +
+ +
+ This is an `em`. + Span! + Span +
+
+ +
+ +

:only-of-type，找出兄弟元素中没有和自己是相同类型的元素

+
+
I am `div` #1.
+

I am the only `p` among my siblings.

+
I am `div` #2.
+
I am `div` #3. + I am the only `i` child. + I am `em` #1. + I am `em` #2. +
+
+ +
+ + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-class.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-class.html" new file mode 100644 index 0000000000000000000000000000000000000000..3bef41d8dd3ef2afeb8c8ee4453466dcea348b53 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-class.html" @@ -0,0 +1,46 @@ + + + + + + + Document + + + + + 百度 +
+ +
我是一个div
+
+ + +
+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-elements.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-elements.html" new file mode 100644 index 0000000000000000000000000000000000000000..9219db2ae6c59b029cac3cceaba540e9843c669c --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/example/pseudo-elements.html" @@ -0,0 +1,93 @@ + + + + + + + + Document + + + + +

::first-letter,匹配块级元素第一行的第一个字母。

+

我是一个段落 + 仆以投人找洪下找罚太治慧才就是的，当后种，绪收雷帝妙头说是无非，争死婵论他他，一完日蒲孔在人志锐一看他天其，的得地蒲以磊釜文韩竟畴游，秦越皇承变促到秦你等娘仍，有因日狱承事侯不章尺，他馆的人即许尚不老生即韩，六她三不没谭惜是兴在久快禀极，他出天仑系以面办，找快病人自仁书什导，未降王服幕者商家国至可的友定，圣家地答我纯负上什瞠，贼动井往也，在有赏收人又守洪资但洪了是王，放司小洪德，孔重也杨范欲临。 +

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste eum natus laborum incidunt illum similique voluptatibus doloribus minima aliquid. Officia debitis modi eius, quaerat culpa eum ab quod, quia libero voluptates natus, odio nobis. Inventore, mollitia? Iste assumenda eos tenetur aliquid nisi modi? Nisi animi pariatur recusandae aliquid sit quia!

+ +
+ +

::first-line,匹配块级元素第一行的内容

+

我是一个段落 + 仆以投人找洪下找罚太治慧才就是的，当后种，绪收雷帝妙头说是无非，争死婵论他他，一完日蒲孔在人志锐一看他天其，的得地蒲以磊釜文韩竟畴游，秦越皇承变促到秦你等娘仍，有因日狱承事侯不章尺，他馆的人即许尚不老生即韩，六她三不没谭惜是兴在久快禀极，他出天仑系以面办，找快病人自仁书什导，未降王服幕者商家国至可的友定，圣家地答我纯负上什瞠，贼动井往也，在有赏收人又守洪资但洪了是王，放司小洪德，孔重也杨范欲临。 +

+ +
+ +

::selection，匹配文档中被用于选中的内容。

+

同松出你里谋同清斯者非拾责九快目感，非也罪非没范使设不，范极的程密拿，即量胆帝丰见，老词气衣，互谭非德便低，饮是的磊承，貂不关，惶。

+ +
+ +

::before，::after,通过content属性，设置伪元素展示的内容。

+
+ CSS: + 
+    h1::before{ content: 'Chapter';}
+    p::before{ content: open-quote;}
+    p::after{ content: close-quote;}
+    a::before{ content: url(http://www.mozilla.org/favicon.ico) "Mozilla"}
+
+

4

+

在此乐，他的金畴狱秦慨，叹应别苟十人教不洪留治廿谓越好程爻清千，洪笔使否生对，快是的韩，仄沫使畴书重竟论用恶第气光，他。

+ 主页 +
+
+ + + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\344\274\232\345\212\250\347\232\204\345\244\252\346\236\201\345\233\276.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\344\274\232\345\212\250\347\232\204\345\244\252\346\236\201\345\233\276.html" new file mode 100644 index 0000000000000000000000000000000000000000..68d3955957f33482580ad3dbb9ade457cf04960a --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\344\274\232\345\212\250\347\232\204\345\244\252\346\236\201\345\233\276.html" @@ -0,0 +1,85 @@ + + + + + + + Document + + + + + +
+ +
+ + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\350\257\276\344\273\266\345\244\252\346\236\201.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\350\257\276\344\273\266\345\244\252\346\236\201.html" new file mode 100644 index 0000000000000000000000000000000000000000..1a8f226383388f877349051a88a165b05c5a7ead --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/03 css\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/\345\244\252\346\236\201\345\233\276/\350\257\276\344\273\266\345\244\252\346\236\201.html" @@ -0,0 +1,57 @@ + + + + + + + Document + + + + + +
+ +
+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/04-\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/04-\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.md" new file mode 100644 index 0000000000000000000000000000000000000000..370f5f0689c8475beeee7138119fd2aa8c602b28 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/04-\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.md" @@ -0,0 +1,351 @@ +# 背景、边框和文本特效 + +## 课前回顾 + +上节课内容：CSS的盒子模型和选择器。 + +```html +

+ span1 + span2 + this is i + span3 + span4 + span5 + span6 + span7 +

+``` + +请将上面结构里面中的span元素中，文本下标为偶数的元素设置背景色为红色。 + +```css +span:nth-of-type(2n) +``` + +## 本节目的 + +1. 掌握CSS3新增的边框属性 +2. 掌握CSS3新增的背景属性 +3. 掌握常用的文本效果属性 + +## 1. 背景 + +| 属性 | 版本 | 描述 | +| --------------------- | ------ | --------------------------------------------------------- | +| background | CSS1/3 | 简写属性。定义元素的背景特性。 | +| background-color | CSS1 | 定义元素使用的背景颜色 | +| background-image | CSS1/3 | 定义元素使用的背景图像 | +| background-repeat | CSS1/3 | 定义元素的背景图片如何填充 | +| background-attachment | CSS1/3 | 定义滚动时，背景图片相对与谁固定 | +| background-position | CSS1/3 | 指定背景图像在元素中出现的位置 | +| background-origin | CSS3 | 指定背景图像计算`background-position`时的参考原点（位置） | +| background-clip | CSS3 | 指定对象的背景向外裁剪的区域 | +| background-size | CSS3 | 定义背景图像的尺寸大小 | + +> 具体属性展示效果，请参考示例。 + +### 1.1 background-color + +给元素背景设置颜色。如果元素盒子设置了边框，则背景颜色会延伸到边框的边沿，但是展示在边框下边。相当于边框覆盖在背景上。 + +### 1.2 background-image + +``` +background-image: url(图像地址) +``` + +![](images/04-bg-image.png) + +如我们的示例中展示，默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。 + +**如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。**请自行修改上面的例子，尝试添加背景颜色后，效果如何。 + +### 1.3 background-repeat + +`background-repeat`属性控制背景平铺。可用的值是： + +- `no-repeat`: 不重复 +- `repeat-x`: 水平重复 +- `repeat-y`: 垂直重复 +- `repeat`: 在两个方向重复 + +### 1.4 background-size + +`background-size` 属性用来调整背景图像的大小。在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 [`background-size`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size)属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。 + +也可以使用关键字： + +- `cover`：浏览器将使图像足够大，让它完全覆盖了盒子区，同时仍旧保持其高宽比。这种情况下天，有些图像可能会跳出盒子外 +- `contain`：浏览器经使图像的大小适用盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。 + +### 1.5 background-position + +`background-position`属性用于设置背景图像显示在其应用的盒子中的位置。它使用的坐标系中，框的左上角是(0, 0)，框沿着水平(x)和垂直(y)轴定位。 + +> **默认的背景位置值是(0, 0)** + +最常见的背景位置值有两个单独的值： 一个水平值后面跟着一个垂直值。 + +```css +.box { + /* 使用top， right这样的关键字*/ + background-position: top center; + /* 使用长度值和百分比 */ + background-position: 20px 10%; + /* 混合使用官架子，长度值和百分比 */ + background-position: top 20px; +} +``` + +还可以使用4-value语法来指定图像到盒子的某些边的距离。 + +下例我们设置将背景从顶部调整20px，从右侧调整10px； + +```css +.box{ + background-position: top 20px right 10px; +} +``` + +### 1.6 background-attachment + +`background-attachment`属性指定背景图像是应该滚动还是固定。 + +它有如下两个值： + +- `scroll`：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。 +- `fixed`：使元素的背景固定在视图窗口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。 + +这个属性我们使用在body元素上的情况比较多。 + +这个属性经常搭配如下属性一起生效： + +```css +body { + background-image: url(tree.png); + background-repeat: no-repeat; + background-position: right top; + background-attachment: fixed; +} +``` + +### 1.7 background + +使用`background`简写。这种简写允许你一次设置所有不同的属性。 + +可以在一次声明中定义一个或多个属性。 + +```css +/* 使用 */ +background: green; + +/* 使用 和 */ +background: url("test.jpg") repeat-y; + +/* 将背景设为一张居中放大的图片 */ +background: no-repeat center/80% url("../img/image.png"); +``` + +简写形式，对于背景的每一个属性可以设置的值需要很了解。对于初学者，不建议使用简写方式。容易写错。 + +## 2. 边框 + +我们之前学习了边框的一些简单设置，现在我们学习CSS3提供的新属性有什么效果。 + +| 属性 | 版本 | 描述 | +| ------------- | ---- | ---------------------------------- | +| border | CSS1 | 简写属性，定义元素边框的外观特性。 | +| border-width | CSS1 | 定义边框粗细。 | +| border-style | CSS1 | 定义边框样式。 | +| border-color | CSS1 | 定义边框的颜色。 | +| border-radius | CSS3 | 定义元素的圆角。 | +| box-shadow | CSS3 | 定义元素的阴影。 | + +上表列出的属性中，CSS1版本的属性，可以简写，直接用border属性来表示。 + +```css +.box { + border: 1px #e1e1e1; + /* 等价与 */ + border-width: 1px; + border-style: solid; + border-color: #e1e1e1; +} +``` + +上列的写法也是我们常用的写法。它为一个框的所有四个边设置边框样式。我们还可以只设置盒子的一个边： + +```css +.box { + border-top: 1px solid black; + /* 等价与 */ + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} +``` + +### 2.1 border-radius + +通过使用`border-radius`属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。只传递一个值时，这两个值都将使用。 + +```css +.box{ + // 盒子的四个角都有10px的圆角半径。 + border-radius: 10px; +} +``` + +`border-radius`也是一个简写的属性，它可以拓展写成： + +```css +border-top-left-radius: 10px; +border-top-right-radius: 10px; +border-bottom-left-radius: 10px; +border-bottom-right-radius: 10px; +``` + +### 2.2 box-shadow + +你几乎可以在任何元素上使用`box-shadow`来添加阴影效果。如果元素同时设置了 `border-radius`属性 ，那么阴影也会有圆角效果。 + +**语法** + +```css +/* x偏移量 | y偏移量 | 阴影颜色 */ +box-shadow: 60px -16px teal; + +/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ +box-shadow: 10px 5px 5px black; + +/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ +box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + +/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */ +box-shadow: inset 5em 1em gold; + +/* 任意数量的阴影，以逗号分隔 */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; +``` + +- 默认阴影在边框外，如果指定`inset`，会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 +- x偏移量，y偏移量。`` 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 `` 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。 +- 第三个数值，表示阴影模糊半径。值越大，模糊面积越大，阴影就越大越淡。不能为负值，默认为0. +- 第四个数值，表示阴影扩散半径。取正值时，阴影扩大；取负值时，阴影收缩。默认为0。 + +## 3. 文本特效 + +### 3.1 字体 + +| 属性 | 版本 | 值 | 描述 | +| ------------ | ------ | -------------------------------------------------------- | -------------------------------- | +| font | CSS1/2 | 多个属性值 | 简写属性，定义元素的文本特性 | +| font-style | CSS1 | normal
italic
oblique | 定义字体的样式 | +| font-variant | CSS1 | normal
small-caps | 定义元素文本是否为小型的大写字母 | +| font-weight | CSS1 | normal
bold
bolder
lighter
100 ~ 900 | 定义元素字体的粗细 | +| font-size | CSS1 | 数值（单位px,em,rem) \| 百分比 | 定义元素字体的大小 | +| font-family | CSS1 | 字体系列名称 | 定义元素字体的字体名称序列 | + +- `font`属性是一个简写属性，可以在一个声明中设置所有字体属性。这个简写属性用于设置元素字体的两个或更多方面。 + + 可以按顺序设置如下属性： + + - font-style + - font-variant + - font-weight + - font-size/line-height + - font-family + + 其中**`font-size`和`font-family`**的值是必需的。如果缺少了其他值，默认值将被插入。 + + ```css + p.ex1 { + font: 15px arial,sans-serif; + } + p.ex2 { + font:italic bold 12px/30px Georgia,serif; + } + ``` + +- `font-style`设置字体样式，可取值： + + - normal：默认值，浏览器显示一个标准的字体样式。 + - italic：显示斜体。 + - oblique：显示倾斜的字体样式。 + +- `font-variant`属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 + + ```css + p{font-variant: small-caps;} + ``` + +- `font-weight`属性设置字体粗细，常用的属性值为：normal和bold。其中数值定义的值中，400 等同于 normal，700等同于bold。不同浏览器对于这些数值的显示支持不一致。不建议使用。 + +- `font-size`设置字体大小，设置对应的值，我们可以有`px`,`em`和`rem`等单位。具体这些单位有什么区别，我们下面内容介绍。 + +- `font-family`属性设置字体。可以设置多个字体系列的名称，网页载入选择字体时候是调用访问者系统文字库的文字字体，如果没有找到字体那将显示默认的网页字体。 + + 代码书写要求： + + - 各个字体之间必须使用英文状态下的逗号隔开 + - 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。 + - 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示 + - 正常开发过程中，我们将字体系列设置到body标签内。 + + 推荐常用字体系列：宋体、黑体、微软雅黑、Arial, Helvetica, sans-serif等字体。 + + 一些大厂网站的使用的字体系列： + + - 小米官网：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; + - 淘宝技术研发中心： font-family: Tahoma,Helvetica,Arial,'宋体',sans-serif; + - 淘宝：font-family：Tahoma,Helvetica,Arial,'宋体',sans-serif; + - 一淘：font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; + +### 3.2 文本 + +| 属性 | 版本 | 描述 | +| -------------- | ------ | ------------------------------------------------------------ | +| text-align | CSS1/3 | 定义元素内容的水平对齐方式 | +| text-indent | CSS1/3 | 定义块内文本内容的缩进 | +| line-height | CSS1 | 定义元素中行框的最小高度 | +| vertical-align | CSS1/2 | 定义行内元素在行框内的垂直对齐方式 | +| white-space | CSS1 | 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。 | +| word-break | CSS3 | 定义元素内容文本的字间与字符间的换行行为 | +| word-wrap | CSS3 | 定义元素内容文本遇到边界时如何换行 | +| word-spacing | CSS1/3 | 指定单词之间的额外间隙 | +| letter-spacing | CSS1/3 | 指定字符之间的额外间隙 | + +#### 3.2.1 text-align + +在CSS1版本中，定义了文本对齐的属性值有：left, center, right; + +CSS3 版本，新增了几个属性： + +| 取值 | 描述 | +| ------- | ------------------------------------------------------------ | +| start | 内容对齐开始边界 | +| end | 内容对齐结束边界 | +| justify | 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。 | + +#### 3.2.2 line-height + +`line-height`属性这是元素中行框的最小高度。可取的值： + +| 取值 | 描述 | +| ---------- | ------------------------------------------------------------ | +| normal | 默认值，允许内容顶开或溢出指定的容器边界。 | +| length | 用长度值制定行高，不允许负值。 | +| percentage | 用百分比指定行高，其百分比基于文本的`font-size`进行换算，不允许负值。 | +| number | 用乘积因子指定行高。不允许负值。 | + +## 作业 + +文本的下列属性，可取值情况具体表现，请同学们自行去w3school或者MDN网站上去查找，然后制作类似课堂例子的demo。 + +- white-space +- word-break +- word-wrap +- word-spacing +- letter-spacing + diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/images/04-bg-image.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/images/04-bg-image.png" new file mode 100644 index 0000000000000000000000000000000000000000..ad42fc38d8672b5e5e9b50efec398c8db2e82f05 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/courseware/images/04-bg-image.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/background.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/background.html" new file mode 100644 index 0000000000000000000000000000000000000000..483a0deedc75eb5a03fe1568e9271c7df0146185 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/background.html" @@ -0,0 +1,112 @@ + + + + + + + Document + + + +

背景颜色：background-color

+
+

尝试将span元素的背景色修改我是span内部的内容

+
+ +
+

背景图片：background-image

+

两个一样大小的盒子，第一个是比盒子大的背景图像，第二个比盒子小的背景图像。

+

默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

+
+
+
+
+
+

控制图像平铺: background-repeat

+

background-repeat属性值，不同值展示不一样的效果

+
+

no-repeat，不重复

+
+

repeat-x，水平重复

+
+

repeat-y，垂直重复

+
+

repeat，两个方向重复

+
+
+

控制图像大小: background-size

+

可选择值有数值大小或百分比，关键字cover, contain。为了展示，我先设置了background-repeat：no-repeat;

+
+

数字大小：backgroud-size: 100px 160px;

+
+

关键字cover：background-size: cover

+
+

关键字contain: background-size: contain

+
+
+
+

控制图像位置：background-position

+
+

background-position: center center;

+
+

background-position: 20px 10%

+
+

background-position: center 20px

+
+

background-position: top 20px right 10px

+
+
+
+

背景附着：background-attachment

+

该属性值有两个值：值为scroll，则当页面滚动时，背景会移动。值为fixed时，背景被固定在可视窗口固定位置。

+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/border.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/border.html" new file mode 100644 index 0000000000000000000000000000000000000000..dc6ea3755b22f846808b7763b0323539d5703a34 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/border.html" @@ -0,0 +1,87 @@ + + + + + + + + Document + + + + +
+

Borders

+

Try changing the borders.

+
+ +
+ +
+ 
+            border: solid 10px;
+            border-radius: 10px 40px 40px 10px;
+
+
+
+
+ 
+            border: solid 10px red;
+            border-radius: 20px;
+
+
+
+

box-shadow效果

+
    +
  • 外阴影常规效果
    box-shadow:5px 5px rgba(0,0,0,.6);
    • +
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);
    • +
  • 外阴影模糊外延效果
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);
    • +
  • 内阴影效果
    box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;
    • +
  • 外阴影模糊效果
    box-shadow:5px 5px 5px rgba(0,0,0,.6);
    • +
+ + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/font.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/font.html" new file mode 100644 index 0000000000000000000000000000000000000000..269f46b0601c29382a3db52b60709e933aa3835c --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/font.html" @@ -0,0 +1,85 @@ + + + + + + + + Document + + + + +

font属性

+ 
+    
+        p.ex1 {
+            /* 设置了大小和字体 */
+            font: 15px arial,sans-serif;
+        }
+        p.ex2 {
+            /* 设置了斜体，加粗，大小/行高 字体 */
+            font:italic bold 12px/30px Georgia,serif;
+        }
+    
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, numquam ab. Molestiae dignissimos + sit porro aliquam natus nemo ut animi eos, repellendus commodi in amet laborum placeat accusantium sapiente + quasi repellat! Quaerat placeat magni eveniet assumenda aut in dolorem doloremque porro excepturi, architecto + repellat repellendus neque beatae tempore quos id.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate vel earum assumenda molestiae + veniam est nostrum nulla commodi? Laborum recusandae possimus obcaecati ipsam ducimus laboriosam perferendis + nostrum debitis tenetur natus iusto optio id iste totam, consequuntur exercitationem. Doloremque, iure? At quia + cumque culpa consectetur quis aliquid provident? Deserunt, laudantium tempora?

+ +
+

font-varient: small-caps;

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tempore dolor, minima blanditiis, debitis aut nesciunt totam, sapiente in possimus sit unde dolore alias eos autem praesentium quis animi expedita?

+ +
+

font-weight

+

font-weight: 100;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 200;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 300;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 400;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 500;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 600;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 700;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 800;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: 900;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: normal;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

font-weight: bold;Lorem ipsum dolor sit amet consectetur adipisicing elit.

+ + + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/balloons.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/balloons.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..7d2e42c55bbde56369634f97be3c5b60ab6fad4d Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/balloons.jpg" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/star.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/star.png" new file mode 100644 index 0000000000000000000000000000000000000000..a0f5da20c9f638ec0e4d22c0d11315b59f980dbd Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/star.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/tree.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/tree.png" new file mode 100644 index 0000000000000000000000000000000000000000..817c4b2a207798e6d684fa6524bc09622127bfe0 Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/images/tree.png" differ diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/text.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/text.html" new file mode 100644 index 0000000000000000000000000000000000000000..2f9a296585abe272e492a1ddc7f268540b9acbf5 --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/example/text.html" @@ -0,0 +1,114 @@ + + + + + + + Document + + + +

text-align

+
    +
  • +

    text-align: left

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
  • +

    text-align: center

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
  • +

    text-align: right

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
  • +

    text-align: start

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
  • +

    text-align: end

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
  • +

    text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。

    +

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.

    +
    • +
+
+

text-indent

+
    +
  • +

    text-indent: 2em;

    +

    出因上变设者了别，谓气在蒲，秦远关力意留可承仃范狱怒弄何张身下要，国洋流将正、故绛统县清张上乐恩请。

    +
    • +
+
+

line-heighth

+
    +
  • +

    固定值方式：{line-height： 20px}

    +

    的畴的大也是洪一德承由夫范留关关，土受定冇在护颜不天娇救榜。真王娇严承历说郭谢烦褒得如家文对妙的李。

    +
    • +
  • +

    百分比方式：{line-height: 130%}

    +

    快人兴服事同斯而也，真王娇严承历说郭谢烦褒得如家文对妙的李。真王娇严承历说郭谢烦褒得如家文对妙的李。

    +
    • +
  • +

    乘积因子方式：{line-height: 2}

    +

    妙一杀人过日无不愚，负非可临色价，人仍属里了，迷学制人，予。真王娇严承历说郭谢烦褒得如家文对妙的李。

    +
    • +
+
+

vertical-align

+
    +
  • +

    与基线对齐：{vertical-align: baseline}

    +

    参考内容基线对齐

    +
    • +
  • +

    与参考内容的下标对齐：{vertical-align: sub}

    +

    参考内容下标对齐

    +
    • +
  • +

    与参考内容的上标对齐：{vertical-align: super}

    +

    参考内容上标对齐

    +
    • +
  • +

    对象的内容与对象顶端对齐：{vertical-align: top}

    +

    参考内容要对齐的内容

    +
    • +
  • +

    对象的文本与对象顶端对齐：{vertical-align: text-top}

    +

    参考内容要对齐的内容

    +
    • +
  • +

    对象的内容与对象中部对齐：{vertical-align: middle}

    +

    参考内容要对齐的内容

    +
    • +
  • +

    对象的内容与对象底端对齐：{vertical-align: bottom}

    +

    参考内容要对齐的内容

    +
    • +
  • +

    对象的文本与对象顶端对齐：{vertical-align: text-bottom}

    +

    参考内容要对齐的内容

    +
    • +
  • +

    与基线算起的偏移量：{vertical-align: 10px}

    +

    参考内容偏移量对齐

    +
    • +
+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/letter-spacing.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/letter-spacing.html" new file mode 100644 index 0000000000000000000000000000000000000000..21b670ae6b070ad49572560eb385aa6879f5c49c --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/letter-spacing.html" @@ -0,0 +1,35 @@ + + + + + + Document + + + +
+ letter-spacing是什么？ +

letter-spacing就是文字与文字间的间距，值可以负数，默认值normal

+ 兼容性: +

所有浏览器都支持 letter-spacing 属性。

+

css文字间距测试文字！

+

css文字间距测试文字！

+
+ + \ No newline at end of file diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/white-space.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/white-space.html" new file mode 100644 index 0000000000000000000000000000000000000000..b9f607aa59113d6ec1ef152a9f95924b95aca2db --- /dev/null +++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/white-space.html" @@ -0,0 +1,49 @@ + + + + + + Document + + + + +

定义和用法 + white-space 属性设置如何处理元素内的空白。 + + 这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。 + + 默认值： normal + 继承性： yes + 版本： CSS1 + JavaScript 语法： object.style.whiteSpace="pre" + 可能的值 + 值 描述 + normal 默认。空白会被浏览器忽略。 + pre 空白会被浏览器保留。其行为方式类似 HTML 中的 

 标签。
+        nowrap   	文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
+        pre-wrap	保留空白符序列，但是正常地进行换行。
+        pre-line	合并空白符序列，但是保留换行符。
+        inherit	    规定应该从父元素继承 white-space 属性的值。

+
+        

+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-break.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-break.html"
new file mode 100644
index 0000000000000000000000000000000000000000..52f805584c24a792572ac5579e067f03cea1f979
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-break.html"	
@@ -0,0 +1,48 @@
+
+
+
+    
+    
+    Document
+    
+
+
+    
定义和用法
+        word-break 属性规定自动换行的处理方法。
+        
+        提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
+        
+        默认值：	normal
+        继承性：	yes
+        版本：	CSS3
+        JavaScript 语法：	object.style.wordBreak="keep-all"
+        
+        
+        语法
+        word-break: normal|break-all|keep-all;
+        
+        
+        值	        描述
+        normal	    使用浏览器默认的换行规则。
+        break-all	允许在单词内换行。
+        keep-all	只能在半角空格或连字符处换行。

+    
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.

+    
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.

+    
+    
注释：目前 Opera 不支持 word-break 属性。
    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-spacing.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-spacing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4d7c376c9c6a84cd679d2b59175e1be1e58d4603
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-spacing.html"	
@@ -0,0 +1,38 @@
+
+
+
+    
+    
+    Document
+    
+
+
+    
word-spacing定义

+        word-spacing 属性增加或减少单词间的空白（即字间隔）。
+        
+       
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
 
+        
+       
 注释：允许使用负值。

+        
+       
 默认值：	normal

+       
继承性：	yes
 
+       
版本：	CSS1
 
+       
JavaScript 语法：	object.style.wordSpacing="10px"

+       
提示和注释
 
+       
注释：CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。
 
+       
提示：利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。

+        可能的值
+        

+        值	描述
+        normal	默认。定义单词间的标准空间。
+        length	定义单词间的固定空间。
+        inherit	规定应该从父元素继承 word-spacing 属性的值。
+        

+
This is some text. This is some text.

+
This is some text. This is some text.

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-wrap.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-wrap.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d3fe8272dde72e9fdad10cd72ce78e511832ee89
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/04 \350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210.\345\216\237\345\206\254\346\242\205/word-wrap.html"	
@@ -0,0 +1,31 @@
+
+
+
+    
+    
+    Document
+    
+
+
+    
定义和用法
+        word-wrap 属性允许长单词或 URL 地址换行到下一行。
+        
+        默认值：	normal
+        继承性：	yes
+        版本：	CSS3
+        JavaScript 语法：	object.style.wordWrap="break-word"
+        语法
+        word-wrap: normal|break-word;
+        值	        描述
+        normal	    只在允许的断字点换行（浏览器保持默认处理）。
+        break-word	在长单词或 URL 地址内部进行换行。

+    
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d373153a0be9651464847ef3ddf5d2f918d38ef1
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/05-\345\200\274\344\270\216\345\215\225\344\275\215.md"	
@@ -0,0 +1,383 @@
+# 值与单位
+
+## 课前回顾
+
+上节课我们学习了背景边框和文字特效。
+
+## 本节目的
+
+1. 了解CSS中的值有哪些
+2. 熟练掌握CSS中单位的使用
+3. 了解CSS的calc函数和var函数，学会使用这些方法。能够熟练掌握CSS变量的使用。
+
+## 1. CSS 中的值
+
+在css中，我们设置的值有：颜色值（十六进制值，rgb值，rgba值，hsl值等）、长度、角度、时间、数字、图像等、
+
+常常我们在数值后面会带上一个单位。
+
+### 1.1 长度
+
+最常见的数字类型是长度。css中有两种类型的长度——相对长度和绝对长度。
+
+#### 1.1.1 绝对长度单位
+
+| 单位 | 名称 | 等价换算            |
+| ---- | ---- | ------------------- |
+| cm   | 厘米 | 1cm = 96px/2.54     |
+| mm   | 毫米 | 1mm = 0.1cm         |
+| in   | 英寸 | 1in = 2.54cm = 96px |
+| pt   | 点   | 1pt = 1/72 * 1in    |
+| px   | 像素 |                     |
+
+上面的大多数单位都是用于打印的，在我们屏幕或者网页上使用的值是px。
+
+#### 1.1.2 相对长度单位
+
+相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。
+
+| 单位 | 相对于                                                       |
+| ---- | ------------------------------------------------------------ |
+| em   | 在font-size中使用是相对于父元素的字体大小，在其他属性中是相对于自身的字体大小，比如width； |
+| rem  | 根元素的字体大小                                             |
+| lh   | 元素的line-height                                            |
+| vw   | 视窗宽度的1%                                                 |
+| vh   | 视窗高度的1%                                                 |
+| vmin | 视窗较小尺寸的1%，如果宽度比较小，则这个值就是相对视窗宽度的1%。 |
+| vmax | 视窗较大尺寸的1%；                                           |
+
+**em 和 rem 的区别**：
+
+em 和 rem 这两个相对单位是我们最常使用的。
+
+- rem是**相对根元素的字体大小**，而em是相对父元素或者自身的字体大小。
+- rem相对更加稳定。因为`font-size`属性是一个继承属性，如果自己没有设置字体大小，这个值则会收到父元素的字体大小的影响。
+
+```html
+
    
+  
  • one
    • 
+  
  • two
    • 
+  
  • three
+  	
      
+      
    • three 1
      • 
+      
    • three 2
+      	
        
+          
      • three 2-1
        • 
+        
      
+      
      • 
+    
    
+  
    • 
+

+
    
+  
  • one
    • 
+  
  • two
    • 
+  
  • three
+  	
      
+      
    • three 1
      • 
+      
    • three 2
+        
        
+          
      • three 2-1
        • 
+        
      
+      
      • 
+    
    
+  
    • 
+

+
+```
+
+### 1.2 百分比
+
+在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，他们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素的字体大小的百分比。如果使用百分比作为宽度值，那么它将是父元素宽度的百分比。
+
+```html
+
+    
我的宽度为200px

+    
我的宽度为40%

+    

+        
我的宽度为200px

+        
我的宽度为40%

+    

+
+```
+
+```css
+.w200{
+    width: 200px;
+}
+.w-p40{
+    width: 40%;
+}
+.wrapper {
+    width: 600px;
+    padding: 15px 0;
+    border-color: #040489;
+}
+```
+
+![](images/05-percent.png)
+
+列表的例子，将li的font-size设置为百分比，每次继承父级的字体大小，层级往下，字体会逐渐变小。
+
+### 1.3 数字
+
+有些值接受数字，不添加任何单位。比如font-weight，100~900的值，是不带单位的。还有就是不透明度属性（opacity），只接受0和1之间的数字。
+
+```css
+.box{opacity: 0.7;}
+```
+
+## 2. 函数
+
+在CSS里面，我们有些属性值是函数，例如：`rgb()`，`url()`等。
+
+接下来我们要介绍一个类似传统编程语言的函数：`calc()`。这个函数可以让我们在CSS中进行简单的计算。
+
+### 2.1 calc() 定义和用法
+
+`calc()`函数用语动态计算长度值。
+
+- 任何长度值都可以使用`calc()`函数进行计算；
+- `calc()`函数支持`+`， `-`, `*`, `/`运算；
+- `calc()`函数使用标准的数学运算优先级规则；
+- 举例`width: calc(100% - 100px)`，**运算符前后都需要保留一个空格。**
+
+**使用场景**
+
+1. 可以很容易为一个对象设置一个左右两边相等的外边距。
+
+   ```css
+   .box {
+       position: absolute;
+       left: 40px;
+       width: calc(100% - 80px);
+       height: 200px;
+       border: 1px solid;
+       box-sizing: border-box;
+   }
+   ```
+
+2. 在页面布局上面，也很好用。
+
+   ![](images/05-calc.png)
+
+### 2.2 var() 使用CSS变量
+
+CSS中原生的变量定义语法是： `--*`，变量使用语法是：`var(--*)`，其中`*`表示我们的变量名称。
+
+```css
+:root{
+	--myColor: #369;
+}
+body {
+    background-color: var(--myColor);
+}
+```
+
+CSS的变量命名规则：
+
+- 可以是数字。
+- 不能包含`$`，`[`, `^`, `(`,`%`等字符， 普通字符局限在只要是“数字`[0-9]`”“字母`[a-zA-Z]`”“下划线`_`”和“短横线`-`”这些组合，但是可以是中文，日文或者韩文等。
+- 变量的定义和使用只能是在css声明块`{}`里面。
+
+```css
+body {
+  --深蓝: #369;
+  background-color: var(--深蓝);
+}
+```
+
+上面代码也是可以生效的。
+
+下面的例子，可以帮助我们更好的理解变量的权重和变量应用规则。
+
+```css
+:root{--color: purple;}
+div {--color: green;}
+#alert{--color: red;}
+*{color: var(--color);}
+```
+
+```html
+
我的紫色继承于根元素

+
我的绿色来自直接设置

+

+  ID选择器权重更高，因此我是红色！
+  
我也是红色，占了继承的光

+

+```
+
+上面这个例子我们了解到：
+
+1. 变量也是跟着CSS选择器走的，如果变量所在的选择器和使用变量的元素没有交集，是没有效果的。例如`#alert`定义的变量，只有`id`为`alert`的元素才能享有。
+2. 当存在多个同样名称的变量时候，变量的覆盖规则则由CSS选择器的权重决定的。
+
+**`var()`方法的使用语法**
+
+```
+var(自定义属性名[, 默认值]);
+```
+
+如果我们使用的变量没有定义，则使用后面的值作为元素的属性值。
+
+```css
+.box {
+    --bgColor: #369;
+}
+body {
+    background-color: var(--bgColor, #cd0000);
+}
+```
+
+**CSS变量不合法的缺省特性**
+
+请看下面的例子：
+
+```css
+body {
+    --color: 20px;
+    background-color: #369;
+    background-color: var(--color, #cd00000);
+}
+```
+
+请问，此时``的背景色是？
+
+```
+A: transparent	B: 20px		C:#369 		D:#cd00000
+```
+
+答案是： A：transparent
+
+对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的内容，也是作为正常的声明解析的。如果发现变量值是不合法的，例如上面背景色显然不能是`20px`，则使用背景色的缺省值，也就是默认值代替。上面的代码等同于：
+
+```css
+body {
+	--color: 20px;
+    background-color: #369;
+    background-color: transparent;
+}
+```
+
+**CSS变量的空格尾随特性**
+
+```css
+body {
+    --size: 20;
+    font-size: var(--size)px;
+}
+```
+
+你认为上面例子里，body的font-size大小是多少？会是`20px`吗？答案是当前的body的font-size使用的是``元素默认的大小。
+
+原因：`font-size: var(--size)px`等同于`font-size: 20 px`，**注意**，`20`后面有个空格。这个就是CSS变量的空格尾随特性，`var()`执行后，会自动跟上一个空格。
+
+上面的例子可以修改，直接将单位在变量中定义：
+
+```css
+body {
+    --size: 20px;
+    font-size: var(--size);
+}
+```
+
+或者使用我们前面学到的`calc()`函数计算：
+
+```css
+body {
+    --size: 20;
+    font-size: calc(var(--size) * 1px);
+}
+```
+
+**CSS变量的相互传递特性**
+
+这个特性是指，我们在CSS变量定义的时候可以直接引入其他变量给自己使用，例如：
+
+```css
+body {
+    --green: #4caf50;
+    --backgroundColor: var(--green);
+}
+```
+
+或者更复杂的使用：
+
+```css
+body {
+    --columns: 4;
+    --margin: calc(24px / var(--columns));
+}
+```
+
+对于复杂布局，CSS变量这个相互传递和直接引用特性可以简化我们的代码和实现成本，尤其和动态布局在一起的时候。
+
+## 作业
+
+1. 对于颜色值，我们有RGB颜色值，RGBA颜色值，HSL颜色值，HSLA颜色值。
+
+   请制作一个属性值介绍页面，对应值的取值范围，请自行学习了解。界面功能如下	
+
+   ![](images/05-homework1.png)
+
+   要求：
+
+   1. 界面应该由4个对应的模块，分别介绍这4个颜色值的参数有哪些。
+   2. 移动滑块时，对应的盒子背景色会响应的变化，显示的文字也会跟着变化。
+
+2. 进阶题，优化上面的例子，背景颜色右深到浅时，文本的颜色由原来的白色编程黑色。
+
+   > 思路：
+   >
+   > 1. 使用css变量方式来实现。
+   >
+   > 2. 字体颜色我们用HSL色值表示，这个值我们可以使用sRGB Luma方法计算灰度（可以看成亮度，HSL色值的L）来获得。
+   >
+   >    **算法：**
+   >
+   >    ```js
+   >    lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
+   >    ```
+   >
+   > 3. 我们将计算得到的lightness看做是亮度，范围0~1，此时，和临界值threshold（我们设置为0.5）做比较：
+   >
+   >    - 大于临界值时，lightness - threshold值为正数，和-999999%相乘，会得到一个巨大负数，浏览器会按照合法边界0%渲染，也就是亮度为0，于是颜色为黑色。
+   >    - 小于临界值时，lightness - threshold值为负数，和-999999%相乘，会得到一个巨大正数，以最大合法值100%渲染，于是颜色为白色。
+   >    
+   >    所以计算字体颜色的**公式**是：
+   >    
+   >    ```css
+   >    {color: hsl(0, 0%, calc((lightness - threshold) * -99999%));}
+   >    ```
+   >    
+   > 4. 原生DOM给元素添加CSS类方法：
+   >
+   >    ```js
+   >    el.style.setProperty('--myVar', 'aa');
+   >    // 获取属性值
+   >    el.style.getPropertyValue('--myVar');
+   >    ```
+   >
+   >    > 1. DOM里面通过`attribute`为元素添加属性，获取属性值等。
+   >    >
+   >    >    ```js
+   >    >    el.getAttribute('name');
+   >    >    el.setAttribute('name', 'value');
+   >    >    ```
+   >    >
+   >    > 2. DOM 里面通过 `property` 为DOM对象添加属性，设置属性值，获取属性值等
+   >    >
+   >    >    ```js
+   >    >    el.setProperty('name', value);
+   >    >    el.getPropertyValue('name');
+   >    >    ```
+   >
+   > 案例参考界面：https://www.zhangxinxu.com/study/201811/switch-font-color-for-different-background.php
+
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md"
new file mode 100644
index 0000000000000000000000000000000000000000..30c74a0da227656edc427e542f8861d3c2500e47
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/06-\346\272\242\345\207\272\347\232\204\345\206\205\345\256\271.md"	
@@ -0,0 +1,42 @@
+# 溢出的内容
+
+## 本节目的
+
+1. 明白溢出的概念，了解CSS溢出的表现。当网页布局错乱时，能够准确判断出是由于什么原因引起的。
+2. overflow属性的属性值表现学习。
+
+## 1. 什么是溢出
+
+溢出是在盒子无法容纳下太多的内容的时候发生的。
+
+CSS中万物皆盒，因此我们可以通过给`width`和`height`赋值的方式来约束盒子的尺寸。溢出就是往盒子里塞太多东西的时候发生的，溢出时，页面上的展示就会出现问题。CSS给我们好几种工具来控制溢出。
+
+![](images/05-overflow1.png)
+
+我们会发现，发生溢出后，CSS不会隐藏我们的内容。这个CSS的一个特点，尽量减少“数据损失”。
+
+我们给盒子设置宽度和高度时，CSS假定你知道自己在做什么，而且你已经控制住了溢出的隐患。
+
+## 2. overflow 属性
+
+`overflow`属性是一个控制元素溢出的方式，它告诉浏览器你想怎样处理溢出。`overflow`的默认值为`visible`，这就是默认情况下，我们可以看到溢出的内容。
+
+**可能的值**：
+
+| 值      | 描述                                                     |
+| ------- | -------------------------------------------------------- |
+| visible | 默认值。内容不会被修剪，会呈现在元素框之外。             |
+| hidden  | 内容会被修剪，并且其余内容是不可见的。                   |
+| scroll  | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
+| auto    | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
+| inherit | 规定应该从父元素继承 overflow 属性的值。                 |
+
+`overflow`是一个简写属性，分拆独立属性语法：
+
+```
+overflow-*: visible | hidden | scroll | auto
+overflow-* = overflow-x, overflow-y
+```
+
+
+
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-calc.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-calc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cab1396d77274c52a2e917a92dfbba6fd5e77558
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-calc.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-homework1.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-homework1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..abb46bb1d1210921dbe561175b04a76ff1e44892
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-homework1.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-overflow1.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-overflow1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..375accf20bff5429889bced7f30885e06019c1d4
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-overflow1.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-percent.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-percent.png"
new file mode 100644
index 0000000000000000000000000000000000000000..567cbc3bc0410e71a495526716ab5e02c1c4b83c
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-percent.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-var.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-var.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6be720e546fa031aad6a6e8fe2a41e684c45199f
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/courseware/images/05-var.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1b3681ed264888e34513b782c6a862c396112b10
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc.html"	
@@ -0,0 +1,25 @@
+
+
+
+
+    
+    
+    
+    Document
+    
+
+
+
+    

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc2.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5e0239fa2d5b4abe0f02fe698d58269b4d0cb149
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/calc2.html"	
@@ -0,0 +1,41 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
+        

+            
熊猫

+            
熊猫主要居住在我国四川地区，喜欢吃竹子。是我国一级保护动物。

+        

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo.js" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo.js"
new file mode 100644
index 0000000000000000000000000000000000000000..ff034973add2401570e3b060e4eee2c09df68065
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo.js"	
@@ -0,0 +1,17 @@
+window.addEventListener('DOMContentLoaded', function() {
+    let lis = document.querySelectorAll('.wrapper li');
+    let box = document.querySelector('.box');
+    for (let i = 0; i < lis.length; i++) {
+        let item = lis[i];
+        item.onclick = function() {
+            let value = this.dataset.value;
+            box.style[this.dataset.prop] = value;
+            let selected = document.querySelector('.current');
+            if (selected) {
+                selected.classList.remove('current');
+            }
+            
+            this.classList.add('current');
+        }
+    }
+})
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo01.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9fed54ead1358a8da7b8b870607eda240cbc2de2
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo01.html"	
@@ -0,0 +1,26 @@
+
+
+
+  
+  
+  
+  Document
+  
+
+
+  

+    
我的宽度设置为200px

+    
我的宽度设置为10vw

+    
我的宽度设置为10em

+  

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo02.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..064f5b1ef5a6c83260c7bcd8fe06c12b3a086779
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/demo02.html"	
@@ -0,0 +1,38 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
+        

+            
熊猫

+            
是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。是我国一级保护动物。

+        

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/em_rem.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/em_rem.html"
new file mode 100644
index 0000000000000000000000000000000000000000..45e375d22190425cd44e0c0a32b346aa032d9b41
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/em_rem.html"	
@@ -0,0 +1,53 @@
+
+
+
+  
+  
+  
+  Document
+  
+
+
+  
    
+    
  • one
    • 
+    
  • two
    • 
+    
  • three
+      
      
+        
    • three 1
      • 
+        
    • three 2
+          
        
+            
      • three 2-1
        • 
+          
      
+        
      • 
+      
    
+    
    • 
+  

+  
    
+    
  • one
    • 
+    
  • two
    • 
+    
  • three
+      
      
+        
    • three 1
      • 
+        
    • three 2
+          
        
+            
      • three 2-1
        • 
+          
      
+        
      • 
+      
    
+    
    • 
+  

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/images/tree.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/images/tree.png"
new file mode 100644
index 0000000000000000000000000000000000000000..817c4b2a207798e6d684fa6524bc09622127bfe0
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/images/tree.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b40e2ccf58d84e9b2f5a729ae916e5f2f69fa0da
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow.html"	
@@ -0,0 +1,22 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    
一个溢出的现象

+    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo consequuntur error tempora quae veniam quis? Exercitationem, tempora? Autem non expedita aliquid quisquam nostrum explicabo velit neque, adipisci, ad soluta laudantium sit quae consectetur ipsa eos harum dolorum iusto quia? Dolorem impedit ab ea dolores placeat debitis natus ut animi exercitationem, alias, delectus vitae quis. Possimus nesciunt non accusantium accusamus.

+    
我是盒子外的内容，我是一个段落. 逃人明自的逃家起陀区衣没当春，鼓定老可洪胸韩李，兼也变叹韩。

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow2.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4506cef35c43eda5fafc735665479f7e06de2539
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/overflow2.html"	
@@ -0,0 +1,49 @@
+
+
+
+    
+    
+    
+    Document
+    
+    
+
+
+    

+        
    
+            
  • overflow: visible;
    • 
+            
  • overflow: hidden;
    • 
+            
  • overflow: scroll;
    • 
+            
  • overflow: auto
    • 
+        

+        

+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam dicta illo nisi maiores quis distinctio exercitationem placeat ratione possimus accusamus accusantium provident quaerat at libero et, velit cum fugiat cupiditate minus quibusdam aliquid impedit. Modi exercitationem deserunt ullam aut earum? Mollitia vel eos nobis amet vero facere laboriosam maxime itaque? Totam, eius unde aut neque voluptates ad ullam dolores dolor quam doloremque perspiciatis maxime voluptatibus reiciendis consequuntur vero dolorem quae, est earum cum deserunt dignissimos officiis. Impedit, quidem dolore, culpa id vitae atque magnam tempora suscipit nostrum aut blanditiis nesciunt aperiam error voluptatem repellat cupiditate consectetur natus, quibusdam molestiae aspernatur.
+        

+    

+ 
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/percent.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/percent.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4fed02b20885b73cb47167f5d88e2df9dc636b54
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/percent.html"	
@@ -0,0 +1,35 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    
我的宽度为200px

+    
我的宽度为40%

+    

+        
我的宽度为200px

+        
我的宽度为40%

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/var.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/var.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f058e81e9304798fce9c518686ad83f54c16572a
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/example/var.html"	
@@ -0,0 +1,23 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    
我的紫色继承于根元素

+    
我的绿色来自直接设置

+    

+        ID选择器权重更高，因此我是红色！
+        
我也是红色，占了继承的光

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/\345\200\274\344\270\216\345\215\225\344\275\215\344\275\234\344\270\232.\345\216\237\345\206\254\346\242\205/img" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/\345\200\274\344\270\216\345\215\225\344\275\215\344\275\234\344\270\232.\345\216\237\345\206\254\346\242\205/img"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/\345\200\274\344\270\216\345\215\225\344\275\215\344\275\234\344\270\232.\345\216\237\345\206\254\346\242\205/\350\211\262\345\200\274.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/\345\200\274\344\270\216\345\215\225\344\275\215\344\275\234\344\270\232.\345\216\237\345\206\254\346\242\205/\350\211\262\345\200\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0fadaf9ce44eeda8d34d0bb7dec9be3362f688f3
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/05 \345\200\274\344\270\216\345\215\225\344\275\215 \346\272\242\345\207\272\347\232\204\345\206\205\345\256\271/\345\200\274\344\270\216\345\215\225\344\275\215\344\275\234\344\270\232.\345\216\237\345\206\254\346\242\205/\350\211\262\345\200\274.html"	
@@ -0,0 +1,37 @@
+
+
+
+    
+    
+    Document
+    
+
+
+   

+    
+    
拖动滑块，改变RGB变量

+    
R:       G:       B:

+   
 
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/07-\345\270\203\345\261\200.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/07-\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f0c32eb7798a072e2ac1e5a9ef5131bf4664f23e
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/07-\345\270\203\345\261\200.md"	
@@ -0,0 +1,354 @@
+# 布局
+
+## 课前回顾
+
+上次课我们学习了值和单位，CSS变量，CSS的函数。
+
+## 本节目的
+
+1. 了解处理页面布局的技术有哪些
+2. 了解不同布局情况的特点。
+
+## 1. CSS布局简介
+
+CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口的位置。
+
+常用的页面布局技术如下：
+
+- 正常布局流
+- `display`属性
+- 弹性盒子（flex）
+- 网格（grid）
+- 浮动（float）
+- 定位（position）
+- CSS 表格布局
+- 多列布局
+
+每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。
+
+## 2. 正常布局流（Normal flow）
+
+正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。
+
+正常布局流中，块元素和行内元素依据各自特点在网页上展示。
+
+如果正常布局流可以满足你对页面布局要求，即不需要用CSS再额外处理布局。一个结构良好的HTML文档是非常重要的。
+
+## 3. display 属性
+
+在css中实现页面布局的主要方法是设定`display`属性的值。此属性允许我们更改默认的显示方式。
+
+**可能的值**
+
+| 值             | 版本 | 描述                                                         |
+| -------------- | ---- | ------------------------------------------------------------ |
+| none           | CSS1 | 隐藏对象。                                                   |
+| inline         | CSS1 | 将元素设置为行内元素。                                       |
+| block          | CSS1 | 将元素设置为块元素。                                         |
+| inline-block   | CSS2 | 将元素设置为行内块元素。（既有行内元素特点，也有块元素特点） |
+| table          | CSS2 | 将元素设置为块元素级的表格。类同于html标签``.         |
+| inline-table   | CSS2 | 将元素设置为行内元素级的表格。                               |
+| table-cell     | CSS2 | 将元素设置为表格单元格。同``。                               |
+| table-column   | CSS2 | 将元素设置为表格列。同``。                              |
+| box            | CSS3 | 将元素作为弹性伸缩盒显示。（伸缩盒的最老版本，现在基本不用） |
+| inline-box     | CSS3 | 将元素作为行内块级弹性伸缩盒子显示。（伸缩盒的最老版本，现在基本不用） |
+| flexbox        | CSS3 | 将元素作为弹性伸缩盒子显示。（伸缩盒的过渡版本，现在大部分部分浏览器不支持） |
+| inline-flexbox | CSS3 | 将元素作为行内块级弹性伸缩盒子显示。（伸缩盒的过渡版本，现在不用）。 |
+| flex           | CSS3 | 将元素作为弹性伸缩盒显示。（伸缩盒最新版本）                 |
+| inline-flex    | CSS3 | 将元素作为行内块级弹性伸缩盒显示。（最新版本）。             |
+| grid           | CSS3 | 将元素变为一个网格容器，它的子元素将成为网格元素。           |
+| inline-grid    | CSS3 | 将元素变为一个网格容器，它的子元素将成为网格元素。           |
+
+对于页面布局而言，最重要的两个值是 **`flex`**和 **`grid`**。
+
+## 4. 浮动 float
+
+ 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。允许文本和内联元素环绕它 。
+
+ 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 
+
+**语法**
+
+```
+float: none | left | right;
+```
+
+> float是JS的一个保留字，所以我们如果想要将float当作DOM对象的属性处理时，需要拼写为`cssFloat`.
+>
+> ```js
+> // 错误写法
+> el.style.float = 'left'; 
+> // 正确写法
+> el.style.cssFloat = 'left'; 
+> ```
+
+元素添加浮动后（float的值不是none的情况），我们可以将改元素看作是一个带有方位的`display: inline-block`的盒子。
+
+### 4.1 浮动的破坏性
+
+当元素设置为浮动后，它会影响它周边的元素。
+
+1. 首先影响它后面的元素的排列。
+2. 如果一个父元素，内部的元素都浮动了，则父元素的高度无法被子元素撑开，即高度为0；这就是我们说的高度塌陷的一种情况。
+
+### 4.2 清除浮动
+
+清楚浮动的目的就是解决高度塌陷的问题。
+
+**方法一：**使用`clear`属性。
+
+`clear`属性可以取三个值：
+
+- `left`：停止任何活动的左浮动
+- `right`： 停止任何活动的右浮动 
+- `both`：停止任何活动的左右浮动
+
+ 通常我们只想设定一个 `clear: both` 停止浮动。 
+
+ 就是直接一个`  
  `放到当作最后一个子标签放到父标签那儿 。这个方法兼容性强，使用方便。
+
+不过这个方法有个问题，在页面上多了一个没有意义的标签，且这个标签只能使用一次。不推荐使用。
+
+**方法二：**使用overflow方法
+
+```css
+.fix{overflow: hidden;}
+```
+
+这个方法有点在于代码简洁，兼容性好。
+
+缺点是：`overflow: hidden`不能和position配合使用，设定定位后，超出的尺寸会被隐藏。
+
+**方法三：**after方法
+
+在父元素上添加一个伪元素`after`，在这个为元素中，设置`clear: both`。
+
+```css
+.parent::after{
+    display: block;
+    content: '';
+    clear: both;
+}
+```
+
+**注意：请尽量不要用浮动来做布局。如果想要两个块元素放同一行展示，我们可以将这些块元素设置为`display: inline-block`。浮动被设计出来的初衷是为了让问题围绕图片展示。**
+
+## 5. 定位
+
+`position`属性用来指定一个元素在网页上的位置，一共有5中定位方式。
+
+| 属性值   | 版本 | 描述                                                         |
+| -------- | ---- | ------------------------------------------------------------ |
+| static   | CSS2 | 默认值，静态定位。                                           |
+| relative | CSS2 | 相对定位。定位基点是元素的默认位置。                         |
+| fixed    | CSS2 | 固定定位。定位的基点是浏览器窗口。                           |
+| absolute | CSS2 | 绝对定位。定位的基点是父元素。                               |
+| sticky   | CSS3 | 粘性定位。像是`relative`和`fixed`的结合。（2017年浏览器才支持的） |
+
+### 5.1 static 属性值
+
+`static`是`position`属性的默认值。如果省略`position`属性，浏览器就认为该元素是`static`定位。
+
+这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
+
+**注意：**`static`定位所导致的元素位置，是浏览器自主决定的，所以这时`top`、`bottom`、`left`、`right`这四个属性无效。
+
+### 5.2 relative 属性值
+
+`relative`表示，相对于默认位置（即`static`时的位置）进行偏移，即定位基点是元素的默认位置。
+
+它必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用，用来指定偏移的方向和距离。
+
+![](images/07-relative.jpg)
+
+```css
+div {
+  position: relative;
+  top: 20px;
+}
+```
+
+### 5.3 absolute 属性值
+
+`absolute`表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
+
+它有一个重要的限制条件：定位基点（一般是父元素）不能是`static`定位，否则定位基点就会变成整个网页的根元素`html`。
+
+通常我们搭配父元素设置`position: relative`定位。
+
+元素设置`absolute`定位后，会脱离正常文本流，该元素所占空间为0，周边元素不受影响。
+
+```css
+.parent {
+  position: relative;
+}
+.son {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+```
+
+### 5.4 fixed 属性值
+
+`fixed`表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
+
+它如果搭配`top`、`bottom`、`left`、`right`这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
+
+### 5.5 sticky 属性值
+
+`sticky`跟前面四个属性值都不一样，它会产生动态效果，很像`relative`和`fixed`的结合：一些时候是`relative`定位（定位基点是自身默认位置），另一些时候自动变成`fixed`定位（定位基点是视口）。
+
+因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（`relative`定位）。
+
+![](images/07-sticky01.png)
+
+页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（`fixed`定位）。
+
+![](images/07-sticky02.png)
+
+等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
+
+`sticky`生效的前提是，必须搭配`top`、`bottom`、`left`、`right`这四个属性一起使用，不能省略，否则等同于`relative`定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作`sticky`的生效门槛。
+
+它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与`sticky`元素的距离达到生效门槛，`relative`定位自动切换为`fixed`定位；等到父元素完全脱离视口时（即完全不可见），`fixed`定位自动切换回`relative`定位。
+
+```css
+.toolbar{
+  position: sticky;
+  top: 20px;
+}
+```
+
+上面代码中，页面向下滚动时，`.toolbar`的元素开始脱离父元素开始脱离视口，一旦视口的顶部与`.toolbar`的距离小于`20px`（门槛值），`toolbar`就自动变为`fixed`定位，保持与视口顶部`20px`的距离。
+
+### 5.6 sticky 的应用
+
+#### 5.6.1 堆叠效果
+
+堆叠效果指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子。
+
+```html
+

+

+

+

+

+```
+
+```css
+div {
+  position: sticky;
+  top: 0;
+}
+```
+
+#### 5.6.2 表格的表头锁定
+
+大型表格滚动的时候，表头始终固定，也可以使用`sticky`实现。
+
+```css
+th {
+  position: sticky;
+  top: 0;
+}
+```
+
+需要注意的是，`sticky`必须设在``和``元素，因为这两个元素没有`relative`定位，也就无法产生`sticky`效果。
+
+## 6. 多列布局
+
+CSS多列布局是一种定义多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分割线（column rules）。
+
+| 属性              | 版本 | 描述                                       |
+| :---------------- | :--: | :----------------------------------------- |
+| columns           | CSS3 | 设置或检索对象的列数和每列的宽度。复合属性 |
+| column-width      | CSS3 | 设置或检索对象每列的宽度                   |
+| column-count      | CSS3 | 设置或检索对象的列数                       |
+| column-gap        | CSS3 | 设置或检索对象的列与列之间的间隙           |
+| column-rule       | CSS3 | 设置或检索对象的列与列之间的边框。复合属性 |
+| column-rule-width | CSS3 | 设置或检索对象的列与列之间的边框厚度。     |
+| column-rule-style | CSS3 | 设置或检索对象的列与列之间的边框样式。     |
+| column-rule-color | CSS3 | 设置或检索对象的列与列之间的边框颜色。     |
+| column-span       | CSS3 | 设置或检索对象元素是否横跨所有列。         |
+| column-fill       | CSS3 | 设置或检索对象所有列的高度是否统一。       |
+| break-before      | CSS3 | 设置或检索对象之前是否断行。               |
+| break-after       | CSS3 | 设置或检索对象之后是否断行。               |
+| break-inside      | CSS3 | 设置或检索对象内部是否断行。               |
+
+我们举一个简单实例，一个带有类`container`的盒子，里面是一些标题和一些段落。这个`.container`盒子将成为我们多列展示的容器。
+
+### 6.1 column-count
+
+```css
+.container {
+  column-count: 3;
+}
+```
+
+```html
+

+  
简单的多列例子

+  
...

+  
...

+

+```
+
+![](images/07-mulcol.png)
+
+### 6.2 column-width
+
+```css
+.container {
+  column-width: 200px;
+}
+```
+
+这样子设置后，浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。
+
+### 6.3 给多列增加样式
+
+多列属性创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。你有两个机会改变列的样式：
+
+- 使用`column-gap`改变列间间隙。
+- 使用`column-rule`在列间加入一条分割线。
+
+```css
+.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+```
+
+`column-gap`属性接受任何长度单位。
+
+`column-rule`与`border`类似是`column-rule-width`, `column-rule-color`和`column-rule-style`的缩写，接受同border一样的值。
+
+```css
+.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted red;
+}
+```
+
+值得一提的是这条分割线本身并不占用宽度。它置于用 `column-gap` 创建的间隙内。如果需要更多空间，你需要增加 `column-gap` 的值。
+
+### 6.4 列与内容折断
+
+多列布局的内容被拆成碎块。 当你把内容放入多列布局容器内，内容被拆成碎块放进列中。
+
+有时，这种折断内容会降低阅读体验。
+
+![](images/07-multicol2.png)
+
+我们可以通过给每个内容块设置`break-inside`属性，并将值设置为`avoid`。表明我们不想拆分里面的内容。
+
+```css
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid; /* 这个是旧属性，兼容性更好 */
+}
+```
+
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-mulcol.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-mulcol.png"
new file mode 100644
index 0000000000000000000000000000000000000000..27c8889142374d29f47a1b0adb4977f8a4e3c8e6
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-mulcol.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-multicol2.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-multicol2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..15b4eba7a26a2785e0e2ee0c97ac5b6fccfe09d0
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-multicol2.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-relative.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-relative.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..50b7a7ef1a60749b4a8e6967ede900e0111f9459
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-relative.jpg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky01.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d67a362a189053616aa975ea81fd8c8164b09291
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky01.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky02.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky02.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f00da9c36a736bcf8186018cfa150050a67ec846
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/courseware/images/07-sticky02.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo.js" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo.js"
new file mode 100644
index 0000000000000000000000000000000000000000..ff034973add2401570e3b060e4eee2c09df68065
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo.js"	
@@ -0,0 +1,17 @@
+window.addEventListener('DOMContentLoaded', function() {
+    let lis = document.querySelectorAll('.wrapper li');
+    let box = document.querySelector('.box');
+    for (let i = 0; i < lis.length; i++) {
+        let item = lis[i];
+        item.onclick = function() {
+            let value = this.dataset.value;
+            box.style[this.dataset.prop] = value;
+            let selected = document.querySelector('.current');
+            if (selected) {
+                selected.classList.remove('current');
+            }
+            
+            this.classList.add('current');
+        }
+    }
+})
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo01.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..263977abb58ddedf2913c1b66b04552fd64370de
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/demo01.html"	
@@ -0,0 +1,24 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
我是第一个孩子

+        
我是第二个孩子

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float.html"
new file mode 100644
index 0000000000000000000000000000000000000000..afebe1bebab3c90e6d860bb1f24ee5622e4c3c30
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float.html"	
@@ -0,0 +1,53 @@
+
+
+
+    
+    
+    
+    Document
+    
+    
+
+
+    

+        
    
+            
  • float: none;
    • 
+            
  • float: left;
    • 
+            
  • float: right;
    • 
+        

+        

+            
Float me

+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam dicta illo nisi maiores quis distinctio exercitationem placeat ratione possimus accusamus accusantium provident quaerat at libero et, velit cum fugiat cupiditate minus quibusdam aliquid impedit. Modi exercitationem deserunt ullam aut earum? Mollitia vel eos nobis amet vero facere laboriosam maxime itaque? Totam, eius unde aut neque voluptates ad ullam dolores dolor quam doloremque perspiciatis maxime voluptatibus reiciendis consequuntur vero dolorem quae, est earum cum deserunt dignissimos officiis.
+        

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float2.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c511bbc8ea101e02739911493dc6608e43c59bd8
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/float2.html"	
@@ -0,0 +1,35 @@
+
+
+
+    
+    
+    
+    float的破坏性
+    
+
+
+    

+        
我是第一个浮动盒子

+        
我是第二个浮动盒子

+        
我是第三个浮动盒子

+    

+    
我是兄弟盒子

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8eccbbf156e1f45014c44861eb23c248fadcbba2
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol.html"	
@@ -0,0 +1,24 @@
+
+
+
+  
+  
+  
+  Document
+  
+
+
+  

+    
简单的多列例子

+    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aperiam recusandae odit corporis ullam ratione sunt culpa! Fugit, deserunt doloribus. Fugit, nulla numquam! Distinctio nostrum dolor eos voluptatibus! Nesciunt accusamus nihil sit! Voluptatem doloremque temporibus ea. Expedita, debitis dicta? Consequuntur.

+    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis nostrum et eaque corrupti aliquam laudantium dolor voluptatem dolorem, ab alias officiis quidem saepe quis quam at aliquid ipsum omnis voluptates nam ad sapiente voluptate repudiandae. Autem placeat dolores minus soluta!

+  

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol2.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1e9055b639a28cdb486ff4397c7739d4668c877d
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/multicol2.html"	
@@ -0,0 +1,78 @@
+
+
+
+
+  
+  
+  
+  Document
+  
+
+
+
+  

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+    

+      
我是卡片标题

+      
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+        vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+        ultricies
+        tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+        vel, viverra egestas ligula.

+    

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/position.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/position.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c87994a2d7b2837aa190043618eebe538ecf3961
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/position.html"	
@@ -0,0 +1,24 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+
+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky.html"
new file mode 100644
index 0000000000000000000000000000000000000000..bc9c5cc9dd37c8f523972146007fa0d7378ced00
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky.html"	
@@ -0,0 +1,31 @@
+
+
+
+  
+  
+  
+  Document
+  
+
+
+  

+  
我是粘性布局元素

+  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut repellat architecto cum provident corporis vitae aspernatur! Esse quis debitis omnis exercitationem! Doloribus iure molestias accusantium veniam dolorum consectetur error ipsa, nemo sint vitae ad expedita ipsam id. Consectetur harum facere enim accusantium vero repellat, temporibus sit laborum esse, nisi sunt.

+  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore tenetur sapiente laudantium, ab molestias eum! Adipisci consequuntur cupiditate ullam quam, atque aspernatur reiciendis quod soluta error qui ab nobis, illo, autem molestias? Blanditiis quam suscipit accusantium aperiam, alias officiis, sapiente ex dolores ab esse officia consequuntur, natus tenetur quis accusamus.

+  
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis cum tempore aperiam accusantium tenetur quisquam ab ratione obcaecati perferendis, nulla dolorem dignissimos expedita blanditiis aut cupiditate, saepe officia quod officiis, amet optio fuga inventore adipisci. Exercitationem aliquid iure ad, qui facere placeat sed, repellat quisquam blanditiis facilis atque, debitis soluta!

+  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fugit laboriosam animi nam quia, voluptate optio voluptates, sed neque necessitatibus nesciunt. Dolore accusamus eum, nihil voluptatibus sit temporibus, quia repudiandae eaque nobis voluptate corporis soluta nisi inventore quas dicta? Perspiciatis quas nemo velit tenetur quis, animi sit. Vel, quo molestias.

+  
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi incidunt nobis totam omnis explicabo accusamus nisi nostrum pariatur quidem similique molestiae autem repellat cumque dolore, tenetur laborum exercitationem maxime ut id harum consequuntur quia. Nisi quo delectus corporis ratione, dignissimos asperiores aliquid exercitationem maxime eaque consectetur? Vero aperiam reiciendis minima.√

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky2.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f966643ae61646ff1fcb19e94fb0d018fc85bea4
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky2.html"	
@@ -0,0 +1,22 @@
+
+
+
+  
+  
+  
+  Document
+  
+
+
+  

+  

+  

+  

+  

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky3.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..73ead275aab23e0b0f23ffaf3e3c55bbc4c22140
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/06 \345\270\203\345\261\200/example/sticky3.html"	
@@ -0,0 +1,193 @@
+
+
+
+
+  
+  
+  
+  Document
+  
+
+
+
+  
`。                           |
+| table-row      | CSS2 | 将元素设置为表格行。同`
`元素上面，不能设在`

+    
+      
+    
+    
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+  
姓名喜欢的颜色
小明蓝色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色
小红紫色
小花红色

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/08-\345\274\271\346\200\247\347\233\222\345\255\220.md" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/08-\345\274\271\346\200\247\347\233\222\345\255\220.md"
new file mode 100644
index 0000000000000000000000000000000000000000..037ed1339f616161575697bf17b8f64f75266fa4
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/08-\345\274\271\346\200\247\347\233\222\345\255\220.md"	
@@ -0,0 +1,287 @@
+# CSS 弹性盒子
+
+## 课前回顾
+
+上节课我们学习了一些常用的布局方式。float，position，多列布局等。
+
+## 本节目的
+
+1. 熟悉了解弹性布局有哪些属性，这些属性有哪些表现效果
+
+## 1. Flex 布局
+
+`Flex`是`Flexible Box`的缩写，意为“弹性布局”。
+
+```css
+.box {
+    display: flex;
+}
+.box2 {
+    display: inline-flex;
+}
+```
+
+`flex`和`inline-flex`的区别：
+
+- `flex`设置在元素上，元素会变成块元素的特性。它的子元素会变成行内块的特性。
+- `inline-flex`设置在元素上，元素会变成行内块元素的属性，它的子元素也是行内块元素的特显。
+
+采用 Flex 布局的元素，称为 Flex 容器，简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（Flex item），简称子项。
+
+### 1.1 容器
+
+![](images/08-flex-01.png)
+
+容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
+
+项目默认沿主轴排列，单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
+
+## 2. Flex 属性
+
+Flex 布局相关的属性分为两部分，一部分作用在flex 容器上，还有一部分作用在flex子项上。
+
+| 作用在flex容器上 | 作用在flex子项上 |
+| ---------------- | ---------------- |
+| flex-direction   | order            |
+| flex-wrap        | flex-grow        |
+| flex-flow        | flex-shrink      |
+| justify-content  | flex-basis       |
+| align-items      | flex             |
+| align-content    | align-self       |
+
+无论作用在flex容器上，还是作用在flex 项目上，都是控制flex子项的呈现。只是前者是控制的是整体，后者控制的是个体。
+
+## 3. 容器的属性
+
+### 3.1 flex-direction
+
+`flex-direction`属性决定主轴的方法，用来控制子项的整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
+
+**语法：**
+
+```css
+flex-direction: row | row-reverse | column | column-reverse;
+```
+
+**值:**
+
+- **row**：默认值，子项水平方向从左往右排列。如果当前水平文档流方法是`rtl`（设置`direction: rtl`），则从右往左。
+- **row-reverse**：子项水平排列，方向与`row`属性值相反。
+- **column**：纵向排列，每个元素独占一行。从上往下排列。
+- **column-reverse**：纵向排列，方向与`column`属性值相反。
+
+### 3.2 flex-wrap
+
+`flex-wrap`用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反向显示。
+
+**语法：**
+
+```css
+flex-wrap: nowrap | wrap | wrap-reverse;
+```
+
+**值：**
+
+- **nowrap**： 默认值，表示单行显示，不换行。
+
+  ![](images/08-flex-wrap-1.png)
+
+- **wrap**：宽度不足时，换行显示。
+
+  ![](images/08-flex-wrap-02.jpg)
+
+- **wrap-reverse**：宽度不足时，换行显示。但是是从下往上开始，原本换行在下面的子项仙子啊跑到上面。
+
+  ![](images/08-flex-wrap-03.jpg)
+
+### 3.3 flex-flow
+
+`flex-flow`属性是`flex-direction`和`flex-wrap`的缩写，表示flex布局的flow流动特性，语法如下：
+
+```css
+flex-flow: <'flex-direction'> || <'flex-wrap'>
+```
+
+当多属性同时使用的时候，使用空格分隔。
+
+```css
+.container {
+    display: flex;
+    flex-flow: row-reverse wrap-reverse;
+}
+```
+
+### 3.4 justify-content
+
+`justify-content`属性决定了水平方向子项的对齐和分布方式。CSS 的`text-align`有个属性值为`justify`，可实现两端对齐。所以，当我们想要控制flex元素的水平对齐方式的时候，记住`justify`这个单词，`justify-content`属性也就记住了。
+
+**语法**
+
+```css
+justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
+```
+
+**值**：具体对齐方式与轴的方向有关，下面假设主轴为从左到右。
+
+- **flex-start**：左对齐
+- **flex-end**：右对齐
+- **center**：居中
+- **space-between**: 两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。。
+- **space-around**：每个项目两侧的间隔相等。around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
+- **space-evenly**：evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
+
+### 3.5 align-items
+
+`align-items`中的`items`指的就是flex子项们，`align-items`属性定义项目在交叉轴上如何对齐。默认情况下，我们的交叉轴指的是纵轴。因此`align-items`指的就是flex子项们相对于flex容器在垂直方向上的对齐方式，大家是一起顶部对齐呢，底部对齐呢，还是拉伸对齐呢，类似这样。
+
+**语法**
+
+```css
+align-items: stretch | flex-start | flex-end | center | baseline;
+```
+
+**值**
+
+- **stretch**： 默认值。flex子项拉伸。如果flex子项设置了高度，则按照设置的高度值渲染，而非拉伸。如果没有设置高度，则子项会拉伸高度和容器高度一致。
+- **flex-start**：交叉轴的起点对齐。
+- **flex-end**：交叉轴的终点对齐。
+- **center**：交叉轴的中点对齐。
+- **baseline**：项目的第一行文字的基线对齐。
+
+### 3.6 align-content
+
+`align-content`可以看成和`justify-content`是相似且对立的属性，`justify-content`指明水平方向flex子项的对齐和分布方式，而`align-content`则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行，则`align-content`属性是没有任何效果的。
+
+**语法**
+
+```css
+align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
+```
+
+**值**
+
+- **stretch**：默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
+- **flex-start**：与文档流方向相关。默认表现为顶部堆砌。
+- **flex-end**：与文档流方向相关。默认表现为底部堆放。
+- **center**：表现为整体垂直居中对齐。
+- **space-between**：表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
+- **space-around**：每一行元素上下都享有独立不重叠的空白空间。
+- **space-evenly**：每一行元素都完全上下等分。
+
+## 4. Flex 子项上的属性
+
+### 4.1 order
+
+我们可以通过设置`order`改变某一个flex子项的排序位置。
+
+**语法：**
+
+```css
+order: ; /* 整数值，默认值是 0 */
+```
+
+所有flex子项的默认`order`属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如`-1`就可以了。
+
+### 4.2 flex-grow
+
+`flex-grow`属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
+
+**语法**
+
+```css
+flex-grow: ; /* 数值，可以是小数，默认值是 0 */
+```
+
+`flex-grow`不支持负值，默认值是0，表示不占用剩余的空白间隙扩展自己的宽度。如果`flex-grow`大于0，则flex容器剩余空间的分配就会发生，具体规则如下：
+
+- 所有剩余空间总量是1。
+- 如果只有一个flex子项设置了`flex-grow`属性值：
+  - 如果`flex-grow`值小于1，则扩展的空间就总剩余空间和这个比例的计算值。
+  - 如果`flex-grow`值大于1，则独享所有剩余空间。
+- 如果有多个flex设置了`flex-grow`属性值：
+  - 如果`flex-grow`值总和小于1，则每个子项扩展的空间就总剩余空间和当前元素设置的`flex-grow`比例的计算值。
+  - 如果`flex-grow`值总和大于1，则所有剩余空间被利用，分配比例就是`flex-grow`属性值的比例。例如所有的flex子项都设置`flex-grow:1`，则表示剩余空白间隙大家等分，如果设置的`flex-grow`比例是1:2:1，则中间的flex子项占据一半的空白间隙，剩下的前后两个元素等分。
+
+### 4.3 flex-shrink
+
+shrink是“收缩”的意思，`flex-shrink`主要处理当flex容器空间不足时候，单个元素的收缩比例。
+
+**语法**
+
+```css
+flex-shrink: ; /* 数值，默认值是 1 */
+```
+
+`flex-shrink`不支持负值，默认值是1，也就是默认所有的flex子项都会收缩。如果设置为0，则表示不收缩，保持原始的`fit-content`宽度。
+
+`flex-shrink`的内核跟`flex-grow`很神似，`flex-grow`是空间足够时候如何利用空间，`flex-shrink`则是空间不足时候如何收缩腾出空间。
+
+两者的规则也是类似。已知flex子项不换行，且容器空间不足，不足的空间就是“完全收缩的尺寸”：
+
+- 如果只有一个flex子项设置了`flex-shrink`：
+  - `flex-shrink`值小于1，则收缩的尺寸不完全，会有一部分内容溢出flex容器。
+  - `flex-shrink`值大于等于1，则收缩完全，正好填满flex容器。
+- 如果多个flex子项设置了`flex-shrink`：
+  - `flex-shrink`值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的`flex-shrink`的值。
+  - `flex-shrink`值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和`flex-shrink`值的比例一样。下面案例演示的就是此场景。
+
+### 4.4 flex-basis
+
+`flex-basis`定义了在分配剩余空间之前元素的默认大小。
+
+**语法**
+
+```css
+flex-basis:  | auto; /* 默认值是 auto */
+```
+
+默认值是`auto`，就是自动。有设置`width`则占据空间就是`width`，没有设置就按内容宽度来。
+
+如果同时设置`width`和`flex-basis`，就渲染表现来看，会忽略`width`。
+
+当剩余空间不足的时候，flex子项的实际宽度并通常不是设置的`flex-basis`尺寸，因为flex布局剩余空间不足的时候默认会收缩。
+
+### 4.5 flex
+
+`flex`属性是`flex-grow`，`flex-shrink`和`flex-basis`的缩写。
+
+**语法**：
+
+```css
+flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
+```
+
+其中第2和第3个参数（`flex-shrink`和`flex-basis`）是可选的。默认值为`0 1 auto`。
+
+- 默认值：`flex: 0 1 auto;` 不扩展，会缩小，无默认宽度。
+- `flex: none`等同于`flex: 0 0 auto;` 不扩展，不缩小，无默认宽度。
+- `flex: auto`等同于`flex: 1 1 auto; 会扩展，会缩小，无默认宽度。`
+
+### 4.6 align-self
+
+`align-self`指控制单独某一个flex子项的垂直对齐方式。写在flex容器上的`align-items`属性，控制的是全体子项，而这里的`self`控制的是自己。其他区别不大，语法几乎一样：
+
+```css
+align-self: auto | flex-start | flex-end | center | baseline | stretch;
+```
+
+唯一区别就是`align-self`多了个`auto`（默认值），表示继承自flex容器的`align-items`属性值。其他属性值含义一模一样。
+
+## 5. Flex的其他知识点
+
+- 在Flex布局中，flex子元素的设置`float`，`clear`以及`vertical-align`属性都是没有用的。
+- Flexbox布局最适合应用程序的组件和小规模布局（一维布局），而Grid布局则适用于更大规模的布局（二维布局）。
+
+## 作业
+
+1. 绘制下面的图片：
+
+![](images/08-homework.jpg)
+
+2. 我们的课件里面介绍的属性是`display: flex`的例子。请同学们参考下列链接，制作一个属性选择效果页面。将`display: inline-flex`，`flex-direction: column`等属性值情况下的表现一起通过例子表现出来。
+
+   [Flexbox属性效果](https://changk99.github.io/flexbox/)
+
+   ![](images/08-homework-02.png)
+
+   只需要制作这样一块内容的效果即可。样式可以自行优化。
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-01.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..9f9866c4aefbe72182846ed653f1380a9c485396
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-01.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-02.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f17f94cc3bd82ac2956e26964a0fe3d90e116cdd
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-02.jpg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-03.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..9c419afeeabbd0f6c6f89855cfd175f5ec9e9099
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-03.jpg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-1.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ec3619ba99a6a942e568988efd235ea3558f657f
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-flex-wrap-1.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework-02.png" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework-02.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8eacfecf7496e923cb23bc6e25a5f81e5666af01
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework-02.png" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework.jpg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0ce935f6588fd7286b048fe4e2f5f3f252049c09
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/courseware/images/08-homework.jpg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/._01-flex.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/._01-flex.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8c2240ad361f4e74585bf89e277d8e03485c425e
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/._01-flex.html" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/01-flex.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/01-flex.html"
new file mode 100644
index 0000000000000000000000000000000000000000..afb0a07b7647e58d935452d9b85c0b1ee7895430
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/01-flex.html"	
@@ -0,0 +1,38 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
我是内容1

+        
我是内容2

+        
我是内容3

+        
我是内容4

+        我是文本
+        
+    

+    
+        我是span1我是span2我是span3
+    
+    我是兄弟元素
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/02-flex-direction.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/02-flex-direction.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0129eab0c01c6deca37f7ae463860d5153c3c457
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/02-flex-direction.html"	
@@ -0,0 +1,45 @@
+
+
+
+
+    
+    
+    
+    Document
+    
+    
+
+
+
+    

+    

+    

+        
+        
+        
+        
+    

+    

+    

+        
1

+        
2

+        
3

+        
4

+        
5

+        
6

+    

+
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/03-flex-wrap.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/03-flex-wrap.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ab25ac6142b756d9c1974b0948bc9436e82a4ae7
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/03-flex-wrap.html"	
@@ -0,0 +1,46 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
1

+        
2

+        
3

+        
4

+        
5

+        
6

+        
7

+        
8

+        
9

+        
10

+        
11

+        
12

+        
13

+        
14

+        
15

+        
16

+        
17

+        
18

+        
19

+        
20

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/04-justify-content.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/04-justify-content.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7d71fb878b7b40e1905332221391994fe7f52598
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/04-justify-content.html"	
@@ -0,0 +1,63 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    
justify-content: flex-start;

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
justify-content: flex-end;

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
justify-content: space-between;

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
justify-content: space-around;

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
justify-content: space-evenly;

+    

+        
1

+        
2

+        
3

+        
4

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/05-align-items.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/05-align-items.html"
new file mode 100644
index 0000000000000000000000000000000000000000..efa96fbdeedc8e7cacbb5d53ccf1108e6b0a165a
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/05-align-items.html"	
@@ -0,0 +1,86 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    
align-items: stretch;

+    
如果项目未设置高度或设为auto。将占满整个容器的高度。

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
align-items: flex-start;

+    
交叉轴的起点对齐。默认情况下顶部对齐。

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
align-items: flex-end;

+    
交叉轴的终点对齐。默认情况下底部对齐。

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
align-items: center;

+    
交叉轴的中点对齐，表现为垂直居中对齐。

+    

+        
1

+        
2

+        
3

+        
4

+    

+    
align-items: baseline;

+    
子项的第一行文字的基线对齐。

+    

+        
1

+        
2

+        
3

+        
4

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/06-align-content.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/06-align-content.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d02fd3575348dc5cbb2c34c790b8f76490e46f87
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/06-align-content.html"	
@@ -0,0 +1,61 @@
+
+
+
+    
+    
+    
+    Document
+    
+    
+
+
+    


+    

+        
+        
+        
+        
+        
+        
+        
+    

+    

+    

+        

+            
+        

+        

+            
+        

+        

+            
+        

+        

+            
+        

+        

+            
+        

+        

+            
+        

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/07-order.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/07-order.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1aa904c2dae328ddd026a0a650d947c29b929f0f
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/07-order.html"	
@@ -0,0 +1,35 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+        
1

+        
2

+        
3

+        
4

+    

+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/08-flex-grow-01.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/08-flex-grow-01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8bd4f4237cf200118009f779adeadd0b313413f4
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/08-flex-grow-01.html"	
@@ -0,0 +1,53 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
flex容器有3个子元素, 下列选择选择后，作用与第二个flex 子项。

+    

+        
+        
+        
+        
+    

+    

+    

+        

+        

+        

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/09-flex-grow-02.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/09-flex-grow-02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a2820af17ce964af8d70f8e5fd3712258a209de7
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/09-flex-grow-02.html"	
@@ -0,0 +1,54 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
flex容器有3个子元素，默认所有子项都设置了flex-grow:0.25, 下列选择选择后，作用与第二个flex 子项。

+    

+        
+        
+        
+        
+    

+    

+    

+        

+        

+        

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/10-flex-shrink.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/10-flex-shrink.html"
new file mode 100644
index 0000000000000000000000000000000000000000..310ffacc16f5eded563cc3da0d2413cf8ff9424b
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/10-flex-shrink.html"	
@@ -0,0 +1,54 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
flex容器有4个子元素, 下列选择选择后，作用与第二个flex 子项。

+    

+        
+        
+        
+        
+    

+    

+    

+        

+        

+        

+        

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/11-flex-basis.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/11-flex-basis.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cee3a73e6bdc03f213ad7d0008784ee7a0e233af
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/11-flex-basis.html"	
@@ -0,0 +1,53 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
flex容器有3个子元素, 下列选择选择后，作用与第二个flex 子项。

+    

+        
+        
+        
+        
+    

+    

+    

+        

+        

+        

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/12-flex.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/12-flex.html"
new file mode 100644
index 0000000000000000000000000000000000000000..42441d85e1f1daebc271c1eede4b5b13fb849d36
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/12-flex.html"	
@@ -0,0 +1,54 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
flex容器有3个子元素, 下列选择选择后，作用与第二个flex 子项。

+    
flex: none | auto | [<'flex-grow'><'flex-shrink'>? || <'flex-basis'>]

+    

+        

+        

+        

+        
+    

+    

+    

+        

+        

+        

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/13-align-selft.html" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/13-align-selft.html"
new file mode 100644
index 0000000000000000000000000000000000000000..10bfc84c698951e80370c74a723c205d6a42c5e7
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/13-align-selft.html"	
@@ -0,0 +1,58 @@
+
+
+
+    
+    
+    
+    Document
+    
+
+
+    

+    
首先我们设置flex容器baseline对齐，然后点击下面的单选框，给第2个flex子项设置不同align-self属性值，观察其表现：

+    

+        
+        
+        
+        
+        
+    

+    

+        x
+        
1

+        
2

+        
3

+        
4

+    

+    
+
+
\ No newline at end of file
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/demo.js" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/demo.js"
new file mode 100644
index 0000000000000000000000000000000000000000..cad31dd64fcdbabfe81a62698295f2530d7047aa
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/demo.js"	
@@ -0,0 +1,12 @@
+window.addEventListener('DOMContentLoaded', function() {
+    console.log('aa');
+    let inputs = document.querySelectorAll('input[name=option]');
+    let box = document.querySelector('.parent');
+    Array.from(inputs).forEach((ele, i) => {
+        ele.onchange = function() {
+            let value = this.value;
+            let prop = this.dataset.attr;
+            box.style[prop] = value;
+        }
+    })
+})
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/01.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..c5ad0ea91863886ae5b80457e54c706128cbc9cd
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/01.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/02.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/02.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..12aeef39a8da0da77c69706ffd01c64b17054b41
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/02.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/03.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/03.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..d21e8e0e784756c016cb235e2e6b37c375709c5f
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/03.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/04.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/04.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..662221cf8c0d56172253c7f07e122e09870af7be
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/04.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/05.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/05.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..fe98eab745d80047b7655028300591a22a7091ae
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/05.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/06.jpeg" "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/06.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..555d635a9e478f697cd33f9e6ebd720833ceaebc
Binary files /dev/null and "b/\345\216\237\345\206\254\346\242\205/H5+CSS3+\350\257\276\344\273\266\344\270\216\344\275\234\344\270\232.11\346\234\21024\345\217\267\345\211\215/07 \345\274\271\346\200\247\347\233\222\345\255\220/example/images/06.jpeg" differ
diff --git "a/\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.html" "b/\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6175484116e1f9294577536e45157e2b0f61da57
--- /dev/null
+++ "b/\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.\345\216\237\345\206\254\346\242\205/\347\200\221\345\270\203\346\265\201.html"
@@ -0,0 +1,47 @@
+
+
+
+    
+    
+    Document
+
+
+
+    

+        

+        

+        

+        

+        

+        

+        

+        

+        

+    

+
+
\ No newline at end of file