{"id":20340683,"url":"https://github.com/chanmenglin/webbase","last_synced_at":"2026-04-19T01:07:33.697Z","repository":{"id":171593573,"uuid":"163050139","full_name":"ChanMenglin/WebBase","owner":"ChanMenglin","description":"WebBase(Web 基础)","archived":false,"fork":false,"pushed_at":"2019-06-06T06:37:11.000Z","size":245939,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T18:35:40.140Z","etag":null,"topics":["base","block-inline","border-radius","box-shadow","css","flexbox","html","inline","mixin-css","scss-mixin","text-shadow","transition","web","webpage","website"],"latest_commit_sha":null,"homepage":"https://chanmenglin.github.io/WebBase/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChanMenglin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-25T05:48:48.000Z","updated_at":"2019-06-06T06:37:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"82ed6f65-3d94-4b11-b33d-830cd3600aba","html_url":"https://github.com/ChanMenglin/WebBase","commit_stats":null,"previous_names":["chanmenglin/webbase"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMenglin%2FWebBase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMenglin%2FWebBase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMenglin%2FWebBase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMenglin%2FWebBase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanMenglin","download_url":"https://codeload.github.com/ChanMenglin/WebBase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241867692,"owners_count":20033816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["base","block-inline","border-radius","box-shadow","css","flexbox","html","inline","mixin-css","scss-mixin","text-shadow","transition","web","webpage","website"],"created_at":"2024-11-14T21:23:07.291Z","updated_at":"2026-04-19T01:07:28.646Z","avatar_url":"https://github.com/ChanMenglin.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Base(Web 基础)\n\n本仓库包含部分 HTML 知识及全面详实的 CSS 知识。便于开发中的快速查询。\n\n\u003e 前置知识：对 HTML5、CSS3 有一定了解。\n\u003e 说明：本仓库的名词并不专业严谨，只求便于理解。\n\n\u003e 在阅读以下内容之前可先阅读： [HTML5\u0026CSS3 basic (HTML5 和 CSS3 基础)](https://chanmenglin.github.io/HTML5-CSS3-basic/) | \n[Github](https://github.com/ChanMenglin/HTML5-CSS3-basic)  \n\n# 目录（Contents）\n\n* [1. HTML](#1-html)\n    * [1.1 HTML 常见元素](#11-html-常见元素)\n        * [1.1.1 head 元素](#111-head-元素)\n        * [1.1.2 body 元素](#112-body-元素)\n    * [1.2 HTML 元素分类](#12-html-元素分类)\n    * [1.3 HTML 元素嵌套关系](#13-html-元素嵌套关系)\n    * [1.4 HTML 元素的默认样式](#14-html-元素的默认样式)\n* [2. CSS](#2-css)\n    * [2.1 CSS 基础](#21-css-基础)\n        * [2.1.1 CSS 基本规则](#211-css-基本规则)\n        * [2.1.2 选择器](#212-选择器)\n            * [2.1.2.1 选择器的分类](#2121-选择器的分类)\n            * [2.1.2.2 选择器的权重](#2122-选择器的权重)\n    * [2.2 CSS 布局](#22-css-布局)\n        * [2.2.1 非布局样式](#221-非布局样式)\n            * [2.2.1.1 文字 - 字体](#2211-文字---字体)\n            * [2.2.1.2 文字 - 行高](#2212-文字---行高)\n    * [2.3 [CSS 布局]](#23-css-布局)\n        * [2.3.1 table 布局](#231-table-布局)\n        * [2.3.2 display and position](#232-display-and-position)\n            * [2.3.2.1 盒子模型](#2321-盒子模型)\n            * [2.3.2.2 display - 元素的显示类型](#2322-display---元素的显示类型)\n            * [2.3.2.3 position - 元素的位置](#2323-position---元素的位置)\n        * [2.3.3 flexbox 布局](#233-flexbox-布局)\n        * [2.3.4 float 布局](#234-float-布局)\n        * [2.3.5 inline-block 布局](#235-inline-block-布局)\n        * [2.3.6 响应式布局](#236-响应式布局)\n    * [2.4 CSS 效果](#24-css-效果)\n        * [2.4.1 box-shadow 阴影](#241-box-shadow-阴影)\n        * [2.4.2 text-shadow 文字阴影](#242-text-shadow-文字阴影)\n        * [2.4.3 border-radius 圆角](#243-border-radius-圆角)\n        * [2.4.4 background 背景](#244-background-背景)\n        * [2.4.5 clip-path 裁剪](#245-clip-path-裁剪)\n    * [2.5 CSS 动画](#25-css-动画)\n        * [2.5.1 transition 补间动画](#251-transition-补间动画)\n        * [2.5.2 animations(keyframe) 关键帧动画](#252-animationskeyframe-关键帧动画)\n    * [2.6 CSS 预处理器](#26-css-预处理器)\n        * [2.6.1 预处理器之间的语法对照表](#261-预处理器之间的语法对照表)\n            * [2.6.1.1 嵌套](#2611-嵌套)\n            * [2.6.1.2 变量](#2612-变量)\n            * [2.6.1.3 mixin (混入)](#2613-mixin-混入)\n            * [2.6.1.4 extend (继承)](#2614-extend-继承)\n            * [2.6.1.5 loop (循环)](#2615-loop-循环)\n            * [2.6.1.6 import (模块化)](#2616-import-模块化)\n    * [2.7 CSS 工程化](#27-css-工程化)\n\n[back to top]: #-目录contents\n\n## 1. HTML\n\n[h5o - HTML 大纲算法工具](http://h5o.github.io)\n\n### 1.1 HTML 常见元素\n\n#### 1.1.1 head 元素\n\nhead 元素 不会在页面上留下直接的内容，主要为页面相关资源及信息描述。\n\n* 声明 - [meta](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)\n    * `\u003cmeta charset='utf-8'\u003e` - `charset`表示页面使用的字符集\n    * `\u003cmate name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no‘\u003e` - 控制缩放（此属性对多端适配非常有用）\n        * `name='viewport'` - 视口，表示页面显示的范围\n        * `width=device-width` - 显示宽度，`device-width` - 此处为设备宽度\n        * `initial-scale=1.0` - 默认缩放，此处为1\n        * `maximum-scale=1.0` - 最大缩放，此处为1\n        * `user-scalable=no` - 用户缩放，此处为不允许用户缩放\n* 标题 - [title](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/title)\n* 样式 - [style](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style)\n* 链接 - [link](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)\n* 脚本 - [script](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script)\n* 制定基础路径 - [base](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base)`\u003cbase href=\"\" /\u003e`（较少使用，设置此标签则表示本页面中所有链接都基于此路径）\n\n[back to top]\n\n#### 1.1.2 body 元素\n\nbody 元素 的内容会直接出现在页面上。\n\n\u003e 括号中的内容为对应标签在 HTML5 中的语义，更多内容可访问：\nhttps://developer.mozilla.org/zh-CN/docs/Glossary/语义#语义化元素\n\n* 块级元素 - div / section（文章、文字） / article（文章） / aside（侧边栏、广告） / nav（菜单、导航） / header（头部） / footer（尾部） / i（icon 图标）\n* 段落元素 - p\n* 行内元素 - span / label / em（强调 - 斜体） / strong（强调 - 粗体）\n* 表格元素 - [table](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table) / thead / tbody / tr / td / th\n    * td\n        * `colspan` - 跨列\n        * `rowspan` - 跨行\n* 列表元素 - ul / ol / li / dt / dd\n* 表单元素 - form / [input](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input) / [select](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select) / [textarea](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea) / [button](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)\n    * placeholder - 表单的默认显示（提示）内容\n    * [form](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form)\n        * `target` - 表单提交的地址\n        * `method` - 表单提交的方式（GET/POST）\n        * `enctype` - (POST请求时)提交时使用的编码格式\n    * button\n        * `type` - 按钮类型\n            * `button`普通按钮\n            * `submit`提交按钮（form中生效），`input` 中 `type='submit'` 与此作用相同\n            * `reset`重置按钮（form中生效）\n* 链接 - a / img\n    * [a](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)\n        * `a[href]` - 链接地址\n        * `a[target]` - 指定在哪里打开链接，`_self`(默认)在当前窗口打开；`_blank`新窗口打开\n    * img\n        * `img[src]` - 图片地址\n        * `img[alt]` - 替换资源，图片不可用时使用\n\n\u003e 延伸：\n\u003e [HTML 参考\n](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference) | [HTML5\n](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5) | [HTML表单指南\n](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms) | [SEO(语义\n)](https://developer.mozilla.org/zh-CN/docs/Glossary/语义)\n\n[back to top]\n\n### 1.2 HTML 元素分类\n\n按默认样式分类： 块级 block、行内 inline、inline-block\n\n按内容分类：\nhttps://www.w3.org/TR/html5/dom.html#kinds-of-content\n\n[back to top]\n\n### 1.3 HTML 元素嵌套关系\n\n* 块级元素可以包含行内元素\n* 块级元素不一定能包含块级\n* 行内元素一般不能包含块级元素\n\n\u003e 延伸：[Text-level semantics](https://www.w3.org/TR/html5/textlevel-semantics.html) | [22 Transitional Document Type Definition](https://www.w3.org/TR/1999/REC-html401-19991224/sgml/loosedtd.html) | [Allowed nesting of elements in HTML 4 (and XHTML 1.0)](http://jkorpela.fi/html/nesting.html)\n\n[back to top]\n\n### 1.4 HTML 元素的默认样式\n\n浏览器会自动为一些元素加默认样式。\n\n[CSS Reset](https://cssreset.com)\n[CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)\n[YUI CSS Reset](https://cssreset.com/scripts/yahoo-css-reset-yui-3/)\n\nCSS Reset 重置默认样式\n[normalize.css](http://necolas.github.io/normalize.css/) |\n[Github](https://github.com/necolas/normalize.css/)\n\n[ex](Code/cssreset.css)\n\n[back to top]\n\n## 2. [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS)\n\n\u003e CSS：层叠样式表（Cascading Style Sheet）\n[CSS](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS) |\n[CSS 参考\n](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)\n[CSS 教程\n](https://developer.mozilla.org/zh-CN/docs/Learn/CSS) |\n[CSS 文档\n](https://developer.mozilla.org/zh-CN/docs/Web/CSS)\n\n[back to top]\n\n### 2.1 CSS 基础\n\n#### 2.1.1 CSS 基本规则\n\n```text\n选择器 {\n    属性(Property): 值(Value);\n    ...\n}\n```\n\n\u003e 值后面的分号(`;`)可以不加，但建议为每一行加上分号\n\n[back to top]\n\n#### 2.1.2 [选择器](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Selectors)\n\n* 匹配 HTML 元素\n* 有不同的匹配规则\n* 多个选择器可叠加\n\n[back to top]\n\n##### 2.1.2.1 [选择器的分类](https://developer.mozilla.org/zh-CN/search?q=选择器\u0026topic=api\u0026topic=css\u0026topic=canvas\u0026topic=html\u0026topic=http\u0026topic=js\u0026topic=svg\u0026topic=standards\u0026topic=webdev\u0026topic=webext\u0026topic=webgl\u0026topic=apps\u0026topic=mobile)\n\n1. 元素选择器 - a\n2. [伪元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements)选择器 - ::before\n3. 类选择器 - .class-name\n4. 属性选择器 - [Property-name=Property-value]\n5. [伪类](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)选择器 - :hover\n6. ID 选择器 - #id-name\n7. 否定选择器 - :not(...)\n8. 通用选择器 - * (匹配所有元素)\n9. [组合选择器](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors)\n\n[back to top]\n\n##### 2.1.2.2 [选择器的权重](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity)\n\n按先后顺序，同一级别下权重相同，不同级别下数值越小权重越高：\n\n1. ID 选择器\n2. 类 属性 伪类\n3. 元素 伪元素\n4. 其它\n\n\u003e 在同一元素被多个选择器选中时，浏览器会优先应用优先级较低的选择器的样式，再应用优先级高的选择器的样式，如果设定了重复的样式，则会使用优先级高的选择器的样式。\n\n属性生效的其它规则：\n\n* !important 优先级最高（除了另一个!important，谁不可覆盖）\n* 内联样式 优先级高（高于 ID 选择器）\n* 相同权重 后写的生效\n\n[back to top]\n\n### 2.2 CSS [布局](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout)\n\n#### 2.2.1 非布局样式\n\n* 文字 - [字体](#2211-文字---字体)、字重(font-weight)、颜色、大小、[行高](#2212-文字---行高)\n* 盒子 - 背景、边框\n* 页面 - 滚动、换行\n* 装饰性样式 - 粗体(font-weight)、斜体(font-style:itatic)、下划线(text-decoration)\n* 其它 - 指针(cursor:point)、[CSS Hack](https://en.wikipedia.org/wiki/CSS_hack) (目前较少使用)\n\n[back to top]\n\n##### 2.2.1.1 文字 - 字体\n\n* 字体族（使用字体族时不要加引号）\n    serif(衬线字体)、sans-serif(非衬线字体)、monospace(等宽字体)、cursive(手写体)、fantasy(花体)\n* 多字体（fallback）\n* [网络字体、自定义字体](#网络字体\\自定义字体)\n* iconfont: https://www.iconfont.cn\n\n\u003e 在声明字体时先写平台独有的字体再加字体族是一个好的习惯\n\u003e ```css\n\u003e font-family: \"PingFang SC\", \"Microsoft Yahei\", monospace;\n\u003e ```\n\u003e 由于苹果用户在安装Office后也会有 `Microsoft Yahei`，但 `Microsoft Yahei` 在Mac上的效果不如 `PingFang SC` 因此将 `PingFang SC` 在前面\n\n[back to top]\n\n###### 网络字体\\自定义字体\n\n```css\n/* 声明一个字体 */\n@font-face {\n    font-family: \"IF\";\n    src: url(\"...\")\n}\nfont-family: \"IF\";\n```\n[back to top]\n\n##### 2.2.1.2 文字 - 行高\n\n行高由 line box 的高度决定，line box 的高度由 inline box 的高度决定\n\n[back to top]\n\n### 2.3 [CSS 布局](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout)\n\n常用布局：\n\n* [table 表格布局](#231-table-布局)\n* [float 浮动 + margin](#234-float-布局)\n* [inline-block 布局](#235-inline-block-布局)\n* [flexbox 布局](#233-flexbox-布局)\n\n[back to top]\n\n#### 2.3.1 table 布局\n\n```html\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003c!-- \u003cth\u003e\u003c/th\u003e会将标题加粗显示,此处为示范，实际生产中不建议将\u003ctd\u003e同\u003cthead\u003e混用 --\u003e\n        \u003ctd\u003e标题1\u003c/td\u003e\u003ctd\u003e标题2\u003c/td\u003e\u003cth\u003e加粗标题\u003c/th\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e1-1\u003c/td\u003e\u003ctd\u003e1-2\u003c/td\u003e\u003ctd\u003e1-3\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n           \u003ctd colspan=\"2\"\u003e2-1\b (跨两列)\u003c/td\u003e\u003ctd  rowspan=“2”\u003e2-3 (跨两行)\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n           \u003ctd\u003e3-1\u003c/td\u003e\u003ctd\u003e3-2\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n```\n\n```html\n\u003cstyle\u003e\n    .table {\n        display: table;\n    }\n    .table-row {\n        display: table-row;\n    }\n    .table-cell {\n        display: table-cell;\n    }\n\u003c/style\u003e\n\u003cdiv class=\"table\"\u003e\n    \u003cdiv class=\"table-row\"\u003e\n        \u003cdiv class=\"table-cell\"\u003e1-1\u003c/div\u003e\n        \u003cdiv class=\"table-cell\"\u003e1-2\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"table-row\"\u003e\n        \u003cdiv class=\"table-cell\"\u003e2-1\u003c/div\u003e\n        \u003cdiv class=\"table-cell\"\u003e2-2\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n[back to top]\n\n#### 2.3.2 display and position\n\n##### 2.3.2.1 盒子模型\n\n![盒模型](img/盒模型.jpg)\n\n盒子占用的空寂 = height/width(content) + padding + border\n\n[back to top]\n\n##### 2.3.2.2 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) - 元素的显示类型\n\n常用属性：\n\n* block(块级元素) - 有独立宽高，默认占据一行\n* inline(内联元素/行内元素) - 没有独立宽高，默认不独立占据一行（类似于文本）\n* inline-block(行内快极元素) - 对内相当于block有独立的宽高；对外相当于inline不会独立占据一行（类似于文本）\n\n[back to top]\n\n##### 2.3.2.3 [position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) - 元素的位置\n\n常用属性：\n\n* static(静态布局，默认) - 文档流。不可添加 z-index 样式。\n* relative(相对定位) - 相对于元素本身，relative 的偏移(top/left/right)，相对于元素本身，偏移后占用空间的计算仍按偏移之前的位置进行计算（偏移时不会改变它占据的空间）。可添加 z-index 样式定义层级。\n* absolute(绝对定位) - 相对于最近的 relative 或 absolute(父元素) 定位，如果找不到则相对于 body 定位，脱离文档流，不会对其它元素的布局产生影响。可添加 z-index 样式定义层级。\n* fixed(固定定位) - 相对于可视区域定位，脱离文档流，不会对其它元素的布局产生影响。可添加 z-index 样式定义层级。\n\n[back to top]\n\n#### 2.3.3 [flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox) 布局\n\n* 弹性盒子\n* 盒子不来就是并列的\n\n[兼容性](https://caniuse.com/#search=flexbox) 不好，慎用\n\n```html\n\u003cstyle\u003e\n    .container{\n        width:800px;\n        height:200px;\n        display: flex;\n    }\n    .left{ /* 固定宽度 */\n        background: red;\n        display: flex;\n        width:200px;\n    }\n    .right{ /* 自适应宽度 */\n        background: blue;\n        display: flex;\n        flex:1;\n    }\n\u003c/style\u003e\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"left\"\u003e\n        左\n    \u003c/div\u003e\n    \u003cdiv class=\"right\"\u003e\n        右\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n[back to top]\n\n#### 2.3.4 [float 布局](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats)\n\n* 元素“浮动”\n* 脱离文档流 - 不影响其他元素的布局\n* 不脱离文本流 - 影响文本的布局\n\n对自身的影响：\n\n* 形成快（BFC）- 自主控制宽高，无论是什么元素\n* 位置尽量靠上\n* 位置尽量靠左（float: left）/右（float: right）\n\n对兄弟元素的影响：\n\n* 上面一般贴非 float 元素\n* 身边贴 float 元素\n* 不影响其它元素的位置\n* 影响其它快极元素的文本\n\n对父级元素的影响：\n\n* 从布局上”消失“\n* 高度塌陷 - 可添加 `overflow: auto` 解决此问题\n\n```css\n/* 解决 float 元素的父元素的影响 */\n.container {\n    content: ' ';\n    clear: both; /* 清除浮动 */\n    display: block;\n    visibility: hidden;\n    height: 0;\n}\n```\n\n```html\n\u003cstyle\u003e\n    .container{\n        width:800px;\n        height:200px;\n    }\n    .left{\n        background:red;\n        /* float:left; */\n        /* height:100%; */\n        width:200px;\n        position: absolute;\n        height:200px;\n    }\n    .right{\n        background:blue;\n        float:right;\n        width:200px;\n        height:100%;\n    }\n    .middle{\n        margin-left:200px;\n        margin-right:200px;\n    }\n\n\u003c/style\u003e\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"left\"\u003e\n        左\n    \u003c/div\u003e\n    \u003cdiv class=\"right\"\u003e\n        右\n    \u003c/div\u003e\n    \u003cdiv class=\"middle\"\u003e\n        中间\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n[back to top]\n\n#### 2.3.5 inline-block 布局\n\n* 像文本一样排 block 元素\n* 没有清除浮动的问题\n* 需要处理间隙\n\n```html\n\u003cstyle\u003e\n    .container{\n        width:800px;\n        height:200px;\n        font-size:0;\n    }\n    .left{\n        font-size:14px;\n        background:red;\n        display: inline-block;\n        width:200px;\n        height:200px;\n    }\n    .right{\n        font-size:14px;\n        background:blue;\n        display: inline-block;\n        width:600px;\n        height:200px;\n    }\n\n\u003c/style\u003e\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"left\"\u003e\n        左\n    \u003c/div\u003e\n    \u003cdiv class=\"right\"\u003e\n        右\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n[back to top]\n\n#### 2.3.6 响应式布局\n\n* 在不同设备上正常使用\n* 一般主要处理屏幕大小\n* 主要方法：\n    * 隐藏 + 折行 + 自适应空间\n    * rem(根据字体大小调整) / [viewport](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport) / [media query(媒体查询)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/媒体查询)\n\nviewport - `\u003cmate name='viewport' content='width=device-wid th, initial-scale=1.0, maximum-scale=1.0, user-scalable=no‘\u003e`\n\n[back to top]\n\n### 2.4 CSS 效果\n\n效果属性：\n\n* [box-shadow](#241-box-shadow-阴影) - 投影(阴影)\n* [text-shadow](#242-text-shadow-文字阴影) - 文字投影(阴影)\n* [border-radius](#243-border-radius-圆角) - 圆角\n* [background](#244-background-背景) - 背景\n* [clip-path](#245-clip-path-裁剪) - 裁剪\n\n[back to top]\n\n#### 2.4.1 [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) 阴影\n\n![box-shadow](img/box-shadow.jpg)\n\n* 营造立体感（层次感）\n* 充当没有宽度的边框 - `box-shadow:0, 0, 0, 5px, #000;` 就可以画出一个 5px 宽的黑色边框。\n* 特殊效果\n\n[back to top]\n\n#### 2.4.2 [text-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow) 文字阴影\n\n* 营造立体感（层次感）\n* 品质感\n\n[back to top]\n\n#### 2.4.3 [border-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) 圆角\n\n* 圆角矩形 `border-radius: 10px;`\n* 圆形 `border-radius: 50%;`\n* 半圆 / 扇形 `border-top-left-radius: 100%;`\n* 奇怪的角\n\n[back to top]\n\n#### 2.4.4 [background](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background) 背景\n\n* 纹理、图案\n* 渐变\n* [雪碧图](https://zh.wikipedia.org/wiki/精灵图)动画\n* 背景图尺寸适应\n\n[back to top]\n\n#### 2.4.5 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 裁剪\n\n* 裁剪容器\n* 按几何图形裁剪\n* 自定义图形裁剪\n\n[back to top]\n\n### 2.5 CSS 动画\n\nCSS 中动画的类型：\n\n* [transition](#251-transition-补间动画) 补间动画\n* [keyframe](#252-animationskeyframe-关键帧动画) 关键帧动画\n* 逐帧动画\n\n[back to top]\n\n#### 2.5.1 [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions) 补间动画\n\n[transition-timing-function(timing/easing)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function)\n\n[CSS 默认 easing](https://easings.net/zh-cn) | [Github](https://github.com/ai/easings.net)\n\n[自定义 easing](https://matthewlein.com/tools/ceaser)\n\n[back to top]\n\n#### 2.5.2 [animations(keyframe)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations) 关键帧动画\n\n### 2.6 CSS 预处理器\n\n* 基于 CSS 的另一种语言\n* 通过工具编译成 CSS\n* 添加了很多 CSS 不具备的特性\n* 提升 CSS 文件的组织\n\n常见的CSS 预处理器：\n\n* [less](http://lesscss.org) |\n[中文网](http://lesscss.cn) |\n[Lee - Bootstarp](http://www.bootcss.com/p/lesscss/) |\n[Github](https://github.com/less/less.js) - 使用 js 编写，入门简单，复杂属性实现不友好\n* [scss(sass)](https://sass-lang.com) |\n[中文网](https://www.sass.hk) |\n[scss 在线转换](https://www.sass.hk/css2sass/) |\n[Github](https://github.com/sass/sass) - 使用 ruby 编写，需要编译，有基于 Node 的版本\n\nCSS 预处理器 实现的功能：\n\n* 嵌套 - 反应层级和约束\n* 变量和计算 - 加少重复代码\n* Extend 和 Mixin - 代码片段（类似于function）\n* 循环 - 适用于复杂有规律的样式\n* import - CSS 文件模块化\n\nCSS 预处理器框架：\n\n* SCSS  \n**Compass** - [Page](http://compass-style.org) |\n[Github](https://github.com/Compass/compass) 封装有兼容性问题的属性\n* Less  \n**Lesshat** - [Page](http://lesshat.madebysource.com) |\n[Github](https://github.com/madebysource/lesshat)  \n**EST** - [Page](http://ecomfe.github.io/est/) |\n[Github](https://github.com/ecomfe/est/)\n* 提供现成的 mixin\n* 类似js类库，封装常用功能\n\n[back to top]\n\n#### 2.6.1 预处理器之间的语法对照表\n\n\u003e css 预处理器（less/scss）之间的语法对比  \n\n[back to top]\n\n##### 2.6.1.1 嵌套\n\n1. less 和 scss 的嵌套语法完全相同。\n2. `\u0026` 表示与所在括号的选择器同级\n\n* css(.css)\n\n```css\n.wrapper { background: white; }\n.wrapper a { font-size: 12px; }\n.wrapper a:hover { background: red; }\n```\n\n* less(.less)\n\n```less\n.wrapper {\n    background: white;\n    a { font-size: 12px;\n        \u0026:hover { background: red; }\n    }\n}\n```\n\n* scss/sass(.scss)\n\n```scss\n.wrapper {\n    background: white;\n    a { font-size: 12px;\n        \u0026:hover { background: red; }\n    }\n}\n```\n\n[back to top]\n\n##### 2.6.1.2 变量\n\n**less** 中使用 `@` 声明变量  \n**scss** 中使用 `$` 声明变量  \n**作用** 提高代码的可维护性，降低 css 样式的修改成本。  \n**变量** 包含单位，运算时也会带单位运算。  \n由于 css 中不存在变量，因此生成的 css 文件会将变量替换成计算后的结果，变量的声明会被丢弃。\n\n* css(.css)\n\n```css\nfont-size: 12px;\nbackground: #ffcccc;\nborder-color: red;\n```\n\n* less(.less)\n\n```less\n@fontsice: 12px;\n@bgcolor: red;\nfont-size: @fontsize;\nbackground: lighten(@bgcolor, 40%);\nborder-color: @bgcolor;\n```\n\n* scss/sass(.scss)\n\n```scss\n$fontsice: 12px;\n$bgcolor: red;\nfont-size: $fontsize;\nbackground: lighten($bgcolor, 40%);\nborder-color: $bgcolor;\n```\n\n[back to top]\n\n##### 2.6.1.3 mixin (混入)\n\nless 中的 mixin  \n**声明** `.mixin名称([参数（可选）]){ 样式 }`  \n**调用** `.mixin名称([参数])`  \nscss 中的 mixin  \n**声明** `@mixin mixin名称([参数（可选）]){ 样式 }`  \n**调用** `@include mixin名称([参数])`  \n**作用** 提高代码的可维护性，提取重复样式，在 css 中进行代码复用。\n副作用：在过多使用后会导致生成的 css 样式文件的重复代码增多，可通过使用 **extend(继承)** 解决。  \n**mixin(混入)** 可认为是对重复样式的包装和复用，类似于面向对象语言中的方法，可带有参数。mixin 定义后可直接调用，mixin 中也可以调用 mixin。  \n由于 css 中不存在 mixin，因此生成的 css 文件会将 mixin 中的样式复制到调用的地方（变量会先进行计算），mixin 的声明会被丢弃。  \n**注意** less 中不带参数的 mixin 与 css class 语法上只差一对小括号，css class 也可以作为 mixin 调用，且会保留在编译后的 css 文件中（mixin 会被丢弃），但个人不推荐将 css class 作为 mixin 调用，以免混淆。scss 中没有这个问题。\n\n* css(.css)\n\n```css\n.bg { background: green; font-size: 12px; border-color: red; }\n```\n\n* less(.less)\n\n```less\n@bgcolor: green;\n.mixin_bg(@bgcolor) {\n    background: @bgcolor;\n    font-size: 12px;\n}\n.bg {\n    .mixin_bg(@bgcolor)\n    border-color: red;\n}\n```\n\n* scss/sass(.scss)\n\n```scss\n$bgcolor: green;\n@mixin mixin_bg($bgcolor) {\n    background: $bgcolor;\n    font-size: 12px;\n}\n.bg {\n    @include mixin_bg($bgcolor)\n    border-color: red;\n}\n```\n\n[back to top]\n\n##### 2.6.1.4 extend (继承)\n\nless 中使用 extend：`:extend(.类名)`  \nscss 中使用 extend：`@extend .类名`  \n**作用** 提取选择器，将公共样式写在一起，在 css 中进行代码复用，解决 mixin 可能造成的生成 css 文件重复代码过多的问题。  \n**extend(继承)** 可认为是对 mixin 的升级，但二者在编译生成时有较大差异：extend 会将重复的样式提取出来放到单独的选择器中，可更好的完成代码的复用，并且不会造成过多的代码重复的问题。  \n\n* css(.css)\n\n```css\n.bg .nav .banner { background: white; font-size: 12px; }\n.nav { border: red; }\n.banner { border: green; }\n```\n\n* less(.less)\n\n```less\n.bg {\n    background: white;\n    font-size: 12px;\n}\n.nav:extend(.bg) {\n    border: red;\n}\n.banner {\n    \u0026:extend(.bg)\n    border: green;\n}\n```\n\n* scss/sass(.scss)\n\n```scss\n.bg {\n    background: white;\n    font-size: 12px;\n}\n.nav {\n    @extend .bg;\n    border: red;\n}\n.banner {\n    @extend .bg;\n    border: green;\n}\n```\n\n[back to top]\n\n##### 2.6.1.5 loop (循环)\n\nless 中的循环  \n**递归** `.mixin名称(计数器) when (退出条件) { .mixin名称(计数器 - 1); 循环体; }`  \nscss 中的循环  \n**递归** `@mixin mixin名称(计数器) { @if (退出条件) { @include mixin名称(计数器 - 1); 循环体; } }`  \n**循环** `@for 计数器 from 起始点 through 结束点 { 循环体 }`  \n**作用** 生成高度有规律的样式。  \n**loop(循环)** 循环生成样式。  \nless 中只能使用递归的方式实现循环；  \nsess 中可使用递归和 for 循环两种方式实现循环。  \n\n* css(.css)\n\n```css\n.col-1 { width: 100ox; }\n.col-2 { width: 200ox; }\n.col-3 { width: 300ox; }\n```\n\n* less(.less)\n\n递归：\n\n```less\n.gen(@n) when (@n \u003e 0) {\n    .gen(@n - 1);\n    .cot-@{n} {\n        width: 100px/3*@n;\n    }\n}\ngen(3);\n```\n\n* scss/sass(.scss)\n\n递归\n\n```scss\n@mixin gen($n) {\n    @if ($n \u003e 0) {\n         @include gen($n - 1);\n        .col-#{$n} {\n            width: 100px/3*$n;\n        }\n    }\n}\ngen(3);\n```\n\n循环\n\n```scss\n@for $i from 1 through 3 {\n    .col-#{$i} {\n        width: 100px/3*$i;\n    }\n}\ngen(3);\n```\n\n[back to top]\n\n##### 2.6.1.6 import (模块化)\n\nless 与 scss 中的 import 语法形式与 css 原生 `@import` 相同：`@import \"url\"`  \n**作用** css 模块化，提高代码可维护性，解决 css 中默认 @import 不合并，不复用链接导致的 http 请求较多导致的性能问题。  \n**import(模块化)** 将引入的 css 模块合并为一个文件，在模块细分，文件细碎时能显著减少生成的 css 文件数量，有效减少 http 请求数量，提高性能。  \n\n* less(.less)\n\n```less\n@import \"url\"\n```\n\n* scss/sass(.scss)\n\n```scss\n@import \"url\"\n```\n\n[back to top]\n\n### 2.7 CSS 工程化\n\n组织 优化 构建 维护\n\n[PostCSS](https://postcss.org) |\n[中文网](https://www.postcss.com.cn)\n[Github](https://github.com/postcss/postcss) |\n[插件](https://www.postcss.parts)\n[Gitter](https://gitter.im/postcss/postcss) - 用 JavaScript 工具和插件转换 CSS 代码的工具\n\n常用插件：\n\n* [import](https://github.com/postcss/postcss-import) - 模块合并\n* [autoprefixer](https://github.com/postcss/autoprefixer) | config: [browserslist]((https://github.com/browserslist/browserslist) ) - 自动加前缀（解决兼容性问题）\n\n* [cssnano](https://cssnano.co) | [Github](https://github.com/cssnano/cssnano) - CSS 压缩\n* [cssnext](http://cssnext.io) |\n[Github](https://github.com/MoOx/postcss-cssnext) | [blog](https://moox.io/blog/deprecating-cssnext/) - 使用新的 CSS 特性\n* [precss](https://github.com/jonathantneal/precss) | [demo](https://jonathantneal.github.io/precss/) - 提供 变量、mixin、循环等特性\n* [css-modules](https://github.com/css-modules/css-modules) - 组件化\n* [styled-components](https://www.styled-components.com/) |\n[Github](https://github.com/styled-components) - 组件化\n\n[browserslist](https://github.com/browserslist/browserslist) - 浏览器列表（数据来自 [can i use](https://caniuse.com))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmenglin%2Fwebbase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanmenglin%2Fwebbase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmenglin%2Fwebbase/lists"}