CSS3

弹性布局 - flex

display:flex

与传统布局对比

传统布局：布局繁琐。移动端不友好兼容性好

flex 布局：布局简单，移动端使用广泛

兼容性：pc 端浏览器支持情况差、IE11 或更低版本不支持 flex 或仅支持部分

选择：pc：传统布局。移动端或不考虑兼容性使用 flex

基本概念

flex 是 flexible Box 的缩写，意为"弹性布局"，任何一个容器都可以指定为 flex 布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container）。所有子元素自动成为容器成员，称为 Flex 项目（flex item）

不会脱离文档流
flex 布局中，子元素的 float、clear 和 vertical-align 属性将失效

通过父盒子添加 flex 属性，来控制子盒子的位置和排列方式

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

父项常见属性

属性	说明
`flex-direction`	主轴方向
`flex-wrap`	子元素是否换行
`flex-flow`	flex-direction 和 flex-wrap
`justify-content`	主轴排列方式
`align-items`	交叉轴排列方式（单行）
`align-content`	交叉轴排列方式（多行）

flex-direction

主轴方向

css

flex-direction: row | row-reverse | column | column-reverse;

row (主轴默认)：横向排列（左右）
row-reverse：横向反向排列（右左）
column（侧轴默认）：纵向排列（上下）
column-reverse ：纵向反向排列（下上）

flex-wrap

子元素是否换行

css

flex-wrap: nowrap | wrap | wrap-reverse;

nowarp（默认）：不换行
warp：换行
wrap-reverse：换行，反向排列，（从下到上，从左到右）

flex-flow

简写属性

css

flex-flow: <flex-direction> || <flex-wrap>;

justify-content

主轴排列方式

css

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认）：从头部开始
flex-end：从尾部开始
center：居中对齐
space-between：两端对齐，轴线之间的间隔平均分布
space-around：环绕对齐，每根轴线两侧的间隔都相等
space-evenly：等距离排列

aligin-items

交叉轴排列方式（单行）

css

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start（默认）：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：居中
baseline：项目的第一行文字的基线对齐
stretch：拉伸子元素（图片不行）

aligin-content

交叉轴排列方式（多行）

css

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

stretch（默认）：未设置高度或设为 auto，将占满整个容器的高度
flex-start：从头部开始
flex-end：从尾部开始
center：居中对齐
space-between：两端对齐，轴线之间的间隔平均分布
space-around：环绕对齐，每根轴线两侧的间隔都相等
space-evenly：等距离排列

space-around - 首间距 + 尾间距 = 其他间距 space-evenly - 首间距 = 尾间距 = 其他间距

子项常见属性

属性	说明
`order`	项目的排列顺序，默认为 0
`flex-grow`	项目的放大比例，默认为 0
`flex-shrink`	项目的缩小比例，默认为 1
`flex-basis`	在分配多余空间之前，项目占据的主轴空间大小
`flex`	`flex-grow`, `flex-shrink` 和 `flex-basis`的简写
`align-self`	子项交叉轴排列

order

数值越小，越靠前，默认值0。

css

order: <integer>;

flex-grow

按flex-grow比例分配剩余空间。

默认值0：存在剩余空间，也不放大。

css

flex-grow: <number>; /* default 0 */

flex-shrink

在flex元素默认宽度之和大于容器时发生。

默认值1：空间不足，将会缩小。

css

flex-shrink: <number>; /* default 1 */

flex-basis

默认为auto，项目自身大小。此属性帮助浏览器计算主轴剩余空间

同时设置 flex-basis（除auto）和 width/height，flex-basis优先级更高

值为0，表示伸缩时不考虑尺寸

css

flex-basis: <length> | auto; /* default auto */

flex

简写属性。默认值0 1 auto。设置了弹性项目如何增大或缩小以适应其弹性容器中可用空间。

css

flex: none | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' > ];

关键字

inital：根据自身宽高设置尺寸。会缩短，不会拉长，flex: 0 1 auto
auto：同上，会拉长，会缩短，flex：1 1 auto
none：同上，非弹性，不会拉长，也不会缩短，flex：0 0 auto

css

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
flex: 1; /* flex:1 1 0 */
flex: auto; /* flex: 1 1 auto */
/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

align-self

子项在交叉轴排列方式，可覆盖 align-items。

默认值auto：继承父元素的align-items属性，如果没有父元素，则等同于stretch

css

align-self: auto | flex-start | flex-end | center | baseline | stretch;

auto（默认）：继承父容器 align-items 属性，没有父容器则为"stretch"
stretch：拉伸
center：居中
flex-start：最上面
flex-end：最下面
baseline：容器的基线

阴影

文本阴影：text-shadow:横向偏移纵向偏移模糊距离颜色

边框阴影：box-shadow:水平位置垂直位置模糊距离阴影尺寸（影子大小）阴影颜色内/外阴影

css

div {
  width: 200px;
  height: 200px;
  border: 10px solid red;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) outset;
  /*默认outset，设置inset为内阴影*/
}

边框阴影和边框没有关系

盒模型

将 padding 内边距和边框带来增大盒子的影响去掉，不能去 margin 影响

css3 盒子模型：box-sizing:border-box;

传统盒子模型：box-sizing: content-box

新增选择器

新增属性选择器

属性选择器	说明
[属性 ^ =值]	以指定字符开头的属性值的元素
[属性 $ =值]	以指定字符结尾的属性值的元素
*[属性 = 值]**	包含当前值的元素

新增伪对象选择器

给元素追加一个虚拟标签，由 css 加载，可以节省 html 的资源开销

::after：指定标签后添加一个对象

::before：指定标签前添加一个对象

:after 和 ::after 区别

css3 引入用于区别伪类和伪元素，:伪类，::伪元素，css3 伪元素不支持 :写法
对于之前有的伪元素，:和::效果相同，兼容 ie 用:，其他用::

css

元素::after {
  content: '';
}

注意：伪对象样式中，必须有 content 属性，否则伪对象无效

伪对象不是实际标签，使用 css 样式模拟一个标签
伪元素是行元素
权重为 1

背景渐变

背景线性渐变

起始方向： 方位名词或者度数

如果省略默认就是 top

css

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);

背景渐变必须添加浏览器私有前缀

2D 转换

移动 - translate

transform:translate(x,y);

使用 translateX 和 translateY 设置 x 轴或者 y 轴，里面只设置一个值即可

translate 中 100%，是相对于本身的宽度和高度来进行计算
行内标签没有效果

不影响其他元素的位置

旋转 - rotate

transform:rotate(角度);

单位：deg。值为正，顺时针。值为负，逆时针。

设置旋转中心点

transform-origin:横向坐标纵向坐标;

默认中心点（50% 50%）（center center）
取值：像素（px）或方位名词（left,right,top,bottom,center）

缩放 - scale

transform:scale(值)

倍数（整数，小数），两个值（宽度，高度）

中心点缩放，不影响其他盒子

补充：zoom 和 transform 区别

zoom：2

默认以左上角，占位

transform:scale(2);

默认以中心点，不占位

综合写法

tranform:translate() rotate() scale()

顺序会影响转换效果（先旋转会改变坐标轴方向）
尽量先写位移

过渡

transition:动画css属性过渡时间秒数速度类型延迟的秒数

基本使用

css

img {
  display: block;
  margin: 50px auto;
  border: 1px solid #000;
  /* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
  transition: transform 2s linear;
}
img:hover {
  transform: scale(1.5);
}

常用属性

属性	描述
transition	简写属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	过渡效果花费的时间。默认是 0s
transition-timing-function	过渡效果的时间曲线。默认是 "ease"
transition-delay	过渡效果何时开始。默认是 0s

运动曲线

linear - 匀速
ease - 逐渐慢下来
ease-in - 加速
ease-out - 减速
ease-in-out - 加速再减速

动画

基本使用

通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

先定义动画
调用定义好的动画

css

/*定义*/
@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}
/*调用*/
div {
  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；;
}

动画序列：0% （from）是动画开始，100 % （to）是动画完成
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果，可以改变多次

常见属性

属性	描述
@keyframes	规定动画
animation	简写属性
animation-name	动画的名称（必须）
animation-duration	动画完成一个周期花费秒或毫秒默认 0。（必须）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	动画何时开始
animation-iteration-count	动画被播放的次数，默认 1 infinite
animation-direction	是否在下一周期逆向播放 normal 正常（默认），alternate 逆向
animation-play-state	动画是否正在运行或暂停 running 运行（默认），paused 暂停
animation-fill-mode	动画结束后状态 forward 终点（默认），backwards 起点

速度曲线

属性	描述
linear	匀速
ease	低速开始，加快，慢慢减速（默认）
ease-in	低速开始
ease-out	低速结束
ease-in-out	低速开始，低速结束
steps（）	指定时间间隔数量（步长）

动画简写

css

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode;

简写属性不包括animation-play-state

css

/*匀速移动2s，1s后开始，无限循环，逆向，终点*/
animation: move 2s linear 1s infinite alternate forwards;

3D 转换

近大远小，物体和面遮挡不可见

x 轴：水平向右
y 轴：垂直向下
z 轴：垂直屏幕

位移 - translate3d

transform: translate3d(x, y, z)：其中 x、y、z 分别指要移动的轴的方向的距离。xyz 不能省略，用 0 填充

translateX、translateY、translateZ

旋转 - rotate3d

transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度 transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度 transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

xyz 表示角度

transform: rotate3d(x, y, z, 45deg)：沿自定义轴旋转 45 deg 为角度

xyz 表示旋转矢量

css

transform: rotate3d(1, 1, 0, 180deg) /*沿着对角线旋转 45deg*/
transform: rotate3d(1, 0, 0, 180deg) /*沿着 x 轴旋转 45deg*/

左手准则

rotateX：左手的拇指指向 x 轴正方向，其余手指弯曲方向就是该元素沿着 x 轴旋转方向
rotateY：左手的拇指指向 y 轴正方向，其余手指弯曲方向就是该元素沿着 y 轴旋转方向
rotateZ：无

透视 - perspctive

透视也称为视距，就是人的眼睛到屏幕的距离。

距离视觉点越近的在电脑平面成像越大，越远成像越小
单位像素
透视需要写在被视察元素的父盒子上面

css

body {
  perspective: 1000px;
}

translateZ 与 perspecitve 的区别

translateZ 给子元素设置，perspecitve 给父级设置

呈现 - transfrom-style

控制子元素是否开启三维立体环境

transform-style: flat - 子元素不开启 3D 立体空间（默认）

transform-style: preserve-3d - 子元素开启立体空间

写在父级，影响子盒子

媒体查询

媒体查询（Media Query）是 CSS3 新语法。

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

语法规范

@media - 开头

mediatype - 媒体类型

all - 所有设备
print - 打印机和打印预览
screen - 电脑、平板、手机

and not only - 关键字

and - 多个媒体类型连接到一起
not - 排除某个媒体类型（可省）
only - 指定某个媒体类型（可省）

media feature - 媒体特性

width (可见区域)| min-width （最小可见区域）| max-width（最大可见区域）

css

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

尽量从小到大书写，由于权重关系，可使代码更简洁

CSS 变量

变量声明

变量名前面要加两根连词线（--）

CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。与color、font-size等正式属性没有什么不同，只是没有默认含义。

变量名大小写敏感，--header-color和--Header-Color是两个不同变量

var()函数

var() 函数：用于读取变量

css

<var()> = var( <custom-property-name> , <declaration-value>? )

custom-property-name：css变量名

declaration-value：css变量默认值

第二个参数不处理内部的逗号或空格，都视作参数的一部分

css

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var()函数还可以用在变量的声明

css

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

变量值只能用作属性值，不能用作属性名

css

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

变量类型

变量值为字符串，可以与其他字符串拼接

css

--bar: 'hello';
--foo: var(--bar)' world';

变量值为数值，不能与数值单位直接连用，使用calc()函数

css

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

css

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

变量值带有单位，就不能写成字符串

css

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。

变量的作用域就是它所在的选择器的有效范围

css

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围

全局的变量通常放在根元素:root，确保任何选择器都可以读取

css

:root {
  --main-color: #06c;
}

变量应用

在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值

css

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

兼容性处理

不支持 CSS 变量的浏览器，采用下写法

css

a {
  color: #7F583F;
  color: var(--primary);
}

也可使用@support命令进行检测

css

@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

JavaScript 操作

检测浏览器是否支持 CSS 变量

javascript

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

JavaScript 操作 CSS 变量

javascript

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

意味着，JavaScript 可以将任意值存入样式表。

javascript

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

对 CSS 无用的信息，也可以放入 CSS 变量。

css

--foo: if(x > 5) this.width = 10;

虽然 --foo 在 CSS 无效，但是可以被 JavaScript 获取

CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。

参考链接

https://www.ruanyifeng.com/blog/2017/05/css-variables.html

CSS3 ​

弹性布局 - flex ​

与传统布局对比 ​

基本概念 ​

父项常见属性 ​

flex-direction ​

flex-wrap ​

flex-flow ​

justify-content ​

aligin-items ​

aligin-content ​

子项常见属性 ​

order ​

flex-grow ​

flex-shrink ​

flex-basis ​

flex ​

align-self ​

阴影 ​

盒模型 ​

新增选择器 ​

新增属性选择器 ​

新增伪对象选择器 ​

背景渐变 ​

背景线性渐变 ​

2D 转换 ​

移动 - translate ​

旋转 - rotate ​

缩放 - scale ​

综合写法 ​

过渡 ​

基本使用 ​

常用属性 ​

运动曲线 ​

动画 ​

基本使用 ​

常见属性 ​

速度曲线 ​

动画简写 ​

3D 转换 ​

位移 - translate3d ​

旋转 - rotate3d ​

左手准则 ​

透视 - perspctive ​

呈现 - transfrom-style ​

媒体查询 ​

语法规范 ​

CSS 变量 ​

变量声明 ​

var()函数 ​

变量类型 ​

作用域 ​

变量应用 ​

兼容性处理 ​

JavaScript 操作 ​

参考链接 ​

CSS3

弹性布局 - flex

与传统布局对比

基本概念

父项常见属性

flex-direction

flex-wrap

flex-flow

justify-content

aligin-items

aligin-content

子项常见属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

阴影

盒模型

新增选择器

新增属性选择器

新增伪对象选择器

背景渐变

背景线性渐变

2D 转换

移动 - translate

旋转 - rotate

缩放 - scale

综合写法

过渡

基本使用

常用属性

运动曲线

动画

基本使用

常见属性

速度曲线

动画简写

3D 转换

位移 - translate3d

旋转 - rotate3d

左手准则

透视 - perspctive

呈现 - transfrom-style

媒体查询

语法规范

CSS 变量

变量声明

var()函数

变量类型

作用域

变量应用

兼容性处理

JavaScript 操作

参考链接