CSS3

发表于 | 分类于

CSS3

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强 或新增 了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的现状

  • PC端浏览器支持程度差，需要添加私有前缀
  • 关于私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

私有前缀

  • 谷歌、苹果浏览器：-webkit-
  • 火狐浏览器：-moz-
  • IE浏览器：-ms-
  • 欧朋浏览器：-o-

在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性

目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

一般来说，CSS3主要是为移动端而生的，因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/
    -webkit-transform: rotate(45deg);
    /*火狐浏览器的前缀 -moz-*/
    -moz-transform: rotate(45deg);
    /*ie浏览器的前缀 -ms-*/
    -ms-transform: rotate(45deg);
    /*opera浏览器的前缀 -o-*/
    -o-transform: rotate(45deg);
    /*规范化后的写法*/
    transform: rotate(45deg);
}

CSS3选择器

基本选择器

  • #id
  • 类
  • 标签
  • 通配符

属性选择器

  • E>F 子代选择器
  • E F 后代选择器
  • E+F 相邻选择器，选择E相邻的后一个元素，不包括自己，元素必须是F（包括标签，类名等）
  • E~F 兄弟选择器，选择E后面所有的兄弟元素，不包括自己，兄弟元素必须是F（包括标签，类名等）（使用通配符*可以选中后面所有的兄弟）

关系选择器

  • E(attr)–选择所有具有attr属性的E元素；
  • E(attr="val")–选择所有属性为attr，值为val的E元素；
  • E(attr^="val")–选择属性为attr，值为val开头的E元素；
  • E(attr$="val")–选择属性为attr，值为val结尾的E元素；
  • E(attr*="val")–选择属性为attr，值中包含val的E元素；
  • E(attr~="val")–选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
  • E(attr|="val-1")–选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。

CSS3伪类选择器

基本伪类

  • a:link {}
  • a:visited {}
  • a:hover {}
  • a:active {}
  • 注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
  • 可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括，爱恨原则

child系列

  • E:first-child 获取到的是E的父元素第一个子元素E（必须是E）；
  • E:last-child 获取到的是E的父元素最后一个子元素E（必须是E）；
  • E:nth-child(1) 获取到的是E的父元素的第1（子元素从1开始计数）个子元素E（必须是E），参数可以是add、even、n+1(n从0开始)；
  • E:nth-last-child(1) 获取到的是E的父元素倒数的第1（子元素从1开始计数）个子元素E（必须是E），参数可以是add、even、n+1(n从0开始)；
  • E:only-child 匹配父元素仅有的一个子元素E（必须只有一个子元素），要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

of-type系列

  • E:first-of-type 获取到的是E的父元素的第一个E元素，只匹配E类型的元素，不是E元素的元素忽略；
  • E:last-of-type 获取到的是E的父元素的最后一个E元素，只匹配E类型的元素，不是E元素的元素忽略；
  • E:nth-of-type(1) 获取到的是E的父元素的第1个E元素，只匹配E类型的元素，不是E元素的元素忽略；
  • E:nth-last-of-type(1) 获取到的是E的父元素的倒数第1个E元素，只匹配E类型的元素，不是E元素的元素忽略；
  • E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E，该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置

其他伪类系列

  • E:focus 在某个元素成为焦点时生效，一般用于input文本输入框；
  • E:not(s) 获取到不含s选择符的E元素
  • E:empty 获取不含有任何节点的E元素
  • E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
  • E:enabled 匹配用户界面上处于可用状态的元素E。
  • E:disabled 匹配用户界面上处于禁用状态的元素E。
  • E:root 匹配E元素在文档的根元素 html

伪元素选择器

  • E:before/E::before 在E元素内第一个子元素前生成一个伪元素，必须有content属性，是行内元素；
  • E:after/E::after 在E元素内最后一个子元素后生成一个伪元素，必须有content属性，是行内元素；
  • E:first-letter/E::first-letter 设置对象内的第一个字符的样式。一般用来设置首字下沉的效果，一般同时设置float:left；
  • E:first-line/E::first-line 设置对象内的第一行的样式。此伪对象仅作用于块对象。
  • E::placeholder ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
  • E::selection 设置对象被选择时的颜色。::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。
  • CSS3伪元素选择器推荐使用::，但是兼容以前版本的浏览器，:写法任有效

【JavaScript支持所有CSS的选择器】

CSS3盒子模型

  • box-sizing:content-box; 标准盒模型，盒子大小=width+padding+border；
  • box-sizing:border-box; 怪异盒模型，盒子大小=width=content+padding+border；

CSS3阴影

text-shadow: 水平偏移值 垂直偏移值 羽化值 阴影颜色; 文字阴影；

  • 水平偏移值，可以为负值
  • 垂直偏移值，可以为负值
  • 羽化值，不可以为负值
  • 阴影颜色，不指定默认为字体颜色

box-shadow:inset 水平偏移值 垂直偏移值 羽化值 阴影外延值 阴影颜色; 盒子阴影

  • none，无阴影
  • inset，第一个值，有此值时为内阴影，没有为外阴影
  • 水平偏移值，可以为负值
  • 垂直偏移值，可以为负值
  • 羽化值，不可以为负值
  • 阴影外延值，阴影延伸增加的值，可以为负值
  • 阴影颜色，不指定默认为盒子颜色

CSS3背景

background-size 设置背景大小

  • background-size: 600px 400px;–指定背景图片大小，比例不同时，图片会失真；
  • background-size: 100% 100%;–指定背景图片为盒子大小，比例不同时，图片会失真；
  • background-size: contain;–指定背景图片等比例缩放，比例不同时，盒子会留白；
  • background-size: cover;–指定背景图片等比例缩放，比例不同时，图片会显示不全；

背景图片等比例缩放居中显示

  • background-size: cover;–指定背景图片等比例缩放，比例不同时，图片会显示不全；
  • background-position:center center;–指定背景图片居中显示；
  • 上面两个属性样式同时使用，保证盒子在变化时，背景图片能够等比例缩放，并且显示图片中间内容；
  • 图片与盒子比例不一致时，图片居中显示 / 背景图片居中显示；

background-clip 设置背景区域大小

盒子的背景区域是整个盒子，包括边框和padding

  • background-clip: border-box;–默认值，设置背景区域包括了边框
  • background-clip: padding-box;–背景区域只包含padding和content
  • background-clip: content-box;–背景区域只包含content
  • background-clip: text;–裁切内容形状的背景，如果是文字，则按照文字的形状裁切背景，会镂空，字设置为透明颜色时，可以看见字的形状背景颜色；

background-origin 设置背景图片原点

设置背景图片的原点的位置，默认是padding的地方开始

  • background-origin: border-box;–设置原点从border开始
  • background-origin: padding-box;–设置原点从padding开始,默认值
  • background-origin: content-box;–设置原点从content开始
  • background-position:0 0;–表示从背景图片的原点左上角显示；

多重背景

  • CSS3背景可以设置多个背景图片，用,隔开，颜色设置在最后，用,隔开，颜色只能生效一个；
  • background会覆盖所有background-开头的样式，如果需要写在合写的background的下面；

background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。

background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。

background: url(images/mn1.jpg) no-repeat top left, url("images/mn2.jpg") no-repeat right bottom, pink;

CSS3渐变

注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效；

linear-gradient 线性渐变

  • 以某条直线向一个方向渐变
  • background-image: linear-gradient(方向, 颜色1, 颜色2);
  • background-image: linear-gradient();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*
注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效
渐变的两个要求：有区间，有颜色变化。
*/
/* 最简单的渐变 */
background-image: linear-gradient(red, green);
/* 设定渐变的方向 */
background-image: linear-gradient(to right, red, green);
/* 也可以设定渐变的角度 */
background-image: linear-gradient(45deg, red, green);
/* 设定渐变的范围 */
background-image: linear-gradient(to right, red 20%, green 80%)
/* 每一个区间表示渐变颜色的范围 */
background-image: linear-gradient(to right, red 20%, green 20%)

/* 发廊效果 */
/* 渐变：  1，颜色发生改变  2. 有一定渐变的范围 */
div:nth-child(6) {
  background-image: linear-gradient(45deg,
  red 25%,
  green 25%,
  green 50%,
  red 50%,
  red 75%,
  green 75%);
  /* 设置背景图的大小 */
  background-size: 100px 100px;
  /* background-repeat: no-repeat; */
  background-position: 0 0;
  transition: all 5s linear;
}

div:nth-child(6):hover {
  background-position: 800px 0;
}

radial-gradient 径向渐变

  • 以一个中心点向四周渐变
  • background-image: radial-gradient(半径 at 位置, 颜色1, 颜色2);
  • background-image: radial-gradient()
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 1. 最简单的渐变 */
background-image: radial-gradient(red, green);

/* 2. 指定圆的半径和圆心 */
background-image: radial-gradient(200px at center, red, green);

/* 3. 指定椭圆 */
background-image: radial-gradient(200px 80px at center, red, green);

/* 4. 指定范围 */
background-image: radial-gradient(200px at center, green 50%, red 50%);

/* 位置名词，数值px，百分比； */

CSS3 过渡

过渡的属性

支持所有元素，包含伪对象:after和:before；

  1. 如果两个状态发生改变，没有过渡，效果是瞬间变化的
  2. 如果加上了过渡，那么这个过程就会有动画的效果。
  3. 整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。

transition

  • transition-property:all;–匹配所有属性（可以单独写width、height等）
  • transition-duration:1s;–过渡持续的时间；
  • transition-delay:2s;–过渡延时时间，表示延迟2s执行过渡动画效果；如果合写，延时时间要在过渡持续时间后面；
  • transition-timing-function:–过渡的速度
    • linear: 线性过渡(匀速动画效果)。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease: 平滑过渡(默认效果)。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • steps: 设置过渡在过渡持续的时间内，划分多少等分来执行；
    • ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    • ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    • ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
    • step-start：等同于 steps(1, start)–延迟1秒在开始执行；
    • step-end：等同于 steps(1, end)–1秒内执行到结束；
    • steps(<integer>[, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参 - 数是可选的，默认值为end。
    • cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内；
  • transition:–合写可以不按顺序，但是时间的取值顺序是：过渡持续时间在前，延时时间在后，如果只有一个时间，只能为持续时间，延时默认为0；
1
2
3
/* 合写没有顺序，但是延迟时间一定是在持续时间的后面 */
/* 属性 时间 延时 速度 */
transition: width 1s 3s linear;

CSS3 2D转换

  • transform:scale();–缩放效果，值没有单位，是原始大小的倍数；
1
2
3
4
5
6
7
8
9
10
11
/* scale缩放 */
transform: scaleX(0.5);/*让宽度变化*/
transform: scaleY(0.5);/*让高度变化，注意不能写多个transform，不然会覆盖。*/
transform: scale(0.5);/*让宽度和高度同时变化*/

/*
注意：
scale接收的值是倍数，因此没有单位
scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
可以通过transition-origin设定旋转原点
*/
  • transform:translate();–平移效果，效果类似position: relative;不会对其他盒子造成影响；值如果是百分比，参考的是自身大小，盒子绝对居中；
1
2
3
4
5
6
7
8
9
10
11
/* translate平移 */
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);

/*
注意：
translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
translate移动的元素并不会影响其他盒子，类似于相对定位。position: relative;
*/
  • transform:rotate();–旋转效果，单位是度数，可以是负值；可以通过transform-origin设置旋转原点；
  • transform-origin:50% 50%;–转换位置，默认值：50% 50%，效果等同于center center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
/*
默认值：50% 50%，效果等同于center center
适用于：所有块级元素及某些内联元素
 继承性：无
动画性：当值为数值时
计算值：除了指定绝对值，否则都为百分比

媒体：视觉
取值：
<percentage>： 用百分比指定坐标值。可以为负值。
<length>： 用长度值指定坐标值。可以为负值。
left： 指定原点的横坐标为left
center①： 指定原点的横坐标为center
right： 指定原点的横坐标为right
top： 指定原点的纵坐标为top
center②： 指定原点的纵坐标为center
bottom： 指定原点的纵坐标为bottom 说明：
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
对应的脚本特性为transformOrigin。
*/
  • transform:skew();–斜切效果，取值可以是角度；
1
2
3
4
5
/* skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个 */
/* 在水平方向倾斜30deg */
transform: skewX(30deg);
/* 在垂直方向倾斜30deg */
transform: skewY(30deg);
  • transform:–合写顺序；
    • 顺序对效果有影响，rotate()会带着坐标轴一起旋转，不需要特殊效果话，所以rotate要写在最后面；
    • 如果元素有初始transform状态，改变状态时，效果要一一对应，否则会出现问题；
1
2
3
4
5
6
transform:translateX(800px) scale(1.5) rotate(360deg) ;
/*
1. transform属性只能写一个，如果写了多个会覆盖
2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）
3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应
*/

CSS3 3D转换

坐标轴；用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

透视效果

perspective:1000px;–透视效果，远大近小的效果，视觉上像3D效果；

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。

说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。

注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

三维空间效果

transform-style: preserve-3d;–设置子盒子在三维空间内；

  • flat：指定子元素位于此元素所在平面内
  • preserve-3d：指定子元素定位在三维空间内

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。

决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 transform-style 属性。

要想实现3D效果，必须给父盒子添加transform-style: preserve-3d;这是3D效果的关键属性；

perspective: 和 transform-style: preserve-3d; 区别；

  • perspective:实现的是一个视觉效果，实质上还是2D平面；
  • transform-style: preserve-3d;是父盒子为子元素提供三维空间，子元素就可以实现3D效果了；

transform-style与perspective的区别：

  • 透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，
  • preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。
  • 一个3d元素可以没有perspective，但是不能没有transform-style；

transform:rotate()

  • transform: rotate(45deg); 让元素在平面2D中旋转
  • transform: rotateX(45deg); 让元素沿着X轴转45度
  • transform: rotateY(45deg); 让元素沿着Y轴转45度
  • transform: rotateZ(45deg); 让元素沿着Z轴转45度

transform: translate()

  • transform: translateX(45px); 沿着X轴的正方向移动45px
  • transform: translateY(45px); 沿着Y轴的正方向移动45px
  • transform: translateZ(45px); 沿着Z轴的正方向移动45px

立方体

先用transform:rotate实现旋转，带着坐标轴一起旋转；再用transform: translateZ平移，实现3D移动的效果；

CSS3 动画

animation–动画

动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

动画与过渡的区别：

  1. 过渡必须触发，需要两个状态的改变。
  2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多。

使用动画的步骤：

  1. 通过@keyframes指定动画序列
  2. 通过百分比或者from/to将动画分割成多个节点
  3. 在各个节点中分别定义样式
  4. 通过animation将动画应用于相应的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 声明动画的两种方式 */
/* from...to只能设置开始和结束两个节点 */
@keyframes 动画名 {
from {}
to {}
}

/* 百分比可以设置多可节点动画效果 */
@keyframes 动画名 {
0% {}
25% {}
50% {}
75% {}
100% {}
}
  • animation-name: 动画名称，由@keyframes定义的
  • animation-duration: 动画的持续时间
  • animation-timing-function: 动画的过渡类型
    • linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    • ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    • steps: 将动画划分为多少等分，在动画持续时间内执行完成；
  • animation-delay: 动画的延迟时间
  • animation-iteration-count: 动画的循环次数
    • 默认1次
    • infinite–无限循环
    • 数字–循环多少次
  • animation-direction: 设置动画在循环中是否反向运动
    • normal: 正常方向
    • reverse: 反方向运行
    • alternate: 动画先正常运行再反方向运行，并持续交替运行
    • alternate-reverse: 动画先反运行再正方向运行，并持续交替运行
  • animation-fill-mode: 设置动画时间之外的状态
    • none: 默认值。不设置对象动画之外的状态，有延迟时，在元素默认位置等待
    • forwards: 设置对象状态为动画结束时的状态，有延迟时，在元素默认位置等待
    • backwards: 设置对象状态为动画开始时的状态，有延迟时，在动画开始处等待执行
    • both: 设置对象状态为动画结束或开始的状态，有延迟时，在动画开始处等待执行
  • animattion-play-state: 设置动画的状态。
    • 一般用来用来配合hover暂停动画
    • running: 运动
    • paused: 暂停

animation–合写属性，无顺序要求，第一个时间是动画持续时间；有两个时间时，第二个是延时时间，没有默认为0；

【animate动画库：animate.css】

字体图标 @font-face

  • @font-face–自定义一个字体
  • 将字体图标添加到一个类，需要使用时，为标签添加两个类，自定义字体类和字体图标类
  • font-awesome字体图标库

flex布局

弹性布局，伸缩布局，flex布局

布局：其实就是调整元素在水平和垂直方向上的布局方式。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

【使用flex布局，会改变子元素为行内块元素；】

display: flex;–使用这个属性的时候，这个盒子就有了主轴和侧轴的概念；

  • 当给一个盒子设置了display：flex之后，这个盒子就有了主轴 和侧轴 的概念。
  • 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
  • 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
  • 方向：默认主轴从左向右 ，默认侧轴从上到下

flex-direction–是用来调整主轴的方向，默认是水平方向（从左向右）；了解即可，一般来说，很少调整主轴的方向。

  • row: 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
  • row-reverse: 对齐方式与row相反。
  • column: 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
  • column-reverse: 对齐方式与column相反。

justify-content–设置子元素在主轴上的对齐方式

  • flex-start: 左对齐，盒子默认连在一起；
  • flex-end: 右对齐，盒子默认连在一起；
  • center: 水平居中对齐，盒子默认连在一起；
  • space-around: 横向分布，子元素均匀分布在主轴上，包括空白区域，左右两边留白；
  • space-between: 横向分布，子元素均匀分布在主轴上，两端子元素顶到父盒子边缘，左右两边不留白；

flex-wrap–设置子元素换行

  • nowrap: flex容器默认为单行。该情况下flex子项可能会溢出容器；
  • wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
  • wrap-reverse: 反转 wrap 排列。

align-items–设置单行子元素的对齐方式

  • flex-start: 上对齐，盒子默认连在一起；
  • flex-end: 下对齐，盒子默认连在一起；
  • center: 垂直居中对齐，盒子默认连在一起；
  • baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  • stretch: 上下拉伸子元素到父盒子高度，前提不能写死子元素高度；

align-content–设置多行子元素的对齐方式

  • flex-start: 上对齐堆叠，盒子默认连在一起；
  • flex-end: 下对齐堆叠，盒子默认连在一起；
  • center: 垂直居中对齐堆叠，盒子默认连在一起；
  • space-between: 纵向均匀分布，上下两边不留白，父盒子够高时，子元素行均匀分开；
  • space-around: 纵向均匀分布，上下两边留白，子元素行两边均分空白区域；
  • stretch: 各行将会伸展以占用剩余的空间。前提子元素不能写死高度；

给子元素设置的属性

  • 子元素优先级大于父元素属性
  • flex:–设置子元素在主轴上占有多少位置，所有子盒子的flex值相加平分主轴位置；
  • order:–设置子元素的顺序，默认为0，数值越小排序靠前；
  • align-self:–设置子元素在侧轴上的位置；
    • 参考align-items属性值
    • auto: 如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
    • flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    • center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    • baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
    • stretch: 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

公共弹性版心设置

  • width: 100%;
  • max-width: 用来设置最大宽度
  • min-width: 用来设置最小宽度

盒子绝对居中

绝对定位盒子居中

  • 脱标定位
  • top: 50%; left: 50%;
  • margin-top: -自身高度的一半; margin-left: -自身宽度的一半;

2D转换盒子绝对居中

  • position: absolute;top:50%;left:50%;–不需要盒子的大小写死了；
  • transform:translate(-50%, -50%);–平移自身大小的-50%；
  • 二者搭配可以实现盒子绝对居中；

弹性布局盒子绝对居中

  • 弹性布局
  • html,body{width:100%; height:100%}
  • body{display:flex; justify-content: center; align-items: center;

鼠标滚轮滚动事件

  • mousewheel
  • e.wheelDelta;–向下滚动是负值，向上滚动是正值；
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多