【CSS3 笔记】基础内容

文章目录

- 01 What is CSS3
- - 1.1 CSS3功能
- 02 初探 CSS3
- - 2.1 border-radius 圆角
  - 2.2 box-shadow 盒子阴影
  - 2.3 text-shadow 文本阴影
  - 2.4 颜色值 RGBA
  - 2.5 word-wrap 文字边界换行
  - 2.6 @font-face 引入艺术字体
  - 2.7 border-image 边框应用背景
  - 2.8 background-origin 背景图片起始位置
  - 2.9 background-clip 背景图片填充范围
  - 2.10 background-size 背景图片尺寸
- 03 CSS3选择器
- - 3.1 属性选择器
  - 3.2 伪类选择器：伪类用于向某些选择器添加特殊的效果
  - - 3.2.1 :root 根标签选择器
    - 3.2.2 :not 否定选择器
    - 3.2.3 :empty 空标签选择器
    - 3.2.4 :target 目标元素选择器
    - 3.2.5 子元素选择器
    - - 1、:first-child
      - 2、:last-child
      - 3、:nth-child()
      - 4、:nth-last-child()
    - 3.2.6 子元素类型选择器
    - - 1、:first-of-type
      - 2、:last-of-type
      - 3、:nth-of-type()
      - 4、:nth-last-of-type()
    - 3.2.7 唯一子元素选择器
    - - 1、:only-child
      - 2、:only-of-type
    - 3.2.8 与表单有关的元素选择器
    - - 1、:enable
      - 2、:disable
      - 3、:checked
      - 4、:ready-only
      - 5、:ready-write
  - 3.3 伪元素选择器
  - - 3.3.1 ::first-letter
    - 3.3.2 ::first-line
    - 3.3.3 ::before
    - 3.3.4 ::after
    - 3.3.5 ::selection
  - 3.4 条件选择
  - - 3.4.1 > 直接子元素
    - 3.4.2 + 后面紧挨着的一个兄弟节点
    - 3.4.3 ~ 后面的所有兄弟节点
- 04 CSS3 提升部分
- - 4.1 transform 可以实现元素的形状、角度、位置等的变化
  - 4.2 transform-origin 元素中心点
  - 4.3 transition 过渡动画
  - 4.4 animation 动画铺垫，动画关键帧引入动画并使用
  - 4.5 columns 多列布局
  - 4.6 transparent 透明色颜色值
  - 4.7 移动端的 meta
- 05 hack
- 06 盒模型
- - 6.1 W3C 标准盒模型
  - 6.2 lE6 混杂模式盒模型
  - 6.3 CSS3 中有一个可以选择盒模型的属性
  - 6.4 弹性盒子 display: flex
  - - 6.4.1 以下六个属性设置在子元素上：
    - 6.4.2 以下六个属性设置在容器上：
- 07 CSS3 动画
- - 7.1 相关属性介绍
  - - 7.1.1 transform-style 变换样式
    - 7.1.2 perspective 景深
    - 7.1.3 backface-visibility 在元素运动过程中，能否展示元素的背面
  - 7.2 CSS3 动画性能优化
- 08 响应式布局
- - 8.1 媒体查询
  - 8.2 Link 和 @media 使用方法
  - 8.3 换―种写法：`@media 媒体类型 and (媒体特性: 值) and (媒体特性: 值){}`
  - 8.4 指定备用功能
  - 8.5 指定否定条件
  - 8.6 向早期浏览器隐藏媒体查询
  - 8.7 易混淆的宽度
- 09 物理像素、设备独立像素、位图像素
- - 9.1 物理像素和设备独立像素
  - 9.2 位图像素
- 10 浏览器渲染原理
- - 10.1 细化分析
- 11 重绘、重排
- - 11.1 触发重排的方法
  - 11.2 理论上的解决优化办法
- 12 Bootstrap
- - 12.1 Bootstrap 技术特点
  - 12.2 Bootstrap特色
  - 12.3 前端开发流程
  - 12.4 组件化开发

01 What is CSS3

CSS3 是 CSS2 的升级版本，3只是版本号，它在 CSS2.1 的基础上增加了很多强大的新功能。目前主流浏览器 chrome、safari、firefox、opera、甚至360都已经支持了 CSS3 大部分功能了，IE10以后也开始全面支持 CSS3 了。

CSS3 前缀：在编写 CSS3 样式时，不同的浏览器可能需要不同的前缀。它表示该 CSS 属性或规则尚未成为 W3C 标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

可以利用插件打包，不需要手动写 ==> webpack

标准写法如表顺序，再在后面添加无前缀的

前缀	浏览器
-webkit	Chrome、Safari
-moz	Firefox
-ms	IE
-o、15年之后为-webkit	Opera

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: #f00;border-radius: 30px;-webkit-border-radius: 30px;-moz-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;}</style>
</head>
<body><div></div>
</body>
</html>

1.1 CSS3功能

提供了更加强大且精准的选择器，提供多种背景填充方案，可以实现渐变颜色，可以改变元素的形状、角度等，可以加阴影效果，报纸布局，弹性盒子，ie6 混杂模式的盒模型，新的计量单位，动画效果等等等…

但是 CSS3 的兼容性问题同样也显得格外重要，并不是所有 CSS3 属性都通过了 W5C 标准，所以…

我们需要全面的兼容性查阅手册

http://www.runoob.comlcssreflcss3-browsersupport.html

兼容性参考手册

02 初探 CSS3

2.1 border-radius 圆角

border-radius
border-top-left-radius
border-top-right-radius
border-top-right-radius
border-bottom-left-radius
画圆简便写法：border-radius: 50%;
border-radius: 1em 2em 1em 2em / 2em 1em 2em 1em
- 1em 2em 1em 2em 表示相对于 x 轴的距离
- 2em 1em 2em 1em 表示相对于 y 轴的距离
- x 轴与 y 轴一一对应，组成各个角

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: #f00;border-radius: 50px 40px 30px 20px;border-top-left-radius: 50px;border-top-right-radius: 40px;border-top-right-radius: 30px;border-bottom-left-radius: 20px;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: #f00;border-top-left-radius: 50px 20px;border-top-right-radius: 40px 10px;border-top-right-radius: 30px 20px;border-bottom-left-radius: 20px 50px;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

2.2 box-shadow 盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
投影方式有两个值：outset（默认值，不用写，写了会出错）、inset
同一个盒子，可以同时加多个阴影，阴影之间用“,”隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: #f00;box-shadow: 20px 20px 10px 3px #0f0,20px 20px 10px 3px #00f inset;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

2.3 text-shadow 文本阴影

text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰。如果不需要阴影模糊可以将 Blur 值设置为0
Color：是指阴影的颜色，其可以使用 rgba 色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: #f00text-shadow: 3px 3px 2px #00f;}</style>
</head>
<body><div>hhhhh</div>
</body>
</html>

在这里插入图片描述

2.4 颜色值 RGBA

RGB 是一种色彩标准，是由红R、绿G、蓝B的变化以及相互叠加来得到各式各样的颜色
RGBA 是在 RGB 的基础上增加了控制 alpha 透明度的参数
语法：color: rgba(R,G,B,A);
R、G、B三个参数，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0% - 100%，超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0 - 1之间，不可为负值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>*{background-color: blue;}div{width: 100px;height: 100px;background: #f00;background-color: rgba(255, 255, 0, 0.7);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

Gradient 渐变的背景颜色

CSS3 的渐变分为两种

线性渐变（linear - to）
- 语法：linear-gradient([direction], color [percent], color [percent], ....);，[]内为选填
- direction 角度的单位为"deg"，也可以用 to bottom、to left、to top left 等的方式来表达

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: linear-gradient(to bottom, #0f0 10%,#f00 20%, #00f 80%, #000 90%);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

径向渐变（radial - at）
- 语法：radial-gradient(shape [长轴] [短轴] at position, color [percent], color [percent], ....);，[]内为选填，最后一个值可设为 transparent 透明色
- shape：放射的形状，可以为原型 circle，可以为椭圆 ellipse
- position：圆心位置，可以两个值，也可以一个。如果为一个时，第二个值默认 center 即 50%。值类型可以为 ==> 百分数，距离像素，也可以是方位值（left、top…）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: radial-gradient(circle at 30px 70px, #0f0 10%,#f00 20%, #00f 80%, #000 90%);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;height: 100px;background: radial-gradient(circle at 50px 50px, #0f0 10%,#f00 20%, #00f 30%, #000 40%, transparent);}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

2.5 word-wrap 文字边界换行

normal：默认值，不换行
break-wrap：打破单词，强制换行
e.g. 网址过长时，溢出盒子，此时用 word-wrap 强制换行
对比：文本溢出时且显示省略号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>
</head>
<body><div>hhhhhhhhhhhhffff</div><div>红红火火恍恍惚惚或或或或或或或或或</div>
</body>
</html>

在这里插入图片描述

2.6 @font-face 引入艺术字体

Format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别浏览器对 @font -face 的兼容问题，这里涉及到一个字体 format 的问题。因为不同的浏览器对字体格式支持是不一致的，浏览器自身也无法通过路径后缀来判断字体。
url('diyfont.eot') IE9+
url('diyfont.eot?#iefix') format('embedded-opentype') IE6-IE8
url('diyfont.woff') format('woff') Chrome、Firefox
url('diyfont.svg#fontname') format('svg') iOS 4.1以上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>@font-face{font-family: "HeartBlues";src: url('./font_face/Heart Blues.ttf'),url('./font_face/Heart Blues.otf') format('otf');}p{font-family: "HeartBlues";}</style>
</head>
<body><p>HeartBlues 引入外部字体包</p>
</body>
</html>

在这里插入图片描述

2.7 border-image 边框应用背景

border-image: url(xxx.png) number [stretch / repeat / round];
number 为截取指定图片四周的宽度作为 border 的背景填充部分（截取图可按 border-width 大小伸缩），number 为一个数字时是复合写法
共三个参数
- stretch 拉伸，有多长拉多长
- repeat 和四个角上同等大小的图片进行平铺，当边框中间区域长度不是4角图片大小的整数倍时，会被切割
- round 铺满，4角上的图片进行拉伸平铺，不会被切割
最后一个属性为 border-image 的展示策略

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{width: 75px;height: 100px;text-align: center;line-height: 100px;border: 10px solid #000;}.stretch{border-image: url('./border-image.png') 26 stretch;}.repeat{border-image: url('./border-image.png') 26 repeat;}.round{border-image: url('./border-image.png') 26 round;}</style>
</head>
<body><div class="stretch">stretch</div><div class="repeat">repeat</div><div class="round">round</div>
</body>
</html>

在这里插入图片描述

2.8 background-origin 背景图片起始位置

background-origin: [border-box / padding-box / content-box];
参数分别表示图片背景是从边框，内边距（默认值），或者是内容区域开始显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{text-align: center;line-height: 50px;width: 50px;height: 50px;padding: 20px;border: 20px solid rgba(0, 0, 0, 0.5);background: url(./background-origin.jpg) no-repeat;}.border{background-origin: border-box;}.padding{background-origin: padding-box;}.content{background-origin: content-box;}</style>
</head>
<body><div class="border">border</div><div class="padding">padding</div><div class="content">content</div>
</body>
</html>

在这里插入图片描述

2.9 background-clip 背景图片填充范围

background-clip: [border-box / padding-box / content-box / no-clip];
与 background-origin 不冲突
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数 border-box 显示同样的效果。background-clip 默认值为 border-box
text: background-clip: text; 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。注意：webkit 独有属性，且必须配合 text-fill-color 属性
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- text-fill-color: -webkit-background-clip;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo01</title><style>div{text-align: center;line-height: 50px;width: 50px;height: 50px;padding: 20px;border: 20px solid rgba(0, 0, 0, 0.5);background: url(./background-origin.jpg) no-repeat;background-origin: padding-box;background-clip: content-box;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

2.10 background-size 背景图片尺寸

background -size: [auto / <长度值> / <百分比> / cover / contain取值说明];
设置背景图片的大小，以长度值或百分比显示，还可以通过 cover 和 covtain 来对图片进行伸缩。
auto：默认值，不改变背景图片的原始高度和宽度
<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放
<百分比>：0%~100% 之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上
cover：用一张图片铺满整个背景，如果比例不符，则截断图片
contain：尽量让背景内，存在一整张图片

03 CSS3选择器

3.1 属性选择器

E[att^=“val”]{…} 选择匹配元素 E，且 E 元素定义了属性 att，其属性值以 val 开头的任何字符串
E[att$=“val”]{…} 选择匹配元素 E，且 E 元素定义了属性 att，其属性值以 val 结尾的任何字符串
E[att*=“val”]{…} 选择匹配元素 E，且 E 元素定义了属性 att，其属性值任意位置出现了 val。即属性值包含了 val，位置不限

3.2 伪类选择器：伪类用于向某些选择器添加特殊的效果

伪类的效果可以通过添加一个实际的类达到

伪元素的效果需要通过添加一个实际的元素才能达到

伪类和伪元素的区别：https://segmentfault.com/a/1190000000484493

3.2.1 :root 根标签选择器

:root 选择器等同于 <html> 元素，建议使用 :root

:root{background:orange} 得到效果等同于 html{background:orange}

3.2.2 :not 否定选择器

用法和 jQuery 中的 not 类似，可以排除某些特定条件的元素

div:not([class="demo"]){background:red} 除了 class 为 demo 的 div 以外，所有的 div 的背景颜色都变红

3.2.3 :empty 空标签选择器

用来选择没有内容的元素，不在文档树中，这里的没有内容指的是一点内容都没有，哪怕是一个空格

3.2.4 :target 目标元素选择器

用来匹配被 location.hash 选中的元素（锚点元素）

选择器可用于选取当前活动的目标元素

3.2.5 子元素选择器

直接子元素

均有弊端，如果当前位置元素不是前面所修饰的元素，那么无效

其父元素的第 n 个子元素，不论元素的类型

1、:first-child

第一个子元素

2、:last-child

最后一个子元素

3、:nth-child()

第 n 个子元素，n 代表变量自然数

4、:nth-last-child()

从后往前数，第 n 个子元素

3.2.6 子元素类型选择器

直接子元素

限制了类型，即在所修饰元素的类型下选择特定位置的元素

1、:first-of-type

第一个子元素

2、:last-of-type

最后一个子元素

3、:nth-of-type()

第 n 个子元素，n 代表变量自然数

4、:nth-last-of-type()

从后往前数，第 n 个子元素

3.2.7 唯一子元素选择器

直接子元素

1、:only-child

独生子元素，没有兄弟元素

2、:only-of-type

要选择的某类特定的子元素在兄弟节点中是此类元素唯一一个

3.2.8 与表单有关的元素选择器

在 web 表单中，有些表单元素有可用和不可用状态，如输入框、密码框、复选框等。默认为可用，可通过 :enable 进行选择，:disable 则相反

1、:enable

可用的元素

2、:disable

不可用的元素

3、:checked

选择框的被选中状态

checkbox、radio 的一些默认状态不可用属性进行改变，如边框颜色

4、:ready-only

选中只读元素

5、:ready-write

选中非只读的元素

3.3 伪元素选择器

通过添加一个实际的元素才能达到

3.3.1 ::first-letter

前面加一个字符，并设置样式

3.3.2 ::first-line

前面加一行，并设置样式

3.3.3 ::before

前面加元素，并设置样式

3.3.4 ::after

结尾加元素，并设置样式

3.3.5 ::selection

用来匹配突出显示的文本（用鼠标选择的时候）。浏览器默认情况下，用鼠标选择网页文本是以“蓝色的背景，白色的字体”显示的。

属性：user-select: none; 不允许选中

::selection{user-select: none;}

注：火狐下必须加 -moz-，-moz-::selection

3.4 条件选择

3.4.1 > 直接子元素

3.4.2 + 后面紧挨着的一个兄弟节点

3.4.3 ~ 后面的所有兄弟节点

04 CSS3 提升部分

形状变换 — 高级动画基础

4.1 transform 可以实现元素的形状、角度、位置等的变化

可填的属性值	描述
rotate()	以 x / y / z 为轴进行旋转，默认为 z，单位 deg
rotateX()	以 x 为轴进行旋转
rotateY()	以 y 为轴进行旋转
rotateZ()	以 z 为轴进行旋转
rotate3d(x,y,z,angle)
scale()	以 x / y 为轴进行缩放，可以为负值，会倒过来值是数字表示倍数，不加任何单位
scale(x,y)	接受两个值，如果第二个参数未提供，则第二个参数使用第一个参数的值
scaleX()	以 x 为轴进行缩放
scaleY()	以 y 为轴进行缩放
scaleZ()	以 z 为轴进行缩放
scale3d(x,y,z)
skew()	对元素进行扭曲，单位 deg
skewX()	以 x 为轴进行扭曲
skewY()	以 y 为轴进行扭曲
skew(x,y)	接受两个值，第二个值选填（默认为 0）
translate()	可以移动距离，相对于自身位置
translate(x,[y])	接受两个值，第二个值选填
translateX()	以 x 为轴进行移动
translateY()	以 y 为轴进行移动
translateZ()	以 z 为轴进行移动
translate3d(x,y,z)	在 xyz 三轴上移动

4.2 transform-origin 元素中心点

任何一个元素都有一个中心点，默认情况下，其中心点是居于元素 x 轴和 y 轴的 50% 处

属性值如下：

关键词	描述
top = top center = center top	50% 0
right = right cneter = center right	100% 或 100% 50%
bottom = bottom cneter = center bottom	50% 100%
left = left cneter = center left	0 或 0 50%
center = center center	50% 或 50% 50%
top left = left top	0 0
right top = top right	100% 0
bottom right = right bottom	100% 100%
bottom left = left bottom	0 100%

4.3 transition 过渡动画

https://www.cnblogs.com/libo-web/p/15798162.html

参与过渡的属性：

background-color、background-position
border-bottom-color、border-bottom-width、border-left-color、border-left-width、border-right-color、border-right-width、border-top-color、border-top-width、border-spacing
font-size、font-weight
margin-bottom、margin-left、margin-right、margin-top
padding-bottom、padding-left、padding-right、padding-top
max-height、max-width、min-height、min-width
outline-color、outline-width
text-indent、text-shadow
vertical-align
letter-spacing
line-height
bottom、left、right、height、clip、color、opacity、visibility

transition 是CSS3的一个复合属性，包括以下几个子属性：

transition-property：需要过渡或动态模拟的 CSS 属性（width、height…）
- all：默认值，所有可以进行过渡的CSS属性
- none：不指定过渡的css属性
- property：指定要进行过渡的CSS属性，可同时指定多个属性值，用逗号“,”隔开
transition-duration：过渡所需要的时间
- time：用于指定多度持续的时间，默认值为0，如果存在多个属性值，以逗号“,”隔开
transition-timing-function：过渡函数
- transition-timing-function:linear | ease | ease-in | easse-out | ease-in-out | cubicbezier(x1,y1,x2,y2)[,linear | ease-in | easse-out | ease-in-out |cubicbezier(x1,y1,x2,y2)]
- linear：线性过渡，也叫匀速过渡
- ease：平滑过渡，过渡的速度会逐渐慢下来
- ease-in：由慢到快，逐渐加速
- ease-out：由快到慢，逐渐减速
- ease-in-out：由慢到块再到慢，线加速后减速
- cubic-bezier(x1,y1,x2,y2)：特定的贝塞尔曲线类型
transition-delay：开始出现的延迟时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo03</title><style>div{width: 100px;height: 100px;background: #000;transition: width 2s ease 1s;}div:hover{width: 200px;height: 200px;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

4.4 animation 动画铺垫，动画关键帧引入动画并使用

animation 动画会按照 keyframes 关键帧里面指定的帧状态而过渡执行，0% - 100% 代表动画的时间过渡

帧里面如果只有 0% 和 100% 两个关键帧，那么可以用 from to 代替

@keyframes 定义动画

@keyframes demoMove{0%{background-color: red;}10%{background-color: green;}20%{background-color: white;}50%{width: 200px}100%{height: 200px}
}

animation 是CSS3的一个复合属性，包括以下几个子属性：

animation-name：执行动画的 keyframe 名
animation-duration：动画的执行时间，带单位
animation-timing-function：过渡速率函数
animation-delay：执行延迟时间，带单位
animation-iteration-count：动画播放次数
- infinite：执行无限次
- number：执行 n 次
animation-direction：动画播放方向
- normal：默认值，0% → 100%
- reverse：反向播放，100% → 0%
- alternate：奇数次正向播放，偶数次反向播放
- alternate-reverse：奇数次反向播放，偶数次正向播放
animation-play-state：控制元素动画的播放状态
- running：播放
- paused：暂停
animation-fill-mode：动画开始前和结束之后发生的操作
- none：默认值，动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
- forwards：动画在结束后继续应用最后的关键帧位置
- backwards：动画开始前迅速应用动画的初始帧
- both：动画同时具有 forwards 和 backwards 效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo04</title><style>@keyframes move {0%{transform: translateX(0px);}100%{transform: translateX(100px);}}.move{width: 100px;height: 100px;background: blue;animation: move 1s linear 1s infinite alternate;}@keyframes change{0%{background-color: red;}10%{background-color: green;}20%{background-color: black;}50%{width: 200px}100%{height: 200px}}.change{width: 100px;height: 100px;background: blue;animation: change 5s linear 1s both;}</style>
</head>
<body><div class="move"></div><div class="change"></div>
</body>
</html>

在这里插入图片描述

4.5 columns 多列布局

为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在 Web 页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3 的多列布局可以轻松实现。

语法：columns: [column-width] [column-count];
column-width：每一列的宽度，根据容器宽度自适应（最小宽度）
column-count：规定的列数，唯一精准的是列数
coluwn-width 和 coluwmn-count 不要两一起使用会乱
column-gap：设置列与列之间的宽度，直接用数值表示即可，没有设置时会根据浏览器默认的 font-size 来定
column-rule：不占用任何空间位置，在列与列之间改变其宽度不会改变任何列的位置
columun-rule-width：类似于 border-width 属性，主要用来定义列边框的宽度，其默认值
为 medium。column-rule-width 属性接受任意浮点数，但不接收负值。像 border-width 属性一样，可以使用关键词 medium、thick、thin
column-rule-style：类似于 border-style 属性，主要用来定义列边框样式，其默认值为 none 。与 border-style 属值相同，包括none、 hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
column-rule-color：颜色

4.6 transparent 透明色颜色值

利用 transparent 画三角

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo03</title><style>div{width: 0px;height: 0px;border: 100px solid black;border-left-color: transparent;border-top-color: transparent;border-bottom-color: transparent;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

4.7 移动端的 meta

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxmum-scale=1.0,user-scalable=no">

05 hack

hack1：假设现在列宽为 195px，同时列之间的距离为0，而且他们之间没有任何样式，此时两列的宽度为了填补列与列之间的空间，他们两列的宽度自动变成了200px。当把 column-gap 样式禁掉时，此时列只会显示一列，（因为加上 gab 外部容器容纳不下了，所以变成了一列）

如果没有显示设置 column-gap 值时，其值大小会根据所设置的 font-size 来定，因此容器无法容现两列的位置，从而第一列宽度扩展到容器大小一样

.colGapHack{width: 400px;border 1px solid #000;-moz-column-width: 195px;-webkit-column-width: 195px;column-width: 195px;-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;-moz-column-rule: 0 none;-webkit-column-rule: 0 none;column-rule: 0 none;
}

hack2：虽然设置的列宽大于元素容器的宽度（两列的宽度加上默认的 gap 大于 width），但并不会让元素内容按列的宽度进行布局而撑破元素容器，他只会把列宽降到与元素容器宽度相等

解决办法：column-width =（width -（n - 1)* font-size）/ n，其中 n 大于或等于 2，并且其他值为默认值。如当 n 为 2 时所设置的 column-width 大于上面公式算出的值那么就会变成 1 列（Opera下最好再减 1 px，如果是中文的话也最好减1 ~ 2px）

.colBigWidth{width: 400px;border 1px solid #000;-moz-column-width: 200px;-webkit-column-width: 200px;column-width: 200px;
}

06 盒模型

在 CSS 中盒模型被分为两种，第一种是 W3C 的标准盒模型，另一种是 IE6 混杂模式的传统模型。他们都是对元素计算尺寸的模型，但他们的不同是计算的方式不同。

6.1 W3C 标准盒模型

element 空间高度（盒子）= width + padding + border

width 为内容高度，即 width 不包括 padding 和 border

6.2 lE6 混杂模式盒模型

内容高度（盒子）= width - padding - border

即设置 width 的数值就是 element 的空间高度，width 包含 padding 和 border

6.3 CSS3 中有一个可以选择盒模型的属性

box-sizing: border-box/content-box

content-box 为 W3C 标准盒子

border-box 为 lE6 混杂模式的盒子

6.4 弹性盒子 display: flex

flex 为复合属性，且必须配合父元素 display: flex; 使用

6.4.1 以下六个属性设置在子元素上：

flex-grow：父级剩余空间根据所设置的比例分配，左右两栏布局默认值为 0
flex-shrink：设置元素的收缩比例 → 多出盒子的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大
- e.g. 盒子400px，三个子元素200px，多出200px
- 缩减的宽度 = （flex-shrinkN * widthN）/ （∑flex-shrinkN * widthN ）* moreWidth
flex-basis：伸缩基准值，该属性设置元素的宽度，当然 width 也可以用来设置元素宽度，如果元素上同时出现了 width 和 flex-basis 那么 flex-basis 会覆盖 width 的值。
- 子元素宽度尽可能按照 basis 来如果基准值相加大于容器宽度那么下面由下面公式分配宽度给子元素：（flex-basisN /（∑flex-basis 相加）*容器的宽度
- 真实情况：sonN =（flex-shrink）* flex-basis，加权值 = son1 + son2 + … +sonN
- 压缩的宽度 sonW =（子元素 flex-basis 值 * flex-shrink / 加权值）*溢出值
- 最后 sonN 的实际宽度为：flex-basis - 缩减值N = sonN 真实宽度
flex：复合属性，flex: flex-grow flex-shrink flex-basis;
- flex: 1; → flex: 1 1 0%;
- flex: 3; → flex: 3 1 0%;
- 注意：flexbox 布局和原来的布局是两个概念，部分 css 属性在 flexbox 盒子里面不起作用，e.g：float、clear、column、vertical-align 等等
order：项目的排列顺序，数值越小越靠前，默认为 0
align-self：对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖
- auto：默认值，元素继承了它的父容器的 align-items 属性，如果没有父容器则为 ”stretch“
- flex-star：位于容器的开头
- flex-end：位于容器的结尾
- center：垂直居中
- baseline：以第一行文字为基准线对齐
- stretch：拉伸以适应容器

6.4.2 以下六个属性设置在容器上：

flex 布局：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex-direction：主轴的方向，即项目的排列方向
- row：默认值，主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
flex-wrap：溢出换行问题
- nowrap（默认）不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
flex-flow：复合属性，flex-flow: flex-direction flex -wrap;
justify-content：项目在主轴上的对齐方式
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等
align-items：项目在侧轴上如何对齐，具体对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下
- stretch：默认值，拉伸以适应容器，如果项目未设置高度或设为 auto，将占满整个容器的高度
- flex-star：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：以项目的第一行文字为基准线对齐
align-content：多根轴的对齐方式，如果项目只有一根轴线，该属性不起作用
- stretch：默认值，轴线占满整个交叉轴
- flex-star：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍

07 CSS3 动画

7.1 相关属性介绍

7.1.1 transform-style 变换样式

transform-style: flat|preserve-3d; 默认为 flat

transform-style 属性需要设置在父元素中，高于任何嵌套的变形元素

设置了 transform-style: preserve-3d; 的元素，就不能防止子元素溢出设置 overflow: hidden 否则会导致 preserve-3d 失效

7.1.2 perspective 景深

perspective 的值要大于 3d 物体的值

perspective：默认值为 none

perspective-origin：默认值为 50% 50%

7.1.3 backface-visibility 在元素运动过程中，能否展示元素的背面

backface-visibility: visible|hidden; 默认为 visible

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo05</title><style>.wrapper{perspective: 1200px;width: 300px;height: 300px;}.wrapper .box{transform-style: preserve-3d;position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;animation: move 3s linear infinite;}.wrapper .box div{position: absolute;width: 200px;height: 200px;font-size: 30px;color: #fff;text-align: center;line-height: 200px;opacity: 0.5;}.wrapper .box div:nth-of-type(1){background: red;transform: translateZ(100px);}.wrapper .box div:nth-of-type(2){background: green;transform: rotateX(90deg) translateZ(100px);}.wrapper .box div:nth-of-type(3){background: yellow;transform: rotateX(180deg) translateZ(100px);}.wrapper .box div:nth-of-type(4){background: orange;transform: rotateX(-90deg) translateZ(100px);}.wrapper .box div:nth-of-type(5){background: pink;transform: rotateY(90deg) translateZ(100px);}.wrapper .box div:nth-of-type(6){background: blue;transform: rotateY(-90deg) translateZ(100px);}@keyframes move{0%{transform: rotateX(0deg) rotateY(0deg);}100%{transform: rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body><div class="wrapper"><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></div>
</body>
</html>

在这里插入图片描述

7.2 CSS3 动画性能优化

尽可能多的利用硬件能力，如使用 3D 变形来开启 GPU 加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

如果动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的 Hack

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

尽可能少的使用 box-shadow 与 gradient，这两个都是页面性能杀手，能避免尽量避免
尽可能的让动画元素不在文档流中，以减少重排

position: fixed;
position: absolute;

优化 DOM layout 性能
如下面一个元素通过 translate3d 右移 500px 的动画流畅度会明显优于使用 left 属性
- 3D 变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，重在权衡

.ball-1{transition: -webkit-transform .5s ease;-webkit-transform: translate3d(0, 0, 0);
}
.ball-1 .slidein{-webkit-transform: translate3d(500px, 0, 0);
}
.ball-2{transition: left .5s ease;left: 0;
}
.ball-2 .slidein{left:500px;
}

08 响应式布局

8.1 媒体查询

媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。作为 CSS3 规范的一部分，媒体查询扩展了 media 属性（控制样式应用方式）的角色
Media Queries（媒体查询）是 CSS3 新增加的一个模块功能，其最大的特色就是通过 CSS3 来查询媒体，然后调用对应的样式

8.2 Link 和 @media 使用方法

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css” />

这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type all（全部）、screen（屏幕）、print（页面打印或打印预览模式））和媒体特性（Media Query)

Media Query 是 CSS3 对 Media Type 的增强版，其实可以将 Media Query 看成 Media Type（判断条件）+ CSS（符合条件的样式规则）

<!--匹配设配在最大宽度和最小宽度之间-->
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />

8.3 换―种写法：`@media 媒体类型 and (媒体特性: 值) and (媒体特性: 值){}`

e.g 在 html 页面中引入CSS文件 1.css，1.css中有这样一段代码：

@media all and (max-width: 1000px) and (min-width: 600px){......
}

媒体类型

媒体类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

媒体特性

媒体特性	取值	接受min/max	描述
width	length	yes	渲染界面的宽度
height	length	yes	渲染界面的高度
device-width	length	yes	设备屏幕的输出宽度
device-height	length	yes	设备屏幕的输出高度
orientation	portrait\|landscape	no	height 是否大于或等于 width，即横屏或竖屏 portrait代表是 landscape代表否
aspect-ratio	整数 / 整数	yes	width 与 height 的比率
device-aspect-ratio	整数 / 整数	yes	device-width 与 device-height 的比率如常见的显示器比率：4/3，16/9，16/10
color	整数、	yes	每种色彩的字节数。如果不是彩色设备，则值等于0
color-index	整数	yes	色彩表中的色彩数。如果没有使用彩色查询表，则值等于0
monochrome	整数	yes	单色帧缓冲器中每像素字节。如果不是单色设备，则值等于0
resolution	dpi / dpcm	yes	设备的分辨率。如：96dpi，300dpi，118dpcm
scan	progressive\|interlace	no	定义电视类设备的扫描工序
grid	整数	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

8.4 指定备用功能

media="screen and (min-width: 769px), print and (min-width: 6in)"

没有 or 关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出，这会将样式应用到宽度超过 769 像素的屏幕或使用至少 6 英寸宽的纸张的打印设备

8.5 指定否定条件

media="not screen and (monochrome)"

要指定否定条件，可以在媒体声明中添加关键字 not，不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备

8.6 向早期浏览器隐藏媒体查询

media="only screen and (min-width: 401px) and (max-width: 600px)"

媒体查询规范还提供了关键字 only，它用于向早期浏览器隐藏媒体查询。类似于 not，该关键字必须位于声明的开头

早期浏览器应该将以下语句 media="screen and (min-width: 401px) and (max-width: 600px)" 解释为 media="screen"。换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义

无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求，它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以，早期浏览器应该将上面的示例解释为：media="only"

因为没有 only 这样的媒体类型，所以样式表被忽略

8.7 易混淆的宽度

device-width/device-height，width/height来做为的判定值

device-width/device-height 是设备的宽度（如电脑手机的宽度不是浏览器的宽度）

width/height 使用 documentElement.clientWidth/Height 即 viewport 的值

09 物理像素、设备独立像素、位图像素

9.1 物理像素和设备独立像素

一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值

设备独立像素（也叫目睹无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后由相关系统转换为物理像素

设备像素比（device pixel ratio）设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：设备像素比 = 物理像素 / 设备独立像素，js中可以通过 window.devicePixelRatio

在这里插入图片描述

9.2 位图像素

1个位图像素是栅格图像（如：png、jpg、gif 等）最小的数据单元。每一个位图像素都包含这一些资深的现实信息（如：显示位置、颜色值、透明度等）

在普通屏幕下是没问题的，但是在 retina 屏幕下就会出现位图像素点不够，从而导致图片模糊的情况

10 浏览器渲染原理

1、处理 HTML 生成 DOM 树

2、处理 CSS 生成 CSSDOM 树

3、将两树合并成 render 树

4、对 render 树进行布局计算

5、将 render 树中的每一个节点绘制到屏幕上

10.1 细化分析

1、浏览器把获取到的 html 代码解析成 1 个 Dom 树，html 中的每个 tag 都是 Dom 树中的 1 个节点，根节点就是我们常用的 document 对象（<html> tag），当然这里包含用 js 动态创建的 dom 节点

2、浏览器把所有样式（主要包括 css 和浏览器的默认样式设置）解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，生成 CSSDOM 树

3、DOM tree 和 CSSDOM tree 合并成 render tree，render tree 中每个 node 都有自己的style，而且 render tree 不包含隐藏的节点（比如 display: none 的节点，还有无样式 head 节点），因为这些节点不会用于呈现，而且不会影响呈现的。注意 visibility: hidden; 隐藏的元素还是会包含到 render tree 中的，因为 visibility: hidden; 会影响布局（layout），会占有空间

4、render tree 构建完毕之后根据样式计算布局，布局阶段的输出结果称为“盒模型”（box
model）。盒模型精确表达了窗口中每个元素的位置和大小，而且所有的相对的度量单位都被转化成了屏幕上的绝对像素位置（根据 CSS2 的标准，render tree 中的每个节点都称为box（Box dimension — 盒子模型），box 所有属性：width、height、margin、padding、left、top、border 等）

5、将这些信息渲染为屏幕上每个真实的像素点了。这个阶段称为“绘制”，或者“栅格化”（rasterizing）

在这里插入图片描述

11 重绘、重排

我们计算它们在当前设备中准确的位置和尺寸。这正是布局阶段要做的的工作，该阶段在英语中也被称为“回流”（reflow），当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。也会回流（其实我觉得叫重新布局更简单明了些）。每个页面至少需要—次回流，就是在页面第―次加载的时候

重绘（repaints）当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color，则就称为重绘。

重绘，重排会影响性能

蓝色：网络通信和HTML解析
黄色：JavaScript执行
紫色：样式计算和布局，即重排
绿色：重绘

11.1 触发重排的方法

以下这些属性和方法需要返回最新的布局信息，重新计算渲染树，就会造成回流，触发重排以返回正确的值。建议将他们合并到一起操作，可以减少回流的次数。这些属性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight；scrollTop、scrollLeft、scrollWidth、scrollHeight；clientTop、clientLeft、clientWidth、clientHeight；getComputedStyle() 、currentStyle()

提高网页性能，就是要降低“重排”和“重绘”的频率和成本，尽量少触发重新渲染

DOM 变动和样式变动，都会触发重新渲染。但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染

以下代码浏览器只会触发一次重排和重绘

div.style.color = "red";
div.style.background = "yellow";
div.style.left = "10px";
div.style.width = "20px";

一般来说，样式的写操作之后，如果有上面那些属性的读操作，都会引发浏览器立即重排，这种重排，不会形成之前队列优化

div.style.color = "red" ;
var height = div.offsetHeight;
div.style.height = height +"px ';

Bad：以下会重排重绘两次

div.style.left = div.offsetLeft + "px";
div.style.top = div.offsetTop + "px";

Good：放到队列一次执行重排重绘一次

var left = div.offsetLeft + "px";
var top = div.offsetTop + "px";
div.style.left = left;
div.style.top = top;

11.2 理论上的解决优化办法

1、DOM 的多个读操作（或多个写操作)，应该放在一起，不要两个读操作之间加入一个写操作

2、离线操作 DOM 如使用隐藏元素 document.createDocumentFragment() cloneNode()

3、修改样式的时候添加类名，或一次性添加到 dom.style.cssText 上等

12 Bootstrap

Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷

它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 BreakingNews 都使用了该项目

国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来

12.1 Bootstrap 技术特点

Bootstrap 是基于 HTML5 和 CSS3 开发的，它在 jQuery 的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分 jQuery 插件
Bootstrap 中包含了丰富的 Web 组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等
Less css 预处理器先不做解释

12.2 Bootstrap特色

适应各种技术水平 Bootstrap 适应不同技术水平的从业者，无论是设计师，还是程序开发人员，不管是骨灰级别的大牛，还是刚入门槛的菜鸟。使用 Bootstrap 既能开发简单的小东西，也能构造更为复杂的应用
跨设备、跨浏览器最初设想的 Bootstrap 只支持现代浏览器，不过新版本已经能支持所有主流浏览器，甚至包括 lE7。从 Bootstrap 2 开始，提供对平板和智能手机的支持
支持响应式设计从 Bootstrap 2 开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验
选用 LESS 构建动态样式当传统的枯燥 CSS 写法止步不前时，LESS 技术横空出世。LESS 使用变量、嵌套、操作、混合编码，帮助用户花费很小的时间成本，编写更快、更灵活的CSS。当然还有很多优势

12.3 前端开发流程

前端工程建设的第一项任务就是根据项目特征进行技术选型。基本上现在没有人完全从 0 开始做网站，React/Angularjs 等框架横空出世，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑
简单构建，优化选型之后基本上就可以开始敲码了，不过光解决开发效率还不够，必须要兼顾运行性能。前端工程进行到第二阶段会选型一种前端自动化构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并
JS/CSS模块化，开发分而治之是软件工程中的重要思想，是复杂系统开发和维护的基石，这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后，前端团队开始思考维护效率，模块化是目前前端最流行的分治手段
组件化开发，分治的确是非常重要的工程优化手段。在我看来，前端作为一种 GUI 软件，光有JS/CSS 的模块化还不够，对于 UI 组件的分治也有着同样迫切的需求

12.4 组件化开发

在这里插入图片描述

解释一下上图特点

页面上的每一个独立的可视/可交互区域都是一个组件
每个组件对应一个目录，组件所需的各种资源（img 字体等 js、css、html）都在这个目录下
组件具有独立性，互不影响可以自由组合
页面只不过是组件的容器而已，负责组合组件形成功能完整的界面

基于这样的工程理念，我们很容易将系统以独立的组件为单元进行分工划分：

在这里插入图片描述

由于系统功能被分治到独立的模块或组件中，粒度比较精细，组织形式松散，开发者之间不会产生开发时序的依赖，大幅提升并行的开发效率，理论上允许随时加入新成员认领组件开发或维护工作，也更容易支持多个团队共同维护一个大型站点的开发