css3新特性

目录

新增选择器

属性选择器

 结构伪类选择器

新增结构(位置)伪类：

空伪类

目标伪类

排除伪类

伪元素

新增颜色

CSS3 文本效果

text-shadow

语法

text-overflow

语法

word-wrap

语法

word-break

语法

盒模型

 边框

border-radius

语法

box-shadow

语法

border-image

语法

背景

background-image

background-size

background-origin

语法

属性值

background-clip

语法

多背景

渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(angle, color-stop1, color-stop2);

径向渐变（Radial Gradients）- 由它们的中心定义

转换 transform

2D转换

translate() 移动

rotate() 旋转

scale() 缩放

skew() 倾斜

语法  transform:skew( [,]);

matrix()

3D转换

translate3d(x,y,z)3D位移

rotate3d(x,y,z) 3D旋转

​编辑

perspective 透视

transform-style 3D呈现

rotateX()

rotateY()

转换属性

转换中心点 transform-origin 

过渡transition

动画@keyframes 规则

弹性盒子(Flex Box)

flex-direction

语法

justify-content 属性

align-items 属性

语法

flex-wrap 属性

语法

align-content 属性

语法

align-self

语法

多媒体查询@media 规则

---

新增选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

根据特定的属性选择，标签[属性]的形式

选择器	含义
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元素

 结构伪类选择器

伪类选择器有：

• :link 选择所有未访问链接
• :active 选择活动链接（比如鼠标按下未弹起）
• :visited 选择所有访问过的链接
• :hover 选择鼠标在链接上面时
• :root 选择文档的根元素（html)
• :focus 选择具有焦点的输入元素
• :enabled 选择器匹配每个启用的的元素（主要用于表单元素）
• :disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。

• :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）

• :valid  用于匹配输入值为合法的元素 (需要根据指定条件验证时设置指定样式)

• :invalid 用于匹配输入值为非法的元素 (需要根据指定条件验证时设置指定样式)

• 新增结构(位置)伪类：

• 选择器	含义
  E:first-child	其父元素的第1个子元素
  E:last-child	其父元素的最后1个子元素
  E:nth-child(n)	其父元素的第n个子元素
  E:nth-last-child(n)	其父元素的第n个子元素（倒着数）
  E:last-of-type	指定类型E的最后一个
  E:first-of-type	指定类型E的第一个
  E:nth-of-type(n)	指定类型E的第n个

• n可以是多种形式：nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等

• ：nth-child（n）执行时先看后面的找到对应位置，在和前面元素匹配（若匹配失败则不改变样式）

• ：nth-of-type(n) 执行时先把指定元素的孩子排列，然后在找出对应的位置，

• 空伪类

  E:empty 选择每个没有任何子级的E元素（包括文本节点）（使用不是非常广泛）

• 目标伪类

  E:target 结合锚点进行使用，处于当前锚点的元素会被选中；(包含该锚名称的点击的URL）

• 排除伪类

  E:not(selector) 除selector（任意选择器）外的元素会被选中；

• 伪元素

• 1、E::first-letterr文本的第一个单词或字（如中文、日文、韩文等）

  2、E::first-line 匹配元素的第一行；

  3、E::selection 匹配元素中被用户选中或处于高亮状态的部分

  4、E::before 在E元素之前插入内容

  5、E::after 在E元素之后插入内容

• 新增颜色

• RGBA等，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

• 关于CSS透明度：

  1、opacity 只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

  2 、transparent 不可调节透明度，始终完全透明

• CSS3 文本效果

• text-shadow

• 1、水平偏移量 正值向右 负值向左；

  2、垂直偏移量 正值向下 负值向上；

  3、模糊度是不能为负值；

• 语法

  text-shadow: h-shadow v-shadow blur color;

  注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

  值	描述
  h-shadow	必需。水平阴影的位置。允许负值。
  v-shadow	必需。垂直阴影的位置。允许负值。
  blur	可选。模糊的距离。
  color	可选。阴影的颜色。（可设透明度）

text-overflow

文本溢出属性指定应向用户如何显示溢出内容，可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

语法

text-overflow: clip|ellipsis|string|initial|inherit;

值	描述
clip	剪切文本。
ellipsis	显示省略符号 ... 来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。
initial	设置为属性默认值。
inherit	从父元素继承该属性值。

word-wrap

word-wrap属性允许长的内容可以自动换行。

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

word-break

word-break属性指定非CJK脚本的断行规则。

语法

word-break: normal | break-all | keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

盒模型

通过box-sizing 来指定盒模型

可以分成两种情况：

1、box-sizing: border-box  盒子大小为 width

2、box-sizing: content-box  盒子大小为 width + padding + border

 边框

border-radius

border-radius 设置元素的外边框圆角

语法

border-radius: 1-4 length|% / 1-4 length|%;

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

box-shadow

box-shadow属性可以设置一个或多个下拉阴影的框。

如box-shadow: 5px 5px 5px #CCC

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

3、模糊度是不能为负值；

4、inset可以设置内阴影；

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强 。

border-image

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

省略的值设置为它们的默认值。

语法

border-image: source slice width outset repeat|initial|inherit;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

最少“4刀”便可以将一个图片切成9部分，“切割”完成后生成虚拟的9块图形，如下图

这时我们将一个盒子想象是由9部分组成的，分别是左上角、上边框、右上角、右边框、右下角、下边框、左下角、左边框、中间，那么浏览器会将切割好的9张虚拟图片分别对应到盒子的各个部分上。其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺或拉伸，如下图

  参数详解

1、border-image-source

指定图片路径

2、border-image-repeat

指定裁切好的虚拟图片的平铺方式

a)  round会自动调整尺寸，完整显示边框图片

b)  repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。

3、border-image-slice

图像边界向内偏移 

4、border-image-width

设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。

来自传智播客分享素材笔记

背景

background-image

background-image 属性设置一个元素的背景图像。

值	说明
url('URL')	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 "图像"(从上到下)
radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。
repeating-radial-gradient()	创建重复的径向渐变 "图像"
inherit	指定背景图像应该从父元素继承

background-size

background-size 设置背景图片大小。

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-origin

background-Origin属性指定background-position属性应该是相对位置。

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

通过background-origin可以设置背景图片定位(background-position)的参照原点。

其参数设置如下：

border-box以边框做为参考原点；

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

background-position属性设置背景图像的起始位置。

属性值

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

background-clip

 background-clip属性指定背景绘制区域。

语法

background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

其参数设置如下：

border-box裁切边框以内为背景区域；

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

多背景

以逗号分隔可以设置多背景，可用于自适应布局

渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

使用方向（如：从左侧开始 to right、从左上角到右下角 to bottom right）

使用角度： 

background-image: linear-gradient(angle, color-stop1, color-stop2);

  渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"

 语法

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

Value	描述
angle	定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner	指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...	指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

径向渐变（Radial Gradients）- 由它们的中心定义

 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

repeating-radial-gradient() 函数用于创建重复的径向渐变 "图像"。

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

值	描述
shape	定义渐变的形状。可以是: ellipse (默认)：指定椭圆形的径向渐变 circle：指定圆形的径向渐变
size	边缘轮廓的具体位置。可以是以下值： farthest-corner (默认)：指定径向渐变的半径长度为从圆心到离圆心最远的角。 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。 farthest-side：与 closest-side 相反，指定径向渐变的半径长度为从圆心到离圆心最远的边。
position	圆心位置，类似 on与 background-position 或者 transform-origin。默认为 "center"
start-color, ..., last-color	用于指定渐变的起止颜色，可以使用 长度值或百分比来指定起止色位置，但不允许负值。

转换 transform

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

2D转换

translate() 移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div{transform: translate(50px,100px);}

参数	描述
x	添加到水平坐标（x）上的值。
y	添加到垂直坐标（y）上的值。

rotate() 旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div{transform: rotate(30deg);}

参数	描述
angle	旋转角度，以弧度计。

    <title>鼠标经过内部盒子旋转显示效果</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin:0 auto;
            border: 1px solid palegreen;
            overflow: hidden;
        }
        .d1{
            width: 100px;
            height: 100px;
            margin:0 auto;
            background-color: #00f5fd;  
            /* 改变旋转中心点 */
            transform-origin: left bottom;
            transform: rotate(180deg);
            /* 过渡效果 */
            transition: all 0.3s linear;
        }
        div:hover .d1{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div>
        <div class="d1"></div>
    </div>
</body>

scale() 缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：scale() 方法缩放当前绘图至更大或更小。

div{transform: scale(2,3);}
// 宽两倍，高三倍

参数	描述
scalewidth	缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight	缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。

注意：参数使用逗号隔开 ，单位是数字不加单位，数字表示倍数。 等比例缩放可以只写一个参数。

scale()方法不会影响其他的盒子，还可以设置转换中心点缩放默认是中心缩放，直接使用width、height修改宽高会影响到其他的盒子

    <title>鼠标经过内部图片缩放效果</title>
    <style>
        div{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        div img{
            width: 200px;
            height: 200px;
            transition: all 0.5s linear;
        }
        div:hover img{
            /* 放大1.2倍 */
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div>
        <a href="#"><img src="./image/1.jpg" alt=""></a>
    </div>
</body>

skew() 倾斜

语法  transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

如：

div{ transform:skew(10deg,20deg); }

 

matrix()

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

 2D转换复合写法：要注意有顺序问题（同时有位移和其他属性时要把位移放在最前面

transform : translate() rotate() scale()

3D转换

要注意z轴是垂直于屏幕的。

translate3d(x,y,z)3D位移

注意：xyz不能省，没有要写0，单位px

rotate3d(x,y,z) 3D旋转

xyz单位是度数

perspective 透视

模拟人的视觉位置，透视也称为视距，透视单位是像素。

近大远小。距离视觉点越近成像越大，越远成像越小。（透视越小成像越大，透视越大成像越小；z轴越大（正值）看见的物体越大。）

透视要写在被观察元素的父盒子上。

transform-style 3D呈现

控制子元素是否展示3D立体空间。给父级添加 transform-style: preserve-3d;

rotateX()

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

div{
    transform: rotateX(120deg);
}

rotateY()

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

div{
    transform: rotateY(130deg);
}

转换属性

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

转换中心点 transform-origin 

通过transform-origin来设置转换的中心点。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

注意：参数值是空格隔开。

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值： left center right length % （默认是50%）
y-axis	定义视图被置于 Y 轴的何处。可能的值： top center bottom length % （默认是50%）
z-axis	定义视图被置于 Z 轴的何处。可能的值： length

过渡transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

“ 谁用过渡给谁添加 ”

需要指定要添加效果的CSS属性和指定效果的持续时间。（如果要添加多个样式的变换效果，添加的属性由逗号分隔）

// 改变宽度属性的过渡效果 2秒
div{ transition: width 2s;}

transition: property duration timing-function delay;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。时间	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。时间	3

all 所有属性都将获得过渡效果。 

transition-timing-function属性指定切换效果的速度。（时间曲线）属性值：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

动画@keyframes 规则

@keyframes 规则是创建动画。

定义动画：

使用@keyframes定义动画，

        @keyframes 动画名称{
            0%{

            }
            25%{
                
            }
            100%{
                
            }
        }
// 百分比要是整数，可以设置多个关键帧。

 上面的0%以及100%这种规则就是动画序列 ,0%是动画的开始，100%是动画的完成。在@keyframes中规定css样式就能创建出动画效果

from相当于0% to等同于100%

再使用动画：

调用动画，对使用动画的元素使用animation

简写模式：注意一下大概的顺序

animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态。

简写中不包含animation-play-state属性

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。必须	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。必须	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。保持forwards，回到起始backwards。	3
animation-delay	规定动画何时开始。默认是 0。可以做延时效果	3
animation-iteration-count	规定动画被播放的次数。默认是 1。数字 还有infinite指定动画应该播放无限次（永远）	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate动画逆向。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。还有paused暂停	3

 steps（步数）速度曲线步长，就是分几步完成动画，有了步长就不要使用ease或linear

弹性盒子(Flex Box)

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法

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

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content 语法如下：

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

各个值解析:

• flex-start：

  弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

• flex-end：

  弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

• center：

  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

• space-between：

  弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

• space-around：

  弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

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

各个值解析:

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

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

各个值解析:

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

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

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

各个值解析:

• stretch - 默认。各行将会伸展以占用剩余的空间。
• flex-start - 各行向弹性盒容器的起始位置堆叠。
• flex-end - 各行向弹性盒容器的结束位置堆叠。
• center -各行向弹性盒容器的中间位置堆叠。
• space-between -各行在弹性盒容器中平均分布。
• space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

语法

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

各个值解析:

• auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
• stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

详解具体可见 Flex 布局_白芸哆的博客-CSDN博客

实例可见 Flex 布局教程：实例篇_白芸哆的博客-CSDN博客

多媒体查询@media 规则

@media 可以针对不同的屏幕尺寸做相应的样式

CSS3 多媒体查询 | 菜鸟教程 (runoob.com)

CSS3 @media查询 | 菜鸟教程 (runoob.com)

@media not|only mediatype and (expressions) { CSS 代码...; }

媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	用于屏幕阅读器

not, only 和 and 关键字含义:

• not: not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用 not 运算符，则还必须指定媒体类型。

• only: only 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

• and: and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

// 如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}