├── LICENSE ├── README.md ├── browser-api ├── browser │ ├── console.md │ ├── history.md │ ├── location.md │ ├── navigator.md │ ├── screen.md │ ├── window-timers.md │ └── window.md ├── formdata.md ├── images │ └── console.table.png ├── media │ ├── canvas.md │ └── context-2d.md ├── network │ ├── fetch │ │ ├── global-fetch.md │ │ ├── headers.md │ │ └── readme.md │ └── xhr.md ├── readme.md └── url-utils.md ├── browser └── readme.md ├── css ├── animation.md ├── background.md ├── border-image.md ├── border-radius.md ├── border.md ├── box-model.md ├── box-shadow.md ├── color.md ├── column.md ├── content.md ├── declaration.md ├── dimension.md ├── filter.md ├── flex-box.md ├── float.md ├── font-face.md ├── font.md ├── gradient.md ├── images │ ├── box-model.png │ ├── flex-terms.png │ ├── float.png │ ├── margin-collapse-1.png │ └── margin-collapse-2.png ├── list.md ├── margin.md ├── outline.md ├── overflow.md ├── padding.md ├── position.md ├── properties.md ├── readme.md ├── selectors.md ├── table.md ├── text.md ├── transform.md ├── transition.md └── units.md ├── cssom └── readme.md ├── demo ├── css │ ├── float │ │ └── float │ │ │ ├── float.css │ │ │ ├── index.html │ │ │ └── readme.md │ └── position │ │ ├── dropdown │ │ ├── dropdown.css │ │ ├── dropdown.js │ │ ├── index.html │ │ └── readme.md │ │ └── modal │ │ ├── index.html │ │ ├── modal.css │ │ ├── modal.js │ │ └── readme.md ├── readme.md └── web-components │ ├── fancy-button │ ├── fancy-button.js │ └── index.html │ ├── hello-world │ ├── hello-world.js │ └── index.html │ ├── life-cycle │ ├── hello-world.js │ └── index.html │ ├── template-slot │ ├── index.html │ └── user-card.js │ ├── template │ └── index.html │ └── textarea-count │ ├── index.html │ └── textarea-count.js ├── dom ├── document.md ├── dom-objects.md ├── element.md ├── event │ ├── event-target.md │ ├── event.md │ └── readme.md ├── html-elements │ ├── HTMLAudio.md │ ├── html-element.md │ └── readme.md ├── images │ ├── dom-tree.png │ ├── event-capturing-bubbling.png │ ├── event-loop.ddd │ ├── event-loop.png │ ├── node-attributes.png │ ├── node-childnodes.png │ ├── node-firstchild.png │ └── node-parentnode.png ├── node.md ├── parent-node.md ├── readme.md └── selector-apis.md ├── html ├── canvas_context_2d.md ├── demo │ └── html-tag-base │ │ └── index.html ├── doctype.md ├── images │ ├── html-index.html.png │ ├── html-semantic-blog-template.png │ ├── html-tag-link-icon.png │ ├── html-tag-meta-01.png │ ├── html-tag-ruby.png │ ├── html-tag-title-01.png │ └── html-tag-title-02.png ├── readme.md ├── semantic.md ├── tag │ ├── a.md │ ├── audio.md │ ├── base.md │ ├── body.md │ ├── br.md │ ├── canvas.md │ ├── form.md │ ├── head.md │ ├── hr.md │ ├── html.md │ ├── input.md │ ├── link.md │ ├── meta.md │ ├── script.md │ ├── style.md │ └── title.md └── tags │ ├── div.md │ ├── form.md │ ├── list.md │ ├── media.md │ ├── table.md │ └── text.md ├── javascript ├── array.md ├── class.md ├── data-transfer.md ├── datatype.md ├── es-2015.md ├── es6 │ ├── arrow-function.md │ ├── class.md │ ├── destructuring.md │ ├── function.md │ ├── generator.md │ ├── iterator.md │ ├── let-const.md │ ├── map.md │ ├── module.md │ ├── promise.md │ ├── proxy-reflect.md │ ├── set.md │ ├── string.md │ ├── symbol.md │ └── template-string.md ├── exception.md ├── function.md ├── grammer.md ├── module.md ├── object-methods.md ├── object-properties.md ├── object.md ├── object │ ├── array.md │ ├── boolean.md │ ├── date.md │ ├── math.md │ ├── number.md │ ├── regexp.md │ └── string.md ├── objects.md ├── operators.md ├── readme.md ├── statements.md ├── strict.md └── variable.md └── web-components ├── custom-elements.md ├── shadow-dom.md └── template-and-slot.md /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FE 2 | 3 | All about Front End development. 前端开发的一切。 4 | 5 | ## 基础 6 | 7 | + [HTML](./html/readme.md) 8 | + [CSS](./css/readme.md) 9 | + [JavaScript](./javascript/readme.md) 10 | + [DOM](./dom/readme.md) 11 | + [Browser API](./browser-api/readme.md) 12 | 13 | ## 进阶 14 | 15 | + LESS/SASS/Stylus 16 | + PostCSS 17 | + CoffeeScript 18 | + TypeScript 19 | + Babel 20 | + Font Icon 21 | 22 | ## 扩展 23 | 24 | + 单页应用/路由 25 | + PWA 26 | + WebAssembly 27 | 28 | ## 规范化 29 | 30 | + JSHint/ESLint 31 | + CSSLint 32 | 33 | ## 工具 34 | 35 | + [Markdown](https://github.com/LearnShare/Learning-Markdown) 36 | + Emmet 37 | + Pug 38 | + 编辑器 VS Code/Sublime Text/Atom/Bracket 39 | + IDE WebStorm 40 | + Git SourceTree/Github Desktop, Github/Bitbucket/Gitlab 41 | + EditorConfig 42 | + 浏览器开发者工具 43 | + 调试工具 44 | + 依赖管理 npm/yarn/Bower 45 | + 构建工具 Grunt/Gulp/npm script/GNU Make 46 | + 其他 LiveReload/*watch/CI 47 | 48 | ## 框架和库 49 | 50 | + Normalize.css/reset.css 51 | + Font-Awesome/Material icons 52 | + Bootstrap/Foundation/Semantic UI 53 | + Sizzle/jQuery/Zepto 54 | + Angular/Ionic 55 | + React/JSX 56 | + Vue 57 | + Polymer 58 | + D3.js/Highcharts 59 | + three.js/BabylonJS 60 | + NativeScript/React Native/Cordova 61 | + NW.js/Electron/React Native Desktop 62 | 63 | ## 设计和交互 64 | 65 | + 响应式 66 | + Material Design 67 | + 设计工具 Photoshop/Illustrator 68 | + 交互设计工具 Adobe XD/Sketch/InVision/Origami Studio 69 | 70 | ## 高级 71 | 72 | + 构建 Webpack/Rollup/Parcel 73 | + 组件化/模块化 Directive(ng1)/Component(Angular/Vue/React)/Shadow DOM(W3C, Polymer) 74 | + 性能 75 | + 安全 76 | + 测试 77 | + 工程化 78 | 79 | ## 周边 80 | 81 | + HTTP 82 | + RESTful 83 | + WebSocket/Socket.io 84 | + Node.js 85 | + Cache/CDN 86 | 87 | ## 专题 88 | 89 | 参考：[专题列表](./demo/readme.md) 90 | -------------------------------------------------------------------------------- /browser-api/browser/console.md: -------------------------------------------------------------------------------- 1 | Console 2 | ==== 3 | 4 | Console 是浏览器开发工具或 JavaScript 执行环境提供的工具，可以使用 JavaScript 向 Console 中输出（打印）文本等信息，用来辅助调试。 5 | 6 | 参考：[MDN: Console](https://developer.mozilla.org/en-US/docs/Web/API/Console) 7 | [DevToolsWG: console-object](https://github.com/DeveloperToolsWG/console-object/blob/master/api.md) 8 | [Google Dev: Using the Console](https://developers.google.com/web/tools/chrome-devtools/debug/console/?hl=en) 9 | 10 | console 是全局对象，可以在任意位置调用它： 11 | 12 | ```js 13 | console.log('Hello Console.'); 14 | ``` 15 | 16 | 方法 17 | ---- 18 | 19 | ### assert() 20 | 21 | 如果表达式判断为 false，则向输出信息。 22 | 23 | 语法： 24 | >console.assert(expression, object); 25 | 26 | 参数： 27 | 28 | + expression 用于判断的表达式 29 | + object 输出到控制台的内容 30 | 31 | ### clear() 32 | 33 | 清空控制台的信息。 34 | 35 | ### count() 36 | 37 | 输出文本信息及次数，并对同样的信息累加次数。 38 | 39 | 语法： 40 | >console.count(label); 41 | 42 | 次数： 43 | 44 | + label 要输出的文本内容 45 | 46 | 只要输出的内容曾经出现过，就累加次数： 47 | 48 | ```js 49 | console.count('abc'); // abc: 1 50 | console.count('abc123'); // abc123: 1 51 | console.count('abc'); // abc: 2 52 | ``` 53 | 54 | ### debug() 55 | 56 | 和 console.log() 相同。 57 | 58 | ### dir() 59 | 60 | 输出 JavaScript 对象，如果对象为 DOM 元素，则输出其代表的 DOM 元素。 61 | 62 | 语法： 63 | >console.dir(document.body); 64 | 65 | ### dirxml() 66 | 67 | 输出元素的 XML 对象。对于 HTML 元素，作用和 console.log() 相同。 68 | 69 | 语法： 70 | >var element = document.getElementById('target'); 71 | >console.dirxml(element); 72 | 73 | ### error() 74 | 75 | 和 console.log() 类似，不过会附加堆栈信息，并以错误的样式（一般是红色文字）呈现。 76 | 77 | 语法： 78 | >console.error(object [, object, …]); 79 | 80 | ### exception() 81 | 82 | 和 console.error() 类似。 83 | 84 | ### group() 85 | 86 | 开始一个新的组，其后的信息将会在同一组中呈现，知道该组被关闭（console.groupEnd()）。 87 | 88 | 语法： 89 | >console.group(object[, object, …]); 90 | 91 | ```js 92 | console.group('Group 1:'); 93 | console.log('Item 1 of Group'); 94 | console.groupEnd(); 95 | ``` 96 | 97 | 组和组可以相互嵌套。 98 | 99 | ### groupCollapsed() 100 | 101 | 与 console.group() 类似，不过默认该组处于折叠状态。 102 | 103 | ### groupEnd() 104 | 105 | 关闭通过 console.group() 或 console.groupCollapsed() 打开的组。 106 | 107 | ### info() 108 | 109 | 和 console.log() 类似。 110 | 111 | ### log() 112 | 113 | 向控制台输出内容，内容可以为任何 JS 值、对象、函数或类。 114 | 115 | 语法： 116 | >console.log('abc'); 117 | >console.log('1 + 2 =', 1 + 2); 118 | >console.log(document.body); 119 | >console.log({ x:１, y: 2 }); 120 | >console.log([2, 3, 4]); 121 | 122 | 也可以类似 C 中的 printf() 方法，通过 %* 的方式提供参数并执行 [数据格式化](https://developers.google.com/web/tools/chrome-devtools/debug/console/console-write#string-substitution-and-formatting)。 123 | 124 | ### profile() 125 | 126 | 启动捕获浏览器的 CPU 曲线，可以提供一个特定的名称（label）来区分不同的捕获。可以在捕获过程结束后执行停止操作（console.profileEnd()）。 127 | 128 | 语法： 129 | >console.profile([label]); 130 | 131 | ```js 132 | console.profile('Monitor CPU Usage'); 133 | // do something 134 | console.profileEnd(); 135 | ``` 136 | 137 | 可以在浏览器开发工具的 Profiles 页面查看捕获的结果。 138 | 139 | ### profileEnd() 140 | 141 | 停止通过 console.profile() 启动的捕获动作。 142 | 143 | ### table() 144 | 145 | 使用表格的形式输出数组或对象。 146 | 147 | 语法： 148 | >console.table(data[, columns]); 149 | 150 | 参数： 151 | >columns 指定对象的哪些属性会被呈现出来。 152 | 153 | ```js 154 | var list = [{ 155 | x: 1, 156 | y: 2 157 | }, { 158 | x: 3, 159 | y: 4 160 | }]; 161 | 162 | console.table(list, ['x']); 163 | ``` 164 | 165 | ![console.table](../images/console.table.png) 166 | 167 | ### time() 168 | 169 | 通过指定的 label 启动一个计时器，可以通过 console.timeEnd(label) 停止该计时器。 170 | 171 | ```js 172 | console.time('Timer001'); 173 | // do something 174 | console.timeEnd('Timer001'); 175 | // => Timer001: 123ms 176 | ``` 177 | 178 | ### timeEnd() 179 | 180 | 停止 label 指定的定时器，并将 label 和时长输出到控制台。 181 | 182 | ### timeStamp() 183 | 184 | 标记一个特定的时间点，可以通过浏览器开发工具的 Timeline 界面查看。 185 | 186 | 语法： 187 | >console.timeStamp([label]); 188 | 189 | ### trace() 190 | 191 | 输出制定对象在该位置的堆栈信息。 192 | 193 | 语法： 194 | >console.trace(object); 195 | 196 | ### warn() 197 | 198 | 类似于 console.log()，不过信息以警告的形式呈现。 199 | -------------------------------------------------------------------------------- /browser-api/browser/history.md: -------------------------------------------------------------------------------- 1 | History 2 | ==== 3 | 4 | History 接口代表了当前窗口的浏览记录。 5 | 6 | 当前窗口打开的每一个不同的 URL 都会被记录为一个新的历史（除非使用了 location.replace(url) 替换掉一个历史），可以通过 history.pushState() 方法手动向历史记录列表里添加记录。可以在历史记录列表里前进或后退，但不可以遍历整个列表。 7 | 8 | 属性 9 | ---- 10 | 11 | ### length 12 | 13 | 当前历史记录列表的长度。 14 | 15 | ### state 16 | 17 | 通过 history.pushState() 添加到历史记录里的 state 参数值。 18 | 19 | 方法 20 | ---- 21 | 22 | ### back() 23 | 24 | 在历史记录中向后退一步（如果有上一步的话），等同于 history.go(-1)。 25 | 26 | ### forword() 27 | 28 | 在历史记录中向前进一步（如果有下一步的话），等同于 history.go(1)。 29 | 30 | ### go() 31 | 32 | 在历史记录中前进或后退指定的步数。 33 | 34 | 语法： 35 | >history.go(steps); 36 | 37 | 参数： 38 | 39 | + steps 前进或后退的步数（正数为前进，负数为后退） 40 | 41 | ### pushState() 42 | 43 | 向历史记录列表中添加新纪录（浏览器会改变当前页面的 URL，但不会加载或刷新页面），该记录与浏览器生成的记录效果相同。 44 | 45 | 语法： 46 | >history.pushState(state, title, url); 47 | 48 | 参数： 49 | 50 | + state 状态对象，代表历史记录的唯一特征（该值可以通过 history.state 读取） 51 | + title 历史记录的名称 52 | + url 历史记录的 URL 53 | 54 | URL 必须与当前页面同源。 55 | 56 | ```js 57 | // open test.com 58 | window.history.length; // 1 59 | 60 | window.history.pushState({ 61 | a: 1, 62 | b: 2 63 | }, 64 | 'pushed history', 65 | 'http://test.com/abc123'); 66 | 67 | // 可以发现浏览器地址栏的地址变为 68 | // http://test.com/abc123，但没有刷新页面 69 | window.history.length; // 2 70 | ``` 71 | 72 | ### replaceState() 73 | 74 | 与 history.pushState() 类似，但会替换掉历史列表中最近一条记录。 75 | 76 | pushState() 和 replaceState() 目前通常用来做单页面应用，也会配合 Ajax 做无刷新的内容加载。 77 | -------------------------------------------------------------------------------- /browser-api/browser/location.md: -------------------------------------------------------------------------------- 1 | Location 2 | ==== 3 | 4 | Location 接口代表了当前页面的 URL 相关的信息，它实现了 [URLUtils](./url-utils.md) 接口。 5 | 6 | 属性 7 | ---- 8 | 9 | 参考：[URLUtils](./url-utils.md) 10 | 11 | 方法 12 | ---- 13 | 14 | ### assign() 15 | 16 | 跳转到指定的 URL（会记录到历史列表中）。 17 | 18 | 语法： 19 | >location.assign(url); 20 | 21 | 必须加载同源的地址。 22 | 23 | ### reload() 24 | 25 | 重新加载当前页面。 26 | 27 | 语法： 28 | >object.reload(forcedReload); 29 | 30 | 参数： 31 | 32 | + forcedReload 是否强制刷新（只从服务器加载，忽略本地缓存的内容） 33 | 34 | ### replace() 35 | 36 | 加载指定的 URL，并替换掉当前页面（会替换掉历史列表中最近一条记录）。 37 | 38 | 语法： 39 | >object.replace(url); 40 | 41 | ### 42 | -------------------------------------------------------------------------------- /browser-api/browser/navigator.md: -------------------------------------------------------------------------------- 1 | Navigator 2 | ==== 3 | 4 | Navigator 代表了用户代理（这里是浏览器）。 5 | 6 | 属性 7 | ---- 8 | 9 | ### userAgent 10 | 11 | `Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.58 Safari/537.36` 12 | 13 | 用户代理的特征字符串，一般包含了如下信息： 14 | 15 | + 操作系统信息（类型、版本、架构等） 16 | + 浏览器（类型、版本） 17 | + 渲染引擎 18 | 19 | 通常可以用来进行用户访问的统计。但 userAgent 比较容易伪造，所以可信度并不高。 20 | 21 | ### connection 22 | 23 | 返回浏览器的 [NetworkInformation](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation) 对象，它包含了当前的网络信息： 24 | 25 | + type 网络类型 26 | + downlinkMax 最大下载速度 27 | 28 | ### geolocation 29 | 30 | 返回 [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation) 对象，可以用来访问设备的位置信息。 31 | 32 | ### oscpu 33 | 34 | 返回系统的信息。 35 | 36 | ### permissions 37 | 38 | 返回 [Permissions](https://developer.mozilla.org/en-US/docs/Web/API/Permissions) 对象，可以用来访问权限相关的 API。 39 | 40 | ### serviceWorker 41 | 42 | 返回 [ServiceWorkerContainer](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer) 对象。 43 | -------------------------------------------------------------------------------- /browser-api/browser/screen.md: -------------------------------------------------------------------------------- 1 | Screen 2 | ==== 3 | 4 | 代表了浏览器所在的屏幕，可以用来访问设备的屏幕信息。 5 | 6 | ### availTop 7 | 8 | 浏览器窗口可用区域上边缘距屏幕顶部的距离（一般需要排除操作系统的菜单栏、任务栏等的高度）。 9 | 10 | ### availLeft 11 | 12 | 浏览器窗口可用区域左边缘距屏幕左侧的距离（一般需要排除操作系统的菜单栏、任务栏等的宽度）。 13 | 14 | ### availHeight 15 | 16 | 获取屏幕内部用来显示浏览器窗口区域的高度（一般需要排除操作系统的菜单栏、任务栏等的高度）。 17 | 18 | ![window](https://github.com/LearnShare/blog/blob/master/posts/images/position-and-size-screen.png?raw=true) 19 | 20 | 参考：[HTML & JavaScript 中的位置和尺寸](https://github.com/LearnShare/blog/blob/master/posts/position-and-size.md) 21 | 22 | ### availWidth 23 | 24 | 获取屏幕内部用来显示浏览器窗口区域的宽度（一般需要排除操作系统的菜单栏、任务栏等的宽度）。 25 | 26 | ### colorDepth 27 | 28 | 获取屏幕的颜色深度。 29 | 30 | ### height 31 | 32 | 获取屏幕的总高度。 33 | 34 | ### left 35 | 36 | 获取当前屏幕左边缘距离主屏幕左边缘的距离。 37 | 38 | ### orientation 39 | 40 | 获取当前屏幕的朝向。 41 | 42 | ### pixelDepth 43 | 44 | 获取当前屏幕的位深度/色彩深度。 45 | 46 | ### top 47 | 48 | 获取当前屏幕上边缘距离主屏幕上边缘的距离。 49 | 50 | ### width 51 | 52 | 获取屏幕的总宽度。 53 | -------------------------------------------------------------------------------- /browser-api/browser/window-timers.md: -------------------------------------------------------------------------------- 1 | WindowTimers 2 | ==== 3 | 4 | WindowTimers 接口包含了设置和取消定时器的接口，Window 对象实现了该接口。 5 | 6 | 方法 7 | ---- 8 | 9 | ### setTimeout() 10 | 11 | 设置定时器，在指定延时后执行一次。 12 | 13 | 语法： 14 | >var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]); 15 | >var timeoutID = window.setTimeout(code, [delay]); 16 | 17 | 参数： 18 | 19 | + func 延时之后执行的函数 20 | + code 延时之后执行的代码（不推荐这种方式） 21 | + delay 延迟时间（毫秒数，最小为 4） 22 | + param* 要传递给 func 的参数 23 | 24 | 返回值： 25 | 26 | + timeoutId 定时器唯一的 ID 值，用于取消该定时器 27 | 28 | ```js 29 | var move = function(name) { 30 | console.log(name + ' start moving after 3 seconds.'); 31 | }; 32 | 33 | var timer = window.setTimeout(move, 3 * 1000, 'Tag'); 34 | 35 | // Tag start moving after 3 seconds. 36 | ``` 37 | 38 | ### clearTimeout() 39 | 40 | 取消通过 window.setTimeout() 设置的定时器，被取消的定时器将不会再生效。 41 | 42 | 语法： 43 | >window.clearTimeout(timeoutID) 44 | 45 | ### setInterval() 46 | 47 | 设置重复的定时器，在每个指定延时后都会执行，直到被取消。 48 | 49 | 语法： 50 | >var intervalID = window.setInterval(func, delay[, param1, param2, ...]); 51 | >var intervalID = window.setInterval(code, delay); 52 | 53 | ```js 54 | var move = function(name) { 55 | console.log(name + ' moved after 3 seconds.'); 56 | }; 57 | 58 | var timer = window.setInterval(move, 3 * 1000, 'Tag'); 59 | 60 | // Tag moved after 3 seconds. 61 | // Tag moved after 3 seconds. 62 | // Tag moved after 3 seconds. 63 | // ... 64 | ``` 65 | 66 | ### clearInterval() 67 | 68 | 取消通过 window.setInterval() 设置的定时器，被取消的定时器将不会再生效。 69 | 70 | 语法： 71 | >window.clearInterval(intervalID) 72 | -------------------------------------------------------------------------------- /browser-api/formdata.md: -------------------------------------------------------------------------------- 1 | FormData 2 | ==== 3 | 4 | FormData 接口用来处理表单数据，是一个 key/value 组成的，不可遍历的数据结构。 5 | 6 | ```js 7 | var data = new FormData(); 8 | ``` 9 | 10 | 方法 11 | ---- 12 | 13 | ### append() 14 | 15 | 向数据中添加新属性，或向已有的属性添加新值。 16 | 17 | 语法： 18 | >data.append(name, value); 19 | >data.append(name, value, filename); 20 | 21 | 参数： 22 | 23 | + name 属性名称 24 | + value 属性值（Blob、File、USVString） 25 | + filename value 数据（Blon、File）的名称 26 | 27 | ### delete() 28 | 29 | 从数据中删除指定的属性和值。 30 | 31 | 语法： 32 | >data.delete(name); 33 | 34 | ### get() 35 | 36 | 从数据中获取指定属性的值。 37 | 38 | 语法： 39 | >data.get(name); 40 | 41 | ### getAll() 42 | 43 | 从数据中获取指定属性的所有值（数组）。 44 | 45 | 语法： 46 | >data.getAll(name); 47 | 48 | ### has() 49 | 50 | 检查数据中是否存在指定的属性。 51 | 52 | ### set() 53 | 54 | 向数据中添加新属性，或替换已有的属性的值。 55 | 56 | 语法： 57 | >data.set(name, value); 58 | >data.set(name, value, filename); 59 | -------------------------------------------------------------------------------- /browser-api/images/console.table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/browser-api/images/console.table.png -------------------------------------------------------------------------------- /browser-api/media/canvas.md: -------------------------------------------------------------------------------- 1 | Canvas 2 | ==== 3 | 4 | 参考：[MDN: Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 5 | 6 | Canvas （画布、画板）是浏览器提供的可以通过 JavaScript 绘制图形的组件。 7 | 8 | ```html 9 | 10 | ``` 11 | 12 | ```js 13 | var canvas = document.getElementById('canvas'); 14 | 15 | var context = canvas.getContext('2d'); 16 | 17 | context.fillStyle = 'green'; 18 | context.fillRect(0, 0, 100, 100); 19 | ``` 20 | 21 | 元素属性 22 | ---- 23 | 24 | 参考：[MDN: canvas element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) 25 | 26 | ### width 27 | 28 | 设置 canvas 的宽度（px）。 29 | 30 | ### height 31 | 32 | 设置 canvas 的高度（px）。 33 | 34 | Canvas 默认的背景色是透明。 35 | 36 | Canvas API 37 | ---- 38 | 39 | 参考：[MDN: HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) 40 | 41 | ```js 42 | var canvas = document.getElementById('canvas'); 43 | ``` 44 | 45 | ### getContext() 46 | 47 | 获取绘制上下文。 48 | 49 | 参数： 50 | >type 绘制上下文的类型； 51 | >attrs 绘制上下文的参数 52 | 53 | type： 54 | >2d [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) 55 | >webgl WebGL version 1 (OpenGL ES 2.0) 56 | >webgl2 WebGL version 2 (OpenGL ES 3.0) 57 | >bitmaprenderer ImageBitmapRenderingContext 58 | 59 | 本文主要讲解 [CanvasRenderingContext2D](./context-2d.md)。 60 | 61 | ```js 62 | var context = canvas.getContext('2d'); 63 | ``` 64 | 65 | ### toDataURL() 66 | 67 | 将 Canvas 中的图像转换为 [Data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs) 数据。 68 | 69 | 参数： 70 | >type 图片格式（默认为 'image/png'）； 71 | >options 图片质量（对 'image/jpeg' 和 'image/webp' 有效）。 72 | 73 | ### toBlob() 74 | 75 | 将 Canvas 中的图像转换为 [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) 数据。 76 | 77 | 参数： 78 | >callback 转换完成后的回调函数； 79 | >type/options 与 toDataURL() 相同。 80 | 81 | callback 代表的回调函数可以通过 data 参数来读取转换后的 Blob 数据： 82 | 83 | ```js 84 | canvas.toBlob(function(data) { 85 | // data: image data 86 | }); 87 | ``` 88 | -------------------------------------------------------------------------------- /browser-api/network/fetch/global-fetch.md: -------------------------------------------------------------------------------- 1 | GlobalFetch 2 | ==== 3 | 4 | GlobalFetch 定义了 fetch() 方法，Window 和 WorkerGlobalScope 都实现了它，所以你可以在 Window 作用域内，或者各种 Workers 中使用它。 5 | 6 | 方法 7 | ---- 8 | 9 | ### fetch() 10 | 11 | 接收一个 URL 字符串，或者 Resquest 对象，并接收一个 init 对象作为请求的配置。发起请求并返回一个包含 Response 或 Error 的 Promise 对象。 12 | 13 | 语法： 14 | >fetch(input, init).then(function(response) { ... }); 15 | 16 | 参数： 17 | >init 请求配置，可选。支持下列配置属性，一律可选： 18 | 19 | + method 请求方法（GET/POST/PUT 等） 20 | + headers 要发给服务器的头信息，可以是 Headers 对象，或者 [ByteString](https://developer.mozilla.org/en-US/docs/Web/API/ByteString) 21 | + body 要发给服务器的数据，可以是 Blob/BufferSource/FormData/URLSearchParams/UVString 22 | + mode 请求的模式，可以是 cors/no-cors/same-origin 23 | + credentials 验证信息，可以是 omit/same-origin/include 24 | + cache 请求的缓存模式，可以是 default/no-store/reload/no-cache/force-cache/only-if-cached 25 | -------------------------------------------------------------------------------- /browser-api/network/fetch/headers.md: -------------------------------------------------------------------------------- 1 | Headers 2 | ==== 3 | 4 | Headers 接口包含了可以操作 Fetch 的 Request 和 Response 中头信息的方法，负责处理头信息。 5 | 6 | ```js 7 | var init = { 8 | 'Accept': '*/*', 9 | 'Content-Length': 123 10 | }; 11 | var headers = new Headers([init]); 12 | ``` 13 | 14 | 参数： 15 | >init 包含任何可用 [头信息](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) 的对象。 16 | 17 | 方法 18 | ---- 19 | 20 | ### append() 21 | 22 | 向 Headers 中添加新属性，如果该属性已存在，则添加新的值。 23 | 24 | 语法： 25 | >headers.append(name, value); 26 | 27 | ### delete() 28 | 29 | 从 Headers 中删除指定属性。 30 | 31 | 语法： 32 | >headers.delete(name); 33 | 34 | ### get() 35 | 36 | 获取指定属性的首个值。 37 | 38 | 语法： 39 | >headers.get(name); 40 | 41 | ### getAll() 42 | 43 | 获取指定属性的所有值，并返回数组。 44 | 45 | 语法： 46 | >headers.getAll(name); 47 | 48 | ### has() 49 | 50 | 检查 Headers 中是否包含指定的属性。 51 | 52 | 语法： 53 | >headers.has(name); 54 | 55 | ### set() 56 | 57 | 向 Headers 中添加新属性，如果该属性已存在，则替换它的值。 58 | 59 | 语法： 60 | >headers.set(name, value); 61 | -------------------------------------------------------------------------------- /browser-api/network/fetch/readme.md: -------------------------------------------------------------------------------- 1 | Fetch 2 | ==== 3 | 4 | 参考：[MDN: Fetch_API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 5 | [MDN: Using_Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) 6 | 7 | Fetch 类似于 [XHR](./xhr.md)，提供了一系列进行网络访问的 API。目前仍处于实验状态，兼容的浏览器比例不算太高，还不推荐直接在线上使用（Github 提供了 Fetch 的 [polyfill](https://github.com/github/fetch)）。 8 | 9 | ```js 10 | fetch(url, config) 11 | .then(function(response) { 12 | // got Response 13 | }) 14 | .catch(function(error) { 15 | // some network error 16 | }); 17 | ``` 18 | 19 | 接口 20 | ---- 21 | 22 | + [GlobalFetch](./global-fetch.md) 23 | + [Headers](./headers.md) 24 | + [Request](./request.md) 25 | + [Response](./response.md) 26 | + [Body](./body.md) 27 | -------------------------------------------------------------------------------- /browser-api/network/xhr.md: -------------------------------------------------------------------------------- 1 | XMLHttpRequest 2 | ==== 3 | 4 | XMLHttpRequest（简称 XHR）提供了可以使用 JavaScript 通过 HTTP 等协议与服务器交换数据的能力。 5 | 6 | 属性 7 | ---- 8 | 9 | ### readyState 10 | 11 | 获取 XHR 对象的状态： 12 | 13 | + 0 UNSENT XHR 对象已创建，但未调用 open() 14 | + 1 OPENED 已调用 open() 15 | + 2 HEADERS_RECEIVED 已调用 send()，headers 和 status 可用 16 | + 3 LOADING 正在从服务器接收数据 17 | + 4 DONE 数据接收完毕或失败 18 | 19 | ### response 20 | 21 | 读取请求返回的数据，可能是 ArrayBuffer、Blob、Document、JavaScript object、DOMString（根据 xhr.responseType 属性来确定）。如果请求失败或未结束，返回 null。 22 | 23 | ### responseType 24 | 25 | 服务器返回数据的类型： 26 | 27 | + '' DOMString 包含了 HTML 内容的文本[默认] 28 | + 'arraybuffer' ArrayBuffer 29 | + 'blob' Blob 二进制数据 30 | + 'document' HTML Document 对象 31 | + 'json' JavaScript object JSON 格式的对象 32 | + 'text' DOMString 33 | 34 | ### responseXML 35 | 36 | 将服务器返回的数据解析为 XML/HTML 元素。 37 | 38 | ### status 39 | 40 | 读取服务器返回的 HTTP code。 41 | 42 | ### statusText 43 | 44 | 读取服务器返回的 HTTP 状态文本。 45 | 46 | ### timeout 47 | 48 | 读取或设置 XHR 对象的请求超时时间（毫秒，默认为 0，无超时）。 49 | 50 | ### upload 51 | 52 | 获取 XHR 的 [XMLHttpRequestUpload] 对象，代表了上传过程。它实现了 [XMLHttpRequestEventTarget](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget) 接口，可以用来跟踪文件上传的状态： 53 | 54 | XMLHttpRequestEventTarget 的事件： 55 | 56 | + abort 请求中止 57 | + error 请求发生错误 58 | + load 请求成功 59 | + loadstart 请求开始 60 | + progress 请求进行中 61 | + timeout 请求超时 62 | + loadend 请求结束 63 | 64 | ### withCredentials 65 | 66 | 方法 67 | ---- 68 | 69 | ### abort() 70 | 71 | 如果请求已经发出（send()），中止该请求。 72 | 73 | ### getAllResponseHeaders() 74 | 75 | 获取服务器返回的 HTTP headers（格式为字符串，以 CRLF 分隔）。 76 | 77 | ### getResponseHeader() 78 | 79 | 获取服务器返回的指定 HTTP header。 80 | 81 | ### open() 82 | 83 | 通过给定的参数初始化一个请求。 84 | 85 | 语法： 86 | >xhr.open(method, url[, async, user, password]); 87 | 88 | 参数： 89 | 90 | + method HTTP method 91 | + url 请求的地址 92 | + async 是否异步发送（默认为 true），可选 93 | + user 发送到服务器的用户名，默认为空，可选 94 | + password 发送到服务器的密码，默认为空，可选 95 | 96 | ### overrideMimeType() 97 | 98 | 重写服务器返回数据的 MIME 类型。 99 | 100 | ### send() 101 | 102 | 发送请求（无数据），或者向服务器发送数据。 103 | 104 | 语法： 105 | >send(); 106 | >send(data); 107 | 108 | 可用数据类型： 109 | 110 | + ArrayBufferView 111 | + Blob 112 | + Document 113 | + DOMString 114 | + FormData 115 | 116 | 参考：[FormData](./formdata.md) 117 | 118 | ### setRequestHeader() 119 | 120 | 设置请求头信息。 121 | 122 | 语法： 123 | >xhr.setRequestHeader(header[, value]); 124 | 125 | 必须在 open() 之后，send() 之前才能使用。如果多次设置同一个 header 属性，则合并为一个后再发送。 126 | 127 | 事件 128 | ---- 129 | 130 | 参考 [XMLHttpRequestEventTarget] 中的事件。 131 | 132 | ### readystatechange 133 | 134 | xhr.readyState 发生变化，也就是请求进入了不同的阶段。一般用这个事件来监听请求的状态。 135 | -------------------------------------------------------------------------------- /browser-api/readme.md: -------------------------------------------------------------------------------- 1 | 浏览器 API 2 | ==== 3 | 4 | 浏览器访问 5 | ---- 6 | 7 | ### Window 8 | 9 | 参考：[window](./browser/window.md) 10 | 11 | ### Navigator 12 | 13 | 参考：[navigator](./browser/navigator.md) 14 | 15 | ### Screen 16 | 17 | 参考：[screen](./browser/screen.md) 18 | 19 | ### Location 20 | 21 | 参考：[location](./browser/location.md) 22 | 23 | ### History 24 | 25 | 参考：[history](./browser/history.md) 26 | 27 | ### Console 28 | 29 | 参考：[console](./browser/console.md) 30 | 31 | 网络访问 32 | ---- 33 | 34 | ### XHR 35 | 36 | 参考：[xhr](./network/xhr.md) 37 | 38 | ### Fetch 39 | 40 | 参考：[fetch](./network/fetch.md) 41 | 42 | ### Web Socket 43 | 44 | 参考：[web-socket](./network/web-socket.md) 45 | 46 | 数据存储 47 | ---- 48 | 49 | ### Cookie 50 | 51 | ### Session 52 | 53 | ### LocalStorage 54 | 55 | ### SessionStorage 56 | 57 | ### IndexedDB 58 | 59 | ### Web SQL 60 | 61 | ### App Cache/Offline App 62 | 63 | 媒体 64 | ---- 65 | 66 | ### Audio 67 | 68 | ### Video 69 | 70 | ### SVG/D3.js 71 | 72 | ### Canvas/WebGL 73 | 74 | [Canvas](./media/canvas.md) 75 | 76 | 设备访问 77 | ---- 78 | 79 | ### 文件 80 | 81 | ### 定位 82 | 83 | ### 震动 84 | 85 | ### 剪贴板 86 | 87 | ### 摄像头 88 | 89 | ### 麦克风 90 | 91 | ### 电池 92 | 93 | ### 通知 94 | 95 | ### 光传感器 96 | 97 | ### 设备方向 98 | 99 | ### 网络状态 100 | 101 | ### 消息推送 102 | 103 | 其他 104 | ---- 105 | 106 | ### Timer 107 | 108 | ### 页面可见 109 | 110 | ### 鼠标捕获 111 | 112 | ### 全屏 113 | 114 | ### Web Worker 115 | -------------------------------------------------------------------------------- /browser-api/url-utils.md: -------------------------------------------------------------------------------- 1 | URLUtils 2 | ==== 3 | 4 | URLUtils 接口代表了 URL 信息。 5 | 6 | 属性 7 | ---- 8 | 9 | ### href 10 | 11 | 读取或设置整个 URL 地址。 12 | 13 | ### protocol 14 | 15 | 读取或设置 URL 的协议部分。 16 | 17 | ### host 18 | 19 | 读取或设置 URL 的域名和端口部分。 20 | 21 | ### domain 22 | 23 | 读取或设置 URL 的域名部分。 24 | 25 | ### port 26 | 27 | 读取或设置 URL 的端口部分。 28 | 29 | ### pathname 30 | 31 | 读取或设置 URL 的路径部分。 32 | 33 | ### search 34 | 35 | 读取或设置 URL 的 querystring 部分。 36 | 37 | ### hash 38 | 39 | 读取或设置 URL 的锚部分。 40 | 41 | ### username 42 | 43 | 读取或设置 URL 的用户名部分。 44 | 45 | ### password 46 | 47 | 读取或设置 URL 的密码部分。 48 | 49 | ### origin 50 | 51 | 读取 URL 的协议、域名和端口部分。 52 | 53 | ### searchParams 54 | 55 | 读取或设置 URL 的 [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) 部分。 56 | -------------------------------------------------------------------------------- /browser/readme.md: -------------------------------------------------------------------------------- 1 | 浏览器 2 | ==== 3 | 4 | 功能 5 | ---- 6 | 7 | 原理 8 | ---- 9 | 10 | 前端优化 11 | ---- 12 | -------------------------------------------------------------------------------- /css/animation.md: -------------------------------------------------------------------------------- 1 | 动画(animation) 2 | ==== 3 | 4 | ```css 5 | /* 定义动画规则 */ 6 | @keyframes move { 7 | from { 8 | top: 0px; 9 | } 10 | to { 11 | top: 200px; 12 | } 13 | } 14 | 15 | /* 执行动画，持续两秒钟 */ 16 | #target { 17 | animation: move 2s; 18 | } 19 | ``` 20 | 21 | @keyframes 22 | ---- 23 | 24 | 定义多个关键帧。 25 | 26 | ``` 27 | @keyframes name { 28 | from { 29 | top: 0px; 30 | } 31 | to { 32 | top: 200px; 33 | } 34 | } 35 | ``` 36 | 37 | 属性： 38 | 39 | 1.name 定义动画名称 40 | 2.keyframes 定义关键帧的位置 41 | >属性值： 42 | >1.百分值 43 | >2.from = 0% 44 | >3.to = 100% 45 | 46 | 3.styles 定义关键帧的样式属性 47 | 48 | animation-name 49 | ---- 50 | 51 | 定义动画的名称。 52 | 53 | animation-duration 54 | ---- 55 | 56 | 定义动画的长度。 57 | 58 | 属性值： 59 | 60 | 1. time 默认为 0，无动画效果（单位：s） 61 | 62 | animation-timing-function 63 | ---- 64 | 65 | 定义动画的速度曲线。 66 | 67 | animation-deley 68 | ---- 69 | 70 | 定义动画的延迟。 71 | 72 | animation-iteration-count 73 | ---- 74 | 75 | 定义动画的播放次数（默认为 1）。 76 | 77 | animation-derection 78 | ---- 79 | 80 | 定义动画是否循环反向播放。 81 | 82 | 属性值： 83 | 84 | 1. normal 不反向播放（默认） 85 | 2. alternate 循环反向播放 86 | 87 | animation-play-state 88 | ---- 89 | 90 | 设置动画的播放状态。 91 | 92 | 属性值： 93 | 94 | 1. paused 暂停 95 | 2. running 播放 96 | 97 | animation 98 | ---- 99 | 100 | 在同一个声明中设置动画的属性。 101 | 102 | 可包括的属性： 103 | 104 | + animation-name 105 | + animatin-duration 106 | + animation-timing-function 107 | + animation-deley 108 | + animation-iteration-count 109 | + animation-direction 110 | -------------------------------------------------------------------------------- /css/background.md: -------------------------------------------------------------------------------- 1 | 背景(background) 2 | ==== 3 | 4 | background-attachment 5 | ---- 6 | 7 | 设置背景图像是否随页面滚动。 8 | 9 | 属性值： 10 | 11 | 1. scroll 随页面滚动（默认） 12 | 2. fixed 不随页面滚动 13 | 14 | background-color 15 | ---- 16 | 17 | 设置背景色。 18 | 19 | 属性值： 20 | 21 | 1. transparent 透明（默认） 22 | 2. color 23 | 24 | background-image 25 | ---- 26 | 27 | 设置背景图像。 28 | 29 | 属性值： 30 | 31 | 1. none 无背景图像 32 | 2. url("url") 设置背景图像的路径 33 | 34 | background-position 35 | ---- 36 | 37 | 设置背景图像的起始位置。 38 | 39 | 属性值： 40 | 41 | 1.top|center|bottom left|center|right 的组合。如果仅设置一个值，第二个为 center 42 | 43 | 2.x% y% 水平位置和垂直位置（根据元素宽度和高度进行计算）。如果仅设置一个值，第二个为 50% 44 | 45 | 3.x y 尺寸值。如果仅设置一个值，第二个为 50% 46 | 47 | 默认位置为 (0%,0%)。 48 | 49 | background-repeat 50 | ---- 51 | 52 | 设置背景图像的平铺方式。 53 | 54 | 属性值： 55 | 56 | 1. repeat 在水平方向和垂直方向平铺 57 | 2. repeat-x 在水平方向平铺 58 | 3. repeat-y 在垂直方向平铺 59 | 4. no-repeat 不平铺 60 | 61 | background-clip 62 | ---- 63 | 64 | 设置背景的绘制区域。 65 | 66 | 属性值： 67 | 68 | 1. border-box 包括边框的区域（默认） 69 | 2. padding-box 包括内边距的区域 70 | 3. context-box 包括内容的区域 71 | 72 | background-origin 73 | ---- 74 | 75 | 设置 background-position 的定位依据。 76 | 77 | 属性值： 78 | 79 | 1. border-box 包括边框的区域（默认） 80 | 2. padding-box 包括内边距的区域 81 | 3. context-box 包括内容的区域 82 | 83 | background-size 84 | ---- 85 | 86 | 设置背景图像的尺寸（缩放）。 87 | 88 | 属性值： 89 | 90 | 1. x y 宽度和高度。如果仅设置一个值，另一个为 auto 91 | 2. x% y% 百分值。如果仅设置一个值，另一个为 auto 92 | 3. cover 缩放图像，填充整个背景区域（1:1 缩放） 93 | 4. contain 缩放图像，填充整个背景区域（非 1:1 缩放） 94 | 95 | background 96 | ---- 97 | 98 | 在同一个声明中设置背景属性。 99 | 100 | 可包括的属性： 101 | 102 | + background-color 103 | + background-position 104 | + background-size 105 | + background-repeat 106 | + background-origin 107 | + background-clip 108 | + background-attachment 109 | + background-image 110 | 111 | 多重背景 112 | ---- 113 | 114 | ### 1.分组声明 115 | 116 | 在各个 background-* 属性中声明多组属性，每组对应一个背景的声明： 117 | 118 | ``` 119 | background-image: url("image1"), 120 | url("image2"); 121 | background-position: top, 122 | bottom; 123 | ... 124 | ``` 125 | 126 | ### 2.合并声明 127 | 128 | 在同一个 background 属性中声明多组属性： 129 | 130 | ``` 131 | background: url("image1") top, 132 | url("image2") bottom; 133 | ``` 134 | -------------------------------------------------------------------------------- /css/border-image.md: -------------------------------------------------------------------------------- 1 | 图像边框(border-image) 2 | ==== 3 | 4 | 参考：[MDN: border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) 5 | 6 | border-image-outset 7 | ==== 8 | 9 | 设置边框图像超出边框的量。 10 | 11 | 属性值： 12 | 13 | + 尺寸值 14 | + border-width 的倍数 15 | 16 | 有四种设置方式，分别代表顶部、右侧、底部及左侧的 outset 值。 17 | 18 | border-image-repeat 19 | ==== 20 | 21 | 设置边框图像的呈现方式。 22 | 23 | 属性值： 24 | 25 | 1. stretch 拉伸 26 | 2. repeat 平铺 27 | 3. round 类似于 repeat。无法平铺时，会对图像进行缩放 28 | 29 | border-image-slice 30 | ==== 31 | 32 | ？？ 33 | 34 | border-image-source 35 | ==== 36 | 37 | 设置边框图像的 URL。 38 | 39 | 属性值： 40 | 41 | 1. url("url") 用作边框图像的资源 42 | 43 | border-image-width 44 | ==== 45 | 46 | ？？ 47 | 48 | border-image 49 | ==== 50 | 51 | 在同一个声明中设置边框图像属性。 52 | 53 | 可包括的属性： 54 | 55 | + border-image-source 56 | + border-image-slice 57 | + border-image-width 58 | + border-image-outset 59 | + border-image-repeat 60 | -------------------------------------------------------------------------------- /css/border-radius.md: -------------------------------------------------------------------------------- 1 | 圆角(border-radius) 2 | ==== 3 | 4 | border-top-left-radius 5 | ---- 6 | 7 | 设置边框左上角的外形。 8 | 9 | 属性值： 10 | 11 | 1. 尺寸值 圆角半径 12 | 2. 百分值 乘以边框宽/高度，作为圆角的半径 13 | 14 | 属性值组合： 15 | 16 | 1. a b/a% b%/a% 椭圆的水平半径和垂直半径 17 | 2. a 圆的半径 18 | 19 | border-top-right-radius 20 | ---- 21 | 22 | 设置边框右上角的外形。 23 | 24 | border-bottom-left-radius 25 | ---- 26 | 27 | 设置边框左下角的外形。 28 | 29 | border-bottom-right-radius 30 | ---- 31 | 32 | 设置边框右上角的外形。 33 | 34 | border-radius 35 | ---- 36 | 37 | 在同一个声明中设置内边距属性。 38 | 39 | 可包括的属性： 40 | 41 | + border-top-left-radius 42 | + border-top-right-radius 43 | + border-bottom-right-radius 44 | + border-bottom-left-radius 45 | 46 | 可包括的属性组合： 47 | 48 | 1.a b c d / e f g h 49 | >top-left: a e; 50 | >top-right: b f; 51 | >bottom-right: c g; 52 | >bottom-left: d h; 53 | 54 | 2.a b c d / e f g 55 | >top-left: a e; 56 | >top-right: b f; 57 | >bottom-right: c g; 58 | >bottom-left: d f; 59 | 60 | 3.a b c d / e f 61 | >top-left: a e; 62 | >top-right: b f; 63 | >bottom-right: c e; 64 | >bottom-left: d f; 65 | 66 | 3.a b c d / e 67 | >top-left: a e; 68 | >top-right: b e; 69 | >bottom-right: c e; 70 | >bottom-left: d e; 71 | 72 | ... 73 | a b c d | a b c | a b | a 74 | * 75 | e f g h | e f g | e f | e 76 | ... 77 | 78 | 4.a b c d 79 | >top-left: a a; 80 | >top-right: b b; 81 | >bottom-right: c c; 82 | >bottom-left: d d; 83 | 84 | 5.a b c 85 | >top-left: a a; 86 | >top-right: b b; 87 | >bottom-right: c c; 88 | >bottom-left: b b; 89 | 90 | 6.a b 91 | >top-left: a a; 92 | >top-right: b b; 93 | >bottom-right: a a; 94 | >bottom-left: b b; 95 | 96 | 7.a 97 | >top-left: a; 98 | >top-right: a; 99 | >bottom-right: a; 100 | >bottom-left: a; 101 | -------------------------------------------------------------------------------- /css/border.md: -------------------------------------------------------------------------------- 1 | 边框(border) 2 | ==== 3 | 4 | border-top-width 5 | ---- 6 | 7 | 设置顶部边框的宽度。 8 | 9 | 属性值： 10 | 11 | 1. thin 细 12 | 2. medium 中等（默认） 13 | 3. thick 粗 14 | 4. 尺寸值（不支持百分比） 15 | 16 | border-top-style 17 | ---- 18 | 19 | 设置顶部边框的样式。 20 | 21 | 属性值： 22 | 23 | 1. none 无边框 24 | 2. hidden 与 none 类似。在应用于表格时，可以解决边框冲突 25 | 3. dotted 点状线 26 | 4. dashed 虚线 27 | 5. solid 实线 28 | 6. double 双线 29 | 7. groove 3D 凹陷 30 | 8. ridge 3D 突出 31 | 9. inset 3D inset 32 | 10. outset 3D outset 33 | 34 | border-top-color 35 | ---- 36 | 37 | 设置顶部边框的颜色。 38 | 39 | 属性值： 40 | 41 | 1. transparent 透明（默认） 42 | 2. 颜色值 43 | 44 | bottom-top 45 | ---- 46 | 47 | 在同一个声明中设置顶部边框属性。 48 | 49 | 可包括的属性： 50 | 51 | + border-top-width 52 | + border-top-style 53 | + border-top-color 54 | 55 | border-right-width 56 | ---- 57 | 58 | border-right-style 59 | ---- 60 | 61 | border-right-color 62 | ---- 63 | 64 | bottom-right 65 | ---- 66 | 67 | border-bottom-width 68 | ---- 69 | 70 | border-bottom-style 71 | ---- 72 | 73 | border-bottom-color 74 | ---- 75 | 76 | bottom-bottom 77 | ---- 78 | 79 | border-left-width 80 | ---- 81 | 82 | border-left-style 83 | ---- 84 | 85 | border-left-color 86 | ---- 87 | 88 | bottom-left 89 | ---- 90 | 91 | ... 92 | 93 | border-color 94 | ---- 95 | 96 | 在同一个声明中设置边框颜色。 97 | 98 | 可包括的属性： 99 | 100 | + border-top-color 101 | + border-right-color 102 | + border-bottom-color 103 | + border-left-color 104 | 105 | 有四种设置方式： 106 | 107 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框颜色 108 | 2. a b c 分别设置顶部、左右和底部的边框颜色 109 | 3. a b 分别设置顶部和底部、左右的边框颜色 110 | 4. a 一次设置四个边框颜色 111 | 112 | border-style 113 | ---- 114 | 115 | 在同一个声明中设置边框样式。 116 | 117 | 可包括的属性： 118 | 119 | + border-top-style 120 | + border-right-style 121 | + border-bottom-style 122 | + border-left-style 123 | 124 | 有四种设置方式： 125 | 126 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框样式 127 | 2. a b c 分别设置顶部、左右和底部的边框样式 128 | 3. a b 分别设置顶部和底部、左右的边框样式 129 | 4. a 一次设置四个边框样式 130 | 131 | border-width 132 | ---- 133 | 134 | 在同一个声明中设置边框宽度。 135 | 136 | 可包括的属性： 137 | 138 | + border-top-width 139 | + border-right-width 140 | + border-bottom-width 141 | + border-left-width 142 | 143 | 有四种设置方式： 144 | 145 | 1. a b c d 分别设置顶部、右侧、底部和左侧的边框宽度 146 | 2. a b c 分别设置顶部、左右和底部的边框宽度 147 | 3. a b 分别设置顶部和底部、左右的边框宽度 148 | 4. a 一次设置四个边框宽度 149 | 150 | ... 151 | 152 | border 153 | ---- 154 | 155 | 在同一个声明中设置边框属性。 156 | 157 | 可包括的属性： 158 | 159 | + border-width 160 | + border-style 161 | + border-color 162 | -------------------------------------------------------------------------------- /css/box-model.md: -------------------------------------------------------------------------------- 1 | 盒模型（box-model） 2 | ==== 3 | 4 | 在页面中，所有元素都代表了一个矩形区域（box），浏览器通过计算这个矩形区域的尺寸来完成布局等动作。 5 | 6 | ![box-model](./images/box-model.png) 7 | 8 | box 中包含了一个元素的下列部分： 9 | 10 | + 内容区域（content-width/content-height） 11 | + 内边距（padding） 12 | + 边框（border） 13 | + 外边距（margin） 14 | 15 | 矩形尺寸计算（box-sizing） 16 | ---- 17 | 18 | CSS 的 `box-sizing` 属性指定了 box 的宽度和高度如何计算： 19 | 20 | 1.content-box 21 | 22 | 使用内容区域的宽度和高度： 23 | 24 | ``` 25 | width = content-width 26 | height = content-height 27 | ``` 28 | 29 | 2.border-box 30 | 31 | 包含边框、内边距和内容区域的总宽度和总高度： 32 | 33 | ``` 34 | width = border-left 35 | + padding-left 36 | + content-width 37 | + padding-right 38 | + border-right 39 | 40 | height = border-top 41 | + padding-top 42 | + content-height 43 | + padding-bottom 44 | + border-bottom 45 | ``` 46 | 47 | 参考：[box-model](http://zh.learnlayout.com/box-model.html) 48 | -------------------------------------------------------------------------------- /css/box-shadow.md: -------------------------------------------------------------------------------- 1 | 盒阴影(box-shadow) 2 | ==== 3 | 4 | box-shadow 5 | ---- 6 | 7 | 设置 box 的阴影。 8 | 9 | 可包括的属性： 10 | 11 | + h-shadow 阴影水平位置（右为正，左为负。默认为 0） 12 | + v-shadow 阴影垂直位置（下为正，上为负。默认为 0） 13 | + blur 模糊距离（可选，默认为 0） 14 | + spread 阴影尺寸（可选） 15 | + color 阴影颜色（可选，默认与边框颜色相同） 16 | + inset 内阴影（可选，不设置则为外阴影） 17 | 18 | 多重阴影 19 | ---- 20 | 21 | 在 box-shadow 中设置多组阴影数据，即可实现多重阴影： 22 | 23 | ``` 24 | box-shadow: 2px 2px 5px #CCC inset, 25 | 5px 5px 10px #AAF; 26 | ``` 27 | -------------------------------------------------------------------------------- /css/color.md: -------------------------------------------------------------------------------- 1 | CSS 颜色 2 | ==== 3 | 4 | CSS 中的许多属性都和颜色有关，如： 5 | 6 | ``` 7 | color 文本颜色 8 | background-color 背景颜色 9 | border-color 边框颜色 10 | outline-color 外框颜色 11 | ... 12 | ``` 13 | 14 | 颜色表示方式 15 | ---- 16 | 17 | ### 1.颜色名 18 | 19 | 这是最常见的颜色表示方式，使用浏览器预定义的名称来表示颜色： 20 | 21 | ``` 22 | color: red; 23 | ``` 24 | 25 | 详细的颜色名称列表，请参考：[Color Name List](http://www.ncdesign.org/html/samp/s030list.htm) 或 [HTML Color Chart](http://www.html-color-names.com/color-chart.php) 26 | 27 | ### 2.十六进制 28 | 29 | 十六颜色使用三组十六进制（00-FF）数字分别代表红色（R，red）、绿色（G，green）和蓝色（B，blue）： 30 | 31 | ``` 32 | color: #096A53； 33 | ``` 34 | 35 | 如果三组十六进制数的两个字符相同，则可以使用简写形式： 36 | 37 | ``` 38 | color: #66AA99; 39 | // 等于 40 | color: #6A9; 41 | ``` 42 | 43 | ### 3.RGB 44 | 45 | RGB 颜色同样使用三组数字（0-255）分别代表红色、绿色和蓝色： 46 | 47 | ``` 48 | color: rgb(80,150,30); 49 | ``` 50 | 51 | ### 4.RGBA 52 | 53 | RGBA 颜色在 RGB 颜色的基础上扩展了透明（alpha）通道： 54 | 55 | ``` 56 | color: rgba(80, 150, 30, 0.3); 57 | ``` 58 | 59 | 透明数值的范围是 0.0(完全透明)-1.0（完全不透明）。 60 | 61 | ### 5.HSL 62 | 63 | HSL 颜色使用三组数字分别代表色调（H，hue）、饱和度（S，saturation）和亮度（L，lightness）： 64 | 65 | ``` 66 | color: hsl(240,80%,60%); 67 | ``` 68 | 69 | + 色调的范围是 0-360（0/360 红色，120 绿色，240 蓝色），代表色盘的角度； 70 | + 饱和度的范围是 0%-100%（0% 灰色，100% 全彩色）； 71 | + 亮度的范围也是 0%-100%（0% 黑色，100% 白色）。 72 | 73 | ### 6.HSLA 74 | 75 | HSLA 颜色在 HSL 颜色的基础上扩展了透明通道： 76 | 77 | ``` 78 | color: hsla(240, 80%, 60%, 0.3); 79 | ``` 80 | -------------------------------------------------------------------------------- /css/column.md: -------------------------------------------------------------------------------- 1 | 多列(multi-column) 2 | ==== 3 | 4 | column-count 5 | ---- 6 | 7 | 设置元素内容划分的列数。 8 | 9 | 属性值： 10 | 11 | 1. auto 根据 column-width 等属性自动计算 12 | 2. n 划分为 n 列 13 | 14 | column-width 15 | ---- 16 | 17 | 设置列宽。 18 | 19 | 1. auto 自动计算列宽 20 | 2. 尺寸值 21 | 22 | column-span 23 | ---- 24 | 25 | 设置元素所跨列数（默认为 1）。 26 | 27 | 1. all 横跨所有列 28 | 2. n 横跨 n 列 29 | 30 | column-fill 31 | ---- 32 | 33 | ？？ 34 | 35 | column-gap 36 | ---- 37 | 38 | 设置列的间离。 39 | 40 | 属性值： 41 | 42 | 1. normal 默认（1 em） 43 | 2. 尺寸值 44 | 45 | column-rule-width 46 | ---- 47 | 48 | 设置列分割线的宽度。 49 | 50 | 属性值： 51 | 52 | 1. thin 53 | 2. medium 54 | 3. thick 55 | 4. 尺寸值 56 | 57 | column-rule-style 58 | ---- 59 | 60 | 设置列分割线的样式。 61 | 62 | column-rule-color 63 | ---- 64 | 65 | 设置列分割线的颜色。 66 | 67 | column-rule 68 | ---- 69 | 70 | 在同一个声明中设置列分割线属性。 71 | 72 | 可包括的属性： 73 | 74 | + column-rule-width 75 | + column-rule-style 76 | + column-rule-color 77 | -------------------------------------------------------------------------------- /css/content.md: -------------------------------------------------------------------------------- 1 | 内容生成(content) 2 | ==== 3 | 4 | content 5 | ---- 6 | 7 | 与 `:before` 和 `:after` 伪元素配合，用于插入内容。 8 | 9 | ``` 10 | elmt:before { 11 | content: "abc"; 12 | ... 13 | } 14 | ``` 15 | 16 | 属性值： 17 | 18 | 1. "string" 插入的文本 19 | 2. url("url") 插入的文件 20 | 3. attr(attr) 获取并插入 elmt 的 attr 属性值 21 | 4. counter(counter) 获取并插入计数器 counter 的值 22 | 23 | 使用 content 插入内容后，还可以继续为插入的内容添加样式： 24 | 25 | ``` 26 | elmt:before { 27 | content: "abc"; 28 | color: blue; 29 | ... 30 | } 31 | ``` 32 | 33 | counter-reset 34 | ---- 35 | 36 | 创建或重置计数器。 37 | 38 | 属性值： 39 | 40 | 1. none 不重置计数器 41 | 2. counter n 定义计数器 counter 并指定初始值 n（可选，默认为 0） 42 | 43 | counter-increment 44 | ---- 45 | 46 | 设置计数器的增量。 47 | 48 | 属性值： 49 | 50 | 1. none 无计数器增量（默认） 51 | 2. counter n 设置计数器 counter 的增量为 n（正数、负数或 0。可选，默认为 1） 52 | 53 | quotes 54 | ---- 55 | 56 | 设置包含嵌套引用的引号。 57 | 58 | 属性值： 59 | 60 | 1. none 61 | 2. a b c d 一级嵌套使用 ab，二级嵌套使用 cd 62 | 63 | 可用的引号字符： 64 | 65 | + " (%#34;) 双引号 66 | + ' (%#39;) 单引号 67 | + < (%#8249;) 左尖括号 68 | + > (%#8250;) 右尖括号 69 | + 《 (%#171;) 左书名号 70 | + 》 (%#187;) 右书名号 71 | + ` (%#8216;) 左单引号 72 | + ˊ (%#8217;) 右单引号 73 | + 〝 (%#8220;) 左双引号 74 | + 〞 (%#8221;) 右双引号 75 | + ** (%#8222;) 双引号 76 | -------------------------------------------------------------------------------- /css/declaration.md: -------------------------------------------------------------------------------- 1 | 声明（declaration） 2 | ==== 3 | 4 | @import 5 | ---- 6 | 7 | `@import` 声明用于将外部文件作为样式引入当前文件中： 8 | 9 | ```css 10 | @import './base.css'; 11 | @import url('../lib/bootstrap.css'); 12 | ``` 13 | 14 | 可以在 `@import` 声明中包含媒体查询语句，使引入的样式只能在特定条件下生效： 15 | 16 | ```css 17 | @improt '../mobile.css' (max-width: 480px); 18 | ``` 19 | 20 | `@import` 声明需要写在 CSS 文件的顶部。 21 | 22 | @charset 23 | ---- 24 | 25 | `@chartset` 用于声明 CSS 文件的编码（默认使用 UTF-8）。正确的指定编码，可以保证浏览器正常的执行该代码。 26 | 27 | ```css 28 | @chartset 'utf-8'; 29 | ``` 30 | 31 | 该声明也需要写在 CSS 文件的顶部。 32 | 33 | @media 34 | ---- 35 | 36 | `@media` 声明用于指定其范围内的样式会在何种条件下生效。可以支持的条件有： 37 | 38 | 1\. 设备类型 39 | 40 | + all 所有设备[默认] 41 | + aural 发音设备 42 | + braille 触摸设备（盲文） 43 | + handheld 手持设备（手机、平板） 44 | + print 打印机 45 | + projection 投影设备 46 | + screen 屏幕 47 | + tty 电传打字机 48 | + tv 电视机 49 | + embossed 转印设备 50 | 51 | 2\. 设备或屏幕属性 52 | 53 | + width 浏览器内容区域宽度 参考：[width-vs-device-width](http://www.sitepoint.com/media-queries-width-vs-device-width/) 54 | + min-width 浏览器内容区域最小宽度 55 | + max-width 浏览器内容区域最大宽度 56 | + height 浏览器内容区域高度 57 | + min-height 浏览器内容区域最小高度 58 | + max-height 浏览器内容区域最大高度 59 | + device-width 设备显示区域宽度 60 | + min-device-width 设备显示区域最小宽度 61 | + max-device-width 设备显示区域最大宽度 62 | + device-height 设备显示区域高度 63 | + min-device-height 设备显示区域最小高度 64 | + max-device-height 设备显示区域最大高度 65 | + aspect-ratio 浏览器内容区域宽高比 66 | + min-aspect-ratio 浏览器内容区域最小宽高比 67 | + max-aspect-ratio 浏览器内容区域最大宽高比 68 | + device-aspect-ratio 设备显示区域宽高比 69 | + min-device-aspect-ratio 设备显示区域最小宽高比 70 | + max-device-aspect-ratio 设备显示区域最大宽高比 71 | + color 72 | + min-color 73 | + max-color 74 | + color-index 75 | + min-color-index 76 | + max-color-index 77 | + monochrome 78 | + min-monochrome 79 | + max-monochrome 80 | + resolution 分辨率（dpi/dpcm） 81 | + min-resolution 82 | + max-resolution 83 | + scan 84 | + grid 85 | 86 | 3\. 设备方向（orientation） 87 | 88 | + landscape 横向 89 | + portrait 纵向 90 | 91 | ### 属性组合 92 | 93 | 上面的属性也可以通过两种方式进行组合： 94 | 95 | 1. `,` 分隔，代表多组条件 96 | 2. 使用逻辑操作符组合多个条件： 97 | 98 | + and 且 99 | + not 非 100 | + only 唯一 101 | 102 | ```css 103 | @media print { 104 | /* 只在打印机（或打印预览）中生效 */ 105 | } 106 | 107 | @media (min-width: 480px) and (max-width: 960px) { 108 | /* 只在内容区域宽度 >= 480px 且 <= 960px 是生效 */ 109 | } 110 | ``` 111 | 112 | @font-face 113 | ---- 114 | 115 | 用来定义外部字体。 116 | 117 | 参考：[font-face](./font-face.md) 118 | 119 | @page 120 | ---- 121 | 122 | 描述打印页面的声明。 123 | 124 | @keyframes 125 | ---- 126 | 127 | 用来定义动画关键帧的声明。 128 | 129 | 参考：[animation](./animation.md) 130 | -------------------------------------------------------------------------------- /css/dimension.md: -------------------------------------------------------------------------------- 1 | 尺寸(dimension) 2 | ==== 3 | 4 | 参考： 5 | 6 | width 7 | ---- 8 | 9 | 设置元素的宽度。 10 | 11 | 属性值： 12 | 13 | 1. auto 自动计算宽度[默认] 14 | 2. 尺寸值 15 | 3. 百分值（根据父元素的宽度计算） 16 | 17 | 如果指定了宽度，且未指定高度，则当内容超出一行时，会换行后重新从左往右排列。 18 | 19 | 如果内容宽度度超出了元素宽度度，则内容会溢出元素。可以通过 [`overflow`](./overflow.md) 控制内容溢出的处理方式。 20 | 21 | min-width 22 | ---- 23 | 24 | 设置元素的最小宽度（实际宽度等于或大于此值，不会小于此值） 25 | 26 | 属性值： 27 | 28 | 1. 尺寸值 29 | 2. 百分值（根据父元素的宽度计算） 30 | 31 | max-width 32 | ---- 33 | 34 | 设置元素的最大宽度（实际宽度等于或小于此值，不会打于此值） 35 | 36 | height 37 | ---- 38 | 39 | 设置元素的高度。 40 | 41 | 属性值： 42 | 43 | 1. auto 自动计算高度[默认] 44 | 2. 尺寸值 45 | 46 | 如果内容高度超出了元素高度，则内容会溢出元素。可以通过 [`overflow`](./overflow.md) 控制内容溢出的处理方式。 47 | 48 | min-height 49 | ---- 50 | 51 | 设置元素的最小高度（实际高度等于或大于此值，不会小于此值） 52 | 53 | max-height 54 | ---- 55 | 56 | 设置元素的最大高度（实际高度等于或小于此值，不会打于此值） 57 | -------------------------------------------------------------------------------- /css/filter.md: -------------------------------------------------------------------------------- 1 | opacity 2 | ---- 3 | 4 | 设置元素的透明度。 5 | 6 | 属性值： 7 | 8 | 1. alpha 透明度（0.0-1.0 0.0 代表完全透明，1.0 代表完全不透明） 9 | 10 | filter 11 | ---- 12 | 13 | 滤镜，主要应用于图像。 14 | 15 | 属性值： 16 | 17 | 1.grayscale() 灰度 18 | 19 | 2.sepia() 褐色 20 | 21 | 3.saturate() 饱和度 22 | 23 | 4.hue-rotate() 色向反转 24 | 25 | 5.invert() 反色 26 | 27 | 6.opacity() 透明度 28 | 29 | 7.brightness() 亮度 30 | 31 | 8.contrast() 对比度 32 | 33 | 9.blur() 模糊 34 | 35 | 10.drop-shadow() 阴影 36 | -------------------------------------------------------------------------------- /css/flex-box.md: -------------------------------------------------------------------------------- 1 | 弹性盒模型（flex-box） 2 | ==== 3 | 4 | 弹性盒模型扩展了传统的 [box-model](./box-model.md)，丰富了布局类型，增强了对不同屏幕的响应式设计。 5 | 6 | 相关概念 7 | ---- 8 | 9 | ![flex-terms](./images/flex-terms.png) 10 | 11 | ### 弹性容器（Flex container） 12 | 13 | 弹性元素的容器，其 `display` 为 `flex/inline-flex`。 14 | 15 | ### 弹性元素（Flex item） 16 | 17 | 弹性容器的子元素都是弹性元素。 18 | 19 | ### 轴（Axes） 20 | 21 | 弹性容器依据两个方向来排列子元素。横向的称为主轴，纵向的称为侧轴。 22 | 23 | ### 方向（Directions） 24 | 25 | 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束边缘代表了弹性子元素排列的起始和结束位置。 26 | 27 | ### 行（Lines） 28 | 29 | ### 尺寸（Dimensions） 30 | 31 | 开始 32 | ---- 33 | 34 | ```html 35 |
36 |
A
37 |
B
38 |
C
39 |
40 | ``` 41 | 42 | ```css 43 | .box { 44 | display: flex; 45 | flex-direction: row; 46 | } 47 | .item { 48 | flex: 1; 49 | } 50 | ``` 51 | 52 | 53 | 54 | 设置每一个 item 占据 1/3 的宽度，横向从左到右排列。 55 | 56 | ### 相关属性 57 | 58 | #### 1. display 59 | 60 | flex/inline-flex 设置元素为弹性元素 61 | 62 | ### 2. flex-direction 63 | 64 | 设置轴的方向，来影响弹性子元素的排列方式。 65 | 66 | + row 横向，自左向右[默认] 67 | + row-reverse 横向，自右向左 68 | + column 纵向，自上向下 69 | + column-reverse 纵向，自下向上 70 | 71 | ### 3. flex-grow 72 | 73 | 定义弹性子元素的拉伸，值为正整数。 74 | 75 | 在一条轴上，弹性子元素的宽度/高度计算方式为： 76 | 77 | + n 当前元素的 flex-grow 值； 78 | + m 该轴上所有元素的 flex-grow 和。 79 | 80 | ``` 81 | item-width = n / m 82 | ``` 83 | 84 | ### 4. flex-shirink 85 | 86 | 定义弹性子元素的缩放比例，值为正整数，默认为 1。 87 | 88 | 参考：[flex-shrink](http://www.css88.com/book/css/properties/flex/flex-shrink.htm) 89 | 90 | ### 5. flex-basis 91 | 92 | 定义弹性子元素缩放的基准值。 93 | 94 | 参考：[flex-basis](http://www.css88.com/book/css/properties/flex/flex-basis.htm) 95 | 96 | ### 6. flex 97 | 98 | 复合属性，包含： 99 | 100 | + flex-grow 101 | + flex-shirink 102 | + flex-basis 103 | 104 | ### 7. align-content 105 | 106 | 当弹性容器侧轴方向上有剩余空间时，控制每行相对于容器的对齐方式： 107 | 108 | + flex-start 从侧轴起点开始排列[默认] 109 | + flex-end 从侧轴终点开始排列 110 | + center 所有子元素向侧轴中心排列 111 | + space-between 子元素等间距排列，两端无间距 112 | + space-around 子元素等间距排列，两端间距为子元素间距的一半 113 | + stretch 拉伸所有子元素，来填满侧轴的长度 114 | 115 | 参考：[align-content](http://www.css88.com/book/css/properties/flex/align-content.htm) 116 | 117 | ### 8. align-items 118 | 119 | 控制子元素间的对齐方式： 120 | 121 | + flex-start 相对于侧轴起点顶部对齐[默认] 122 | + flex-end 相对于侧轴终点底部对齐 123 | + center 相对于侧轴中点中心对齐 124 | + baseline 相对于侧轴起点中心对齐 125 | + stretch 相对于侧轴起点和终点两端对齐（拉伸所有子元素，来填满侧轴的长度） 126 | 127 | 参考：[align-items](http://www.css88.com/book/css/properties/flex/align-items.htm) 128 | 129 | ### 9. align-self 130 | 131 | 控制子元素相对于容器的对齐方式： 132 | 133 | + auto 自动[默认] 134 | + flex-start 相对于侧轴起点顶部对齐 135 | + flex-end 相对于侧轴终点底部对齐 136 | + center 相对于侧轴中点中心对齐 137 | + baseline 与 `align-item: baseline;` 效果相同 138 | + stretch 与 `align-item: stretch;` 效果相同 139 | 140 | ### 10. flex-wrap 141 | 142 | 设置子元素是否可以换行： 143 | 144 | + nowrap 不能换行，所有元素显示在一行中[默认] 145 | + wrap 可以换行，当宽度超出容器后换行 146 | + wrap-reverse 与 wrap 作用相同，但方向相反 147 | 148 | ### 11. flex-flow 149 | 150 | 复合属性，包含： 151 | 152 | + flex-direction 153 | + flex-wrap 154 | 155 | ### 12. justify-content 156 | 157 | 设置子元素在主轴上相对于容器的对齐方式，与 `align-content` 表现类似： 158 | 159 | + flex-start 160 | + flex-end 161 | + center 162 | + space-between 163 | + space-around 164 | 165 | ### 13. order 166 | 167 | 用来指定子元素的顺序，值为整数。 168 | 169 | 参考：[order](http://www.css88.com/book/css/properties/flex/order.htm) 170 | -------------------------------------------------------------------------------- /css/float.md: -------------------------------------------------------------------------------- 1 | 浮动（floating） 2 | ==== 3 | 4 | float 5 | ---- 6 | 7 | 设置元素是否浮动。 8 | 9 | `float` 最早被设计为用来进行图文混排的，即使文本环绕图片的排版方式。目前往往应用于不同类型的布局（类似表格的横向布局，多列布局等）。 10 | 11 | ![float](./images/float.png) 图片来自 [张鑫旭](http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/) 12 | 13 | 浮动的元素会脱离正常的文档流，宽度尽量收窄，并向左或向右移动，直到碰到父元素左右边缘或者其他浮动元素的边缘停止。 14 | 15 | 浮动的元素不在占据父元素的空间，所以父元素高度的计算不会包含已经浮动的元素。当浮动的元素高度超出父元素时，会溢出父元素（父元素塌陷），可以使用多种方式来闭合浮动或清除浮动。 16 | 17 | 属性值： 18 | 19 | 1. none 不浮动（默认） 20 | 2. left 向左浮动 21 | 3. right 向右浮动 22 | 23 | clear 24 | ---- 25 | 26 | 设置清除是否浮动。 27 | 28 | 属性值： 29 | 30 | 1. none 不清除浮动（默认） 31 | 2. left 清除左侧浮动 32 | 3. right 清除右侧浮动 33 | 4. both 清除两侧的浮动 34 | 35 | 闭合浮动和清除浮动 36 | ---- 37 | 38 | 参考： 39 | -------------------------------------------------------------------------------- /css/font-face.md: -------------------------------------------------------------------------------- 1 | 自定义字体(@font-face) 2 | ==== 3 | 4 | 格式支持（[caniuse.com](http://caniuse.com/#feat=fontface "font-face")）： 5 | 6 | + eot IE: 6+ 7 | + woff IE: 9+; FF: 3.6+; Chrome: 5+; Safari: 5.1+; Opera: 11.1+; 8 | + SVG Chrome: 4+; Safari: 3.2+; Opera: 9.0+ 9 | + ttf/otf IE 9+(partial); FF: 3.5+; Chrome: 4.0+; Safari: 3.1+; Opera: 10.0+ 10 | 11 | @font-face 12 | ---- 13 | 14 | 用于声明自定义字体： 15 | 16 | ```css 17 | @font-face { 18 | font-family: 'font-name'; 19 | src: url('font-file'); 20 | ... 21 | } 22 | ``` 23 | 24 | ### @font-face 声明中必须有的属性： 25 | 26 | 1.font-family 27 | 28 | 用于定义字体的名称，在引用处通过 `font-family` 属性使用该字体。 29 | 30 | ``` 31 | // 引用自定义字体 32 | font-family: 'font-name'; 33 | ``` 34 | 35 | 2.src 36 | 37 | 用于定义字体文件的 URL。 38 | 39 | 可定义多组 URL 值，用于设置不同格式的字体，来支持不同的浏览器。 40 | 41 | ``` 42 | src: url('file1'), url('file2'); 43 | ``` 44 | 45 | ### @font-face 声明中可选的属性： 46 | 47 | 可选属性用于定义自定义字体的默认样式。 48 | 49 | + font-stretch 50 | + font-style 51 | + front-weight 52 | + unicode-range 53 | 54 | 设置字体支持的 Unicode 字符范围。 55 | 56 | __注意：__ @font-face 声明需要放置到所有引用该字体的位置之前，以保证字体在引用时已经加载完成。 57 | -------------------------------------------------------------------------------- /css/font.md: -------------------------------------------------------------------------------- 1 | 字体(font) 2 | ==== 3 | 4 | font-family 5 | ---- 6 | 7 | 设置字体。 8 | 9 | 属性值： 10 | 11 | 1. font_list 字体名称或字体系列名称 12 | 13 | 可设置多个值（使用 `,` 分隔），如果无法识别第一个，会依次向后选择一个支持的字体。如果全部无法识别，则使用默认字体。 14 | 15 | 也可以使用外部字体文件： 16 | 17 | 自定义字体(@font-face) 18 | ---- 19 | 20 | 参考：[font-face](./font-face.md) 21 | 22 | font-size 23 | ---- 24 | 25 | 设置字体大小。 26 | 27 | 属性值： 28 | 29 | 1. xx-small|x-small|small|medium|large|x-large|xx-large 不同的相对尺寸（默认为 medium） 30 | 2. smaller 比父元素更小 31 | 3. larger 比父元素更大 32 | 4. 尺寸值 33 | 5. 百分值 （与父元素的字体大小相乘，作为字体大小） 34 | 35 | font-size-adjust 36 | ---- 37 | 38 | font-stretch 39 | ---- 40 | 41 | font-style 42 | ---- 43 | 44 | 设置字体样式。 45 | 46 | 属性值： 47 | 48 | 1. normal 标准样式（默认） 49 | 2. italic 斜体 50 | 3. oblique 倾斜 51 | 52 | font-variant 53 | ---- 54 | 55 | 设置是否使用小型大写字母显示文本。 56 | 57 | 属性值： 58 | 59 | 1. none 标准文本（默认） 60 | 2. small-caps 使用小型大写字母 61 | 62 | font-weight 63 | ---- 64 | 65 | 设置文本粗细。 66 | 67 | 属性值： 68 | 69 | 1. normal 默认 70 | 2. bold 粗体 71 | 3. bolder 更粗 72 | 4. lighter 更细 73 | 5. 100|200|...|900 （400=normal，700=bold） 74 | 75 | font 76 | ---- 77 | 78 | 在同一个声明中设置字体属性。 79 | 80 | 可包括的属性： 81 | 82 | + font-style 83 | + font-variant 84 | + font-weight 85 | + font-size/line-height 86 | + font-family 87 | + line-height 88 | 89 | 建议使用此顺序指定字体属性。其中的属性均为可选值，但建议至少包括 `font-size` 和 `font-family` 属性。 90 | -------------------------------------------------------------------------------- /css/gradient.md: -------------------------------------------------------------------------------- 1 | 背景渐变(background-gradient) 2 | ==== 3 | 4 | liner-gradient() 5 | ---- 6 | 7 | 线性渐变。 8 | 9 | ``` 10 | background-image: liner-gradient(left, #FFF, #339); 11 | ``` 12 | 13 | 可能的参数组合： 14 | 15 | liner-gradient(point/angle, stop1, stop2...) 16 | 17 | point 起点： 18 | 19 | + top 顶部（从上到下的渐变） 20 | + bottom 底部（从下到上的渐变） 21 | + left 左侧（从左到右的渐变） 22 | + right 右侧（从右到左的渐变） 23 | + top left 左上角（从左上到右下的渐变） 24 | + top right 右上角（从右上到左下的渐变） 25 | + bottom left 右上角（从右上到左下的渐变） 26 | + bottom right 右下角（从右下到左上的渐变） 27 | + 不指定该值，则默认为 top 28 | 29 | angle 渐变角度： 30 | 31 | + 45deg 从右侧开始，逆时针 45° 32 | 33 | stop 标记位置（color position）： 34 | 35 | 1. 多个 color，不指定位置，则位置平均分布 36 | color1, color2 = color1 0%, color2 100% 起点为 color1，终点为 color2 37 | color1, color2, color3 = color1 0%, color2 50%, color3 100% 起点为 color1，中点为 color2，终点为 color3 38 | 39 | 2. 多个 color position，按照指定的位置分布颜色 40 | 3. 有的 stop 指定了位置，有的未指定，则未指定位置的 stop 平均分布 41 | 42 | radial-gradient() 43 | ---- 44 | 45 | 径向渐变。 46 | 47 | ``` 48 | background-image: radial-gradient(#FFF, #339); 49 | ``` 50 | 51 | 可能的参数组合： 52 | 53 | radial-gradient(center, shap size, stop1, stop2...) 54 | 55 | center 渐变中心： 56 | 57 | + top|center|bottom * left|center|right 的组合 58 | + a b 尺寸值 59 | + a% b% 百分值 60 | + top|center|bottom|a|a% 指定一个值，第二个值为 center/50% 61 | + 默认为 center center 62 | 63 | shap 渐变形状： 64 | 65 | + circle 圆 66 | + ellipse 椭圆（默认） 67 | 68 | size 渐变范围： 69 | 70 | + closest-side 渐变外围到达最近的边 71 | + farthest-side 渐变外围到达最远的边 72 | + closest-corner 渐变范围到达最近的角 73 | + farthest-corner 渐变范围到达最远的角 74 | + contain 渐变包含在元素框中 75 | + cover 渐变覆盖整个元素框 76 | 77 | repeating-linear-gradient() 78 | ---- 79 | 80 | 重复线性渐变。 81 | 82 | 可能的参数组合： 83 | 84 | repeating-linear-gradient(point, stop1, stop2, stop3, stop4) 85 | 86 | point 起点 87 | 88 | stop 1-4 重复渐变片段（只有 stop1 可省略 position） 89 | 90 | repeating-radial-gradient() 91 | ---- 92 | 93 | 重复径向渐变。 94 | 95 | 可能的参数组合： 96 | 97 | radial-gradient(center, shap size, stop1, stop2, stop3, stop4) 98 | 99 | 属性包含 circle contain 时，会导致 Chrome 崩溃。 100 | -------------------------------------------------------------------------------- /css/images/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/css/images/box-model.png -------------------------------------------------------------------------------- /css/images/flex-terms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/css/images/flex-terms.png -------------------------------------------------------------------------------- /css/images/float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/css/images/float.png -------------------------------------------------------------------------------- /css/images/margin-collapse-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/css/images/margin-collapse-1.png -------------------------------------------------------------------------------- /css/images/margin-collapse-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LearnShare/FE/32b79a214956e1d1d4cbf8f3b39820f04dc1f032/css/images/margin-collapse-2.png -------------------------------------------------------------------------------- /css/list.md: -------------------------------------------------------------------------------- 1 | 列表(list) 2 | ==== 3 | 4 | 列表样式属性针对 `