【CSS3 笔记】基础内容

最新推荐文章于 2024-04-29 15:38:20 发布
最新推荐文章于 2024-04-29 15:38:20 发布
阅读量454 收藏 2
点赞数
分类专栏： 前端学习笔记 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JT61100/article/details/125163423
版权

文章目录

01 What is CSS3

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

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

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

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

前缀浏览器
-webkitChrome、Safari
-mozFirefox
-msIE
-o、15年之后为-webkitOpera
<!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: #f00
      text-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 top50% 0
right = right cneter = center right100% 或 100% 50%
bottom = bottom cneter = center bottom50% 100%
left = left cneter = center left0 或 0 50%
center = center center50% 或 50% 50%
top left = left top0 0
right top = top right100% 0
bottom right = right bottom100% 100%
bottom left = left bottom0 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描述
widthlengthyes渲染界面的宽度
heightlengthyes渲染界面的高度
device-widthlengthyes设备屏幕的输出宽度
device-heightlengthyes设备屏幕的输出高度
orientationportrait|landscapenoheight 是否大于或等于 width，即横屏或竖屏
portrait代表是
landscape代表否
aspect-ratio整数 / 整数yeswidth 与 height 的比率
device-aspect-ratio整数 / 整数yesdevice-width 与 device-height 的比率
如常见的显示器比率：4/3，16/9，16/10
color整数、yes每种色彩的字节数。如果不是彩色设备，则值等于0
color-index整数yes色彩表中的色彩数。如果没有使用彩色查询表，则值等于0
monochrome整数yes单色帧缓冲器中每像素字节。如果不是单色设备，则值等于0
resolutiondpi / dpcmyes设备的分辨率。如：96dpi，300dpi，118dpcm
scanprogressive|interlaceno定义电视类设备的扫描工序
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）都在这个目录下
  • 组件具有独立性，互不影响可以自由组合
  • 页面只不过是组件的容器而已，负责组合组件形成功能完整的界面

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

在这里插入图片描述

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

宁阿宁阿宁
关注
专栏目录
ActionChains之move_by_offset的使用方法
lemonlemons的博客
08-28 2万+
自动化测试要用到move_by_offset，但是网上的详细讲解很少，所以在此基于自己的理解做个记录。 首先，参数中的x,y坐标是根据浏览器窗口来定位，所以可以说是绝对定位，那么首先就需要找出一个元素在浏览器中的位置，步骤如下： 1、page ruler工具 这是一个浏览器插件，下载安装在谷歌浏览器中就可以使用了，操作非常简单，效果是这个样子的： 黑框框选中了输入框的位置，可以看到上面...
python+selenium使用ActionChains类move_by_offset拖动鼠标重复执行位移问题
YungGuo的博客
12-03 7874
首先声明，以下都是个人见解，如果错误，欢迎指正！ 首先说下这个逛论坛发现的问题，其实吧对于这个问题刚开始我也不懂，但谁让我是一个乐于探究的人呢，于是就用代码去测试这个问题，发现在循环内使用move_by_offset去移动鼠标的时候确实是会来回重复移动。循环移动代码： for x in track: action.move_by_offset(xoffset=x, yoffset=0).perform() time.sleep(0.2) action.release().perform()
CSS学习笔记 01、CSS3基础知识学习
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-05 524
文章目录前言CSS3基本了解如何学习？一、什么是CSS1.1、发展史1.2、快速入门(三种引用方式)扩展：外部样式两种写法二、选择器2.1、基本选择器(标签、类、id)2.2、元素关系选择器(三个，层次位置)2.3、属性选择器(6种)2.4、复合选择器(后代、交集、并集)2.5、序号选择器(用于定位):firstchild与:lastchild:nth-child()与:nth-of-type()三、伪类选择器、元素基本伪类(4个)新增伪类(css新增，6个)伪元素(CSS新增，5个)四、层叠性与选择器权重
CSS3基础知识学习总结笔记
叔叔有糖吃的专栏
06-18 1172
1.CSS3选择器详解1.1 属性选择器：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> [id*="div"]{ color: aqua; } [id^="div"]{
CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
weixin_30954607的博客
07-31 280
CSS3基础——笔记 　　CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表"或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。 一、CSS基础用法 　　CSS代码可以在任何文本编辑器中打开和编辑。因此，不管读者有没有变成基础，初次接触CSS时会感到很简单。 1.1...
CSS3基础与进阶
编程小菜鸟的笔记
09-09 386
一、CSS3新增的选择器 1、属性选择器 1）att^='val' :属性att的值以"val"开头的元素 2）att$='val' : ...结尾 3）att*='val' : ...包含 例 a[href='http^']{ } --a标签且href属性以http开头 2、结构伪类选择器 1）:root 选择匹配文档的根元素 2）E:nth-child(n) 选择在
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
CSS基础_css_笔记
09-23
**CSS基础：开启网页设计之旅** CSS，全称Cascading Style Sheets，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它是网页设计的重要组成部分，允许我们将表现与内容分离，使网页...
CSS3笔记1
08-04
本篇笔记主要介绍了CSS3的基础概念、发展历史、核心特性以及选择器和布局相关的知识。通过学习，你可以更好地掌握网页设计的外观控制和布局策略，为创建美观、响应式的网页奠定基础。随着CSS3的不断发展，更多的新...
selenium鼠标操作 细节理解
weixin_45080737的博客
11-16 668
move_by_offset 理解误区
曲鸟全栈UI自动化教学(五)：Selenium的键盘鼠标事件详解_selenium move_by_offset(1)
最新发布
2401_84281638的博客
04-29 411
另外，通过号做连接组合按键也是可行的如果想同时按下三个或更多按键键，则在括号中使用或号追加参数即可，例如在输入框同时输入abcKeys。
selenium鼠标操作 ActionChains对象用法
weixin_41887201的博客
12-25 1356
1.ActionChains基本用法 首先需要了解ActionChains的执行原理，当你调用ActionChains的方法时，不会立即执行，而是会将所有的操作按顺序存放在一个队列里，当你调用perform()方法时，队列中的时间会依次执行。 2、ActionChains方法列表 click_and_hold(on_element=None) ——点击鼠标左键，不松开 context_click(on_element=None) ——点击鼠标右键 double_click(on_element=None).
2024世界技能大赛某省选拔赛“网络安全项目”B模块--数字取证解析
2401_84247760的博客
04-28 343
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
selenium之鼠标操作详解
一个不太黑的测试人~
08-28 6488
人类频繁的用手操作鼠标和键盘，为了解决这个问题，selenium工具为我们提供了一个类来处理这些事件— Actionchains ，该类可以完成鼠标移动，鼠标点击事件、键盘输入、内容菜单交互等交互行为。
Webdriver 的moveByOffse的用法注意点
wjl3030的博客
12-26 2241
Webdriver 的moveByOffse的用法注意点 moveByOffset是记住上一个位置继续移动，并只能短距离移动，长距离移动无法执行 以下是移动280的例子 WebElement initial = driver.findElement(By.xpath("//*[@id=“app”]/div/div/div/div/div[2]/form/div[4]/div/div[3]")); ...
前端入门02--CSS详解
龙涎果的学习博客
09-20 641
HTML5 + CSS3 + JavaScript 结构 + 表现 + 交互 1、什么是CSS 如何学习 CSS是什么 CSS怎么用（快速入门） CSS选择器（重点+难点） 美化网页（文字，阴影，超链接，列表，渐变…） 盒子模型 浮动 定位 网页动画（特效效果） 网站推荐： W3C：https://www.w3school.com.cn/index.html 菜鸟教程：https://www.runoob.com/ 1.1、什么是CSS Cascading Style Sheet 层叠样式表 CSS：表
CSS3 知识点总结：详解篇
m0_57587753的博客
01-20 2966
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。 CSS3 的新特性如下： ● 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 ● 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 ● 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 ● 新增了全新的布局方案 —— 弹性盒子。 ● 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 ……
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值