Web Base(Web 基础)

本仓库包含部分 HTML 知识及全面详实的 CSS 知识。便于开发中的快速查询。

前置知识：对 HTML5、CSS3 有一定了解。 说明：本仓库的名词并不专业严谨，只求便于理解。

在阅读以下内容之前可先阅读： HTML5&CSS3 basic (HTML5 和 CSS3 基础) | Github

目录（Contents）

1. HTML

h5o - HTML 大纲算法工具

1.1 HTML 常见元素

1.1.1 head 元素

head 元素 不会在页面上留下直接的内容，主要为页面相关资源及信息描述。

back to top

1.1.2 body 元素

body 元素 的内容会直接出现在页面上。

括号中的内容为对应标签在 HTML5 中的语义，更多内容可访问： https://developer.mozilla.org/zh-CN/docs/Glossary/语义#语义化元素

延伸： HTML 参考 | HTML5 | HTML表单指南 | SEO(语义 )

back to top

1.2 HTML 元素分类

按默认样式分类： 块级 block、行内 inline、inline-block

按内容分类： https://www.w3.org/TR/html5/dom.html#kinds-of-content

back to top

1.3 HTML 元素嵌套关系

延伸：Text-level semantics 22 Transitional Document Type Definition Allowed nesting of elements in HTML 4 (and XHTML 1.0)

back to top

1.4 HTML 元素的默认样式

浏览器会自动为一些元素加默认样式。

CSS Reset CSS Tools: Reset CSS YUI CSS Reset

CSS Reset 重置默认样式 normalize.css | Github

ex

back to top

2. CSS

CSS：层叠样式表（Cascading Style Sheet） CSS | CSS 参考 CSS 教程 | CSS 文档

back to top

2.1 CSS 基础

2.1.1 CSS 基本规则

选择器 {
    属性(Property): 值(Value);
    ...
}

值后面的分号(;)可以不加，但建议为每一行加上分号

back to top

2.1.2 选择器

back to top

2.1.2.1 选择器的分类
  1. 元素选择器 - a
  2. 伪元素选择器 - ::before
  3. 类选择器 - .class-name
  4. 属性选择器 - [Property-name=Property-value]
  5. 伪类选择器 - :hover
  6. ID 选择器 - #id-name
  7. 否定选择器 - :not(…)
  8. 通用选择器 - * (匹配所有元素)
  9. 组合选择器

back to top

2.1.2.2 选择器的权重

按先后顺序，同一级别下权重相同，不同级别下数值越小权重越高：

  1. ID 选择器
  2. 类 属性 伪类
  3. 元素 伪元素
  4. 其它

在同一元素被多个选择器选中时，浏览器会优先应用优先级较低的选择器的样式，再应用优先级高的选择器的样式，如果设定了重复的样式，则会使用优先级高的选择器的样式。

属性生效的其它规则：

back to top

2.2 CSS 布局

2.2.1 非布局样式

back to top

2.2.1.1 文字 - 字体

在声明字体时先写平台独有的字体再加字体族是一个好的习惯

font-family: "PingFang SC", "Microsoft Yahei", monospace;

由于苹果用户在安装Office后也会有 Microsoft Yahei，但 Microsoft Yahei 在Mac上的效果不如 PingFang SC 因此将 PingFang SC 在前面

back to top

网络字体\自定义字体
/* 声明一个字体 */
@font-face {
    font-family: "IF";
    src: url("...")
}
font-family: "IF";

back to top

2.2.1.2 文字 - 行高

行高由 line box 的高度决定，line box 的高度由 inline box 的高度决定

back to top

2.3 CSS 布局

常用布局：

back to top

2.3.1 table 布局

<table>
    <thead>
        <!-- <th></th>会将标题加粗显示,此处为示范，实际生产中不建议将<td>同<thead>混用 -->
        <td>标题1</td><td>标题2</td><th>加粗标题</th>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td><td>1-2</td><td>1-3</td>
        </tr>
        <tr>
           <td colspan="2">2-1 (跨两列)</td><td  rowspan=“2”>2-3 (跨两行)</td>
        </tr>
        <tr>
           <td>3-1</td><td>3-2</td>
        </tr>
    </tbody>
</table>


<style>
    .table {
        display: table;
    }
    .table-row {
        display: table-row;
    }
    .table-cell {
        display: table-cell;
    }
</style>
<div class="table">
    <div class="table-row">
        <div class="table-cell">1-1</div>
        <div class="table-cell">1-2</div>
    </div>
    <div class="table-row">
        <div class="table-cell">2-1</div>
        <div class="table-cell">2-2</div>
    </div>
</div>

back to top

2.3.2 display and position

2.3.2.1 盒子模型

盒模型

盒子占用的空寂 = height/width(content) + padding + border

back to top

2.3.2.2 display - 元素的显示类型

常用属性：

back to top

2.3.2.3 position - 元素的位置

常用属性：

back to top

2.3.3 flexbox 布局

兼容性 不好，慎用

<style>
    .container{
        width:800px;
        height:200px;
        display: flex;
    }
    .left{ /* 固定宽度 */
        background: red;
        display: flex;
        width:200px;
    }
    .right{ /* 自适应宽度 */
        background: blue;
        display: flex;
        flex:1;
    }
</style>
<div class="container">
    <div class="left">
        左
    </div>
    <div class="right">
        右
    </div>
</div>

back to top

2.3.4 float 布局

对自身的影响：

对兄弟元素的影响：

对父级元素的影响：

/* 解决 float 元素的父元素的影响 */
.container {
    content: ' ';
    clear: both; /* 清除浮动 */
    display: block;
    visibility: hidden;
    height: 0;
}

<style>
    .container{
        width:800px;
        height:200px;
    }
    .left{
        background:red;
        /* float:left; */
        /* height:100%; */
        width:200px;
        position: absolute;
        height:200px;
    }
    .right{
        background:blue;
        float:right;
        width:200px;
        height:100%;
    }
    .middle{
        margin-left:200px;
        margin-right:200px;
    }

</style>
<div class="container">
    <div class="left">
        左
    </div>
    <div class="right">
        右
    </div>
    <div class="middle">
        中间
    </div>
</div>

back to top

2.3.5 inline-block 布局

<style>
    .container{
        width:800px;
        height:200px;
        font-size:0;
    }
    .left{
        font-size:14px;
        background:red;
        display: inline-block;
        width:200px;
        height:200px;
    }
    .right{
        font-size:14px;
        background:blue;
        display: inline-block;
        width:600px;
        height:200px;
    }

</style>
<div class="container">
    <div class="left">
        左
    </div>
    <div class="right">
        右
    </div>
</div>

back to top

2.3.6 响应式布局

viewport - <mate name='viewport' content='width=device-wid th, initial-scale=1.0, maximum-scale=1.0, user-scalable=no‘>

back to top

2.4 CSS 效果

效果属性：

back to top

2.4.1 box-shadow 阴影

box-shadow

back to top

2.4.2 text-shadow 文字阴影

back to top

2.4.3 border-radius 圆角

back to top

2.4.4 background 背景

back to top

2.4.5 clip-path 裁剪

back to top

2.5 CSS 动画

CSS 中动画的类型：

back to top

2.5.1 transition 补间动画

transition-timing-function(timing/easing)

CSS 默认 easing Github

自定义 easing

back to top

2.5.2 animations(keyframe) 关键帧动画

2.6 CSS 预处理器

常见的CSS 预处理器：

CSS 预处理器 实现的功能：

CSS 预处理器框架：

back to top

2.6.1 预处理器之间的语法对照表

css 预处理器（less/scss）之间的语法对比

back to top

2.6.1.1 嵌套
  1. less 和 scss 的嵌套语法完全相同。
  2. & 表示与所在括号的选择器同级
.wrapper { background: white; }
.wrapper a { font-size: 12px; }
.wrapper a:hover { background: red; }

.wrapper {
    background: white;
    a { font-size: 12px;
        &:hover { background: red; }
    }
}

.wrapper {
    background: white;
    a { font-size: 12px;
        &:hover { background: red; }
    }
}

back to top

2.6.1.2 变量

less 中使用 @ 声明变量
scss 中使用 $ 声明变量
作用 提高代码的可维护性，降低 css 样式的修改成本。
变量 包含单位，运算时也会带单位运算。
由于 css 中不存在变量，因此生成的 css 文件会将变量替换成计算后的结果，变量的声明会被丢弃。

font-size: 12px;
background: #ffcccc;
border-color: red;

@fontsice: 12px;
@bgcolor: red;
font-size: @fontsize;
background: lighten(@bgcolor, 40%);
border-color: @bgcolor;

$fontsice: 12px;
$bgcolor: red;
font-size: $fontsize;
background: lighten($bgcolor, 40%);
border-color: $bgcolor;

back to top

2.6.1.3 mixin (混入)

less 中的 mixin
声明 .mixin名称([参数（可选）]){ 样式 }
调用 .mixin名称([参数])
scss 中的 mixin
声明 @mixin mixin名称([参数（可选）]){ 样式 }
调用 @include mixin名称([参数])
作用 提高代码的可维护性，提取重复样式，在 css 中进行代码复用。 副作用：在过多使用后会导致生成的 css 样式文件的重复代码增多，可通过使用 extend(继承) 解决。
mixin(混入) 可认为是对重复样式的包装和复用，类似于面向对象语言中的方法，可带有参数。mixin 定义后可直接调用，mixin 中也可以调用 mixin。
由于 css 中不存在 mixin，因此生成的 css 文件会将 mixin 中的样式复制到调用的地方（变量会先进行计算），mixin 的声明会被丢弃。
注意 less 中不带参数的 mixin 与 css class 语法上只差一对小括号，css class 也可以作为 mixin 调用，且会保留在编译后的 css 文件中（mixin 会被丢弃），但个人不推荐将 css class 作为 mixin 调用，以免混淆。scss 中没有这个问题。

.bg { background: green; font-size: 12px; border-color: red; }

@bgcolor: green;
.mixin_bg(@bgcolor) {
    background: @bgcolor;
    font-size: 12px;
}
.bg {
    .mixin_bg(@bgcolor)
    border-color: red;
}

$bgcolor: green;
@mixin mixin_bg($bgcolor) {
    background: $bgcolor;
    font-size: 12px;
}
.bg {
    @include mixin_bg($bgcolor)
    border-color: red;
}

back to top

2.6.1.4 extend (继承)

less 中使用 extend：:extend(.类名)
scss 中使用 extend：@extend .类名
作用 提取选择器，将公共样式写在一起，在 css 中进行代码复用，解决 mixin 可能造成的生成 css 文件重复代码过多的问题。
extend(继承) 可认为是对 mixin 的升级，但二者在编译生成时有较大差异：extend 会将重复的样式提取出来放到单独的选择器中，可更好的完成代码的复用，并且不会造成过多的代码重复的问题。

.bg .nav .banner { background: white; font-size: 12px; }
.nav { border: red; }
.banner { border: green; }

.bg {
    background: white;
    font-size: 12px;
}
.nav:extend(.bg) {
    border: red;
}
.banner {
    &:extend(.bg)
    border: green;
}

.bg {
    background: white;
    font-size: 12px;
}
.nav {
    @extend .bg;
    border: red;
}
.banner {
    @extend .bg;
    border: green;
}

back to top

2.6.1.5 loop (循环)

less 中的循环
递归 .mixin名称(计数器) when (退出条件) { .mixin名称(计数器 - 1); 循环体; }
scss 中的循环
递归 @mixin mixin名称(计数器) { @if (退出条件) { @include mixin名称(计数器 - 1); 循环体; } }
循环 @for 计数器 from 起始点 through 结束点 { 循环体 }
作用 生成高度有规律的样式。
loop(循环) 循环生成样式。
less 中只能使用递归的方式实现循环；
sess 中可使用递归和 for 循环两种方式实现循环。

.col-1 { width: 100ox; }
.col-2 { width: 200ox; }
.col-3 { width: 300ox; }

递归：

.gen(@n) when (@n > 0) {
    .gen(@n - 1);
    .cot-@{n} {
        width: 100px/3*@n;
    }
}
gen(3);

递归

@mixin gen($n) {
    @if ($n > 0) {
         @include gen($n - 1);
        .col-#{$n} {
            width: 100px/3*$n;
        }
    }
}
gen(3);

循环

@for $i from 1 through 3 {
    .col-#{$i} {
        width: 100px/3*$i;
    }
}
gen(3);

back to top

2.6.1.6 import (模块化)

less 与 scss 中的 import 语法形式与 css 原生 @import 相同：@import "url"
作用 css 模块化，提高代码可维护性，解决 css 中默认 @import 不合并，不复用链接导致的 http 请求较多导致的性能问题。
import(模块化) 将引入的 css 模块合并为一个文件，在模块细分，文件细碎时能显著减少生成的 css 文件数量，有效减少 http 请求数量，提高性能。

@import "url"

@import "url"

back to top

2.7 CSS 工程化

组织 优化 构建 维护

PostCSS | 中文网 Github | 插件 Gitter - 用 JavaScript 工具和插件转换 CSS 代码的工具

常用插件：

browserslist - 浏览器列表（数据来自 can i use)