此片文章是CSS3学习，如果要学习CSS基础，点击CSS基础入门学习笔记
目录：
- 新增选择器
- 属性选择器
- 结构伪类选择器
- 兄弟伪类
- 目标伪类
- 伪元素选择器
- 盒模型
- 颜色
- RGBA
- HSLA
- 渐变
- 线性渐变
- 径向渐变
- 重复渐变
- 边框
- 边框圆角
- 边框阴影
- 边框图片
- 背景
- 背景属性
- 背景缩放
- 多背景
- 过渡
- transform2D
- transform3D
- 透规(pespective)
- backface-visibility
- 动画animation
- Flex伸缩布局(CSS3)
- 容器的属性
- 项目的属性
参考手册解读指南：
- [] 表示可选项
- | 表示或者
- || 表示多选一
- ？ 0个或1个
- *表示0个或多个
- {} 表示范围
新增选择器
属性选择器
选取标签带有某些特殊属性的选择器
/* 获取到拥有该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
结构伪类选择器
| 结构伪类选择器 | 功能描述 |
|---|---|
| E:last-child | 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) |
| E:nth-child(n) | 选择父元素的第n个子元素，n从1开始计算 |
| E:nth-last-child(n) | 选择父元素的倒数第n个子元素，n从1开始计算 |
| E:first-of-type | 选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1) |
| E:last-of-type | 选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1) |
| E:nth-of-type(n) | 与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素 |
| E:nth-last-of-type | 与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素 |
| E:only-child | 选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1) |
| E:only-of-type | 选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或 |
| E:empty | 选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点 |
| E:root | 选择文档的根元素，对于HTML文档，根元素永远HTML |
li:first-child { /* 选择第一个孩子 */
color: pink; }
li:last-child { /* 最后一个孩子 */
color: purple;}
li:nth-child(4) { /* 选择第4个孩子n代表 第几个的意思 */
color: skyblue;}
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
li:nth-last-of-type(-n+5){
font-size: 30px;/*前五个*/
}
兄弟伪类
-
+：获取当前元素的相邻的满足条件的元素 ，相邻；必须是指定类型的元素
.first + li{ color: blue; } -
~：获取当前元素的满足条件的兄弟元素，必须是指定类型的元素
.first ~ li{ color: pink; }
目标伪类
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式
:target {
color: red;
font-size: 30px;
}
伪元素选择器
- E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，需要转块，且必须要结合content属性使用。
i.是一个行内元素，需要转换成块position；display:block ；float；
ii.必须添加content, 哪怕不设置内容，也需要content:””，否则不可见
注意：伪元素:before和:after添加的内容默认是行内元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
div::befor {/*内部前面插入开始*/
content:"开始";
}
div::after {
content:"结束";/*内部后面插入结束*/
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素（低版本只能识别：，效果相同）
之所以被称为伪元素，是因为他们不是真正的页面元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式,不能改变大小 ；
p::first-letter {/* 首字或单词特殊样式 */
font-size: 20px;
color: hotpink;
}
p::first-line {/* 首行特殊样式 */
color: skyblue;
}
p::selection {/*选中后的文本样式*/
/* font-size: 50px; */
color: orange;
}
盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，计算盒子大小的方式就发生了改变。
1、box-sizing: content-box 外加模式，盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 内减模式，盒子大小为 width ，就是说 padding 和 border 是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的标准盒模型 w3c */
padding: 10px;
border: 15px solid red;
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撑开盒子 */
border: 15px solid red;
/* margin: 10px; */
}
颜色
RGBA
在RGB的基础上加进了一个通道Alpha。RGBA在RGB的基础上多了控制alpha透明度的参数。
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。(并非所有浏览器都支持使用百分数值)A参数，取值在0~1之间，不可为负值。
RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度
语法:
-
R：红色值。正整数 | 百分数
-
G：绿色值。正整数 | 百分数
-
B：蓝色值。正整数| 百分数
-
A：透明度。取值0~1之间
使用示例：
div{
width: 200px;
height: 200px;
background-color: rgba(10,20,245,0.5);
color: white;
}
HSLA
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
语法：
-
H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
-
S：Saturation(饱和度)。取值为：0.0% - 100.0% (加白色,最终白色100%)
-
L：Lightness(亮度)。取值为：0.0% - 100.0%，默认50%是平衡值 Brightness (加黑色,0%黑色)
-
A：Alpha(透明度)。取值0~1之间。
span{
width: 200px;
height: 200px;
display: block;
background-color: hsla(360,100%,50%,0.6);
color: white;
}
H色调,色相:
关于透明度的补充说明：
a) opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度
b) transparent 不可调节透明度，始终完全透明
c) 使用rgba 来控制颜色，相对opacity ，不具有继承性
渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变
线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
语法：linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置…);
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
参数说明：
-
第一个参数表示线性渐变的方向
- to left：设置渐变为从右到左。相当于: 270deg;
- to right：设置渐变从左到右。相当于: 90deg;
- to top：设置渐变从下到上。相当于: 0deg;
- to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
-
第二个参数是起点颜色,可以指定颜色的位置
-
第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
示例：
div{
width: 400px;
height: 400px;
margin: 100px auto;
background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple);
}
径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
a) 语法：radial-gradient(形状 大小 坐标 颜色1，颜色2…)：
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
b) 取值：
-
position 确定圆心的位置。+at 如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center;可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
-
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
-
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
-
color：指定颜色。Rgba hsla
重复渐变
repeating-radial-gradient
background: repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
语法：text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
（可叠加）
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],
[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…
图示：
说明：
可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。
text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色
边框
边框圆角
border-radius可以通过值来定义样式相同的角，也对每个角分别定义
- 值的说明
border-radius：*px: 四个大小一样的圆角
border-radius:*px *px *px *px: 左上角、右上角、右下角、左下角(顺时针)
border-radius:*px *px：左上角、右下角；右上角、左下角（对角）
border-radius:*px *px *px：左上角；右上角、左下角；右下角
border-radius:100px/50px; 添加/是用来设置当前个不同方向的半径值；水平x方向/垂直y方向，椭圆
创建两个值的非对称圆角：如border-radius:20px/10px;表示在水平方向上20px,在垂直方向上10px;
- 单个圆角的设置：除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径
边框阴影
文本阴影：text-shadow:offsetX offsetY blur color
边框阴影：box-shadow:h v blur spread color inset
- h:水平方向的偏移值
- v:垂直方向的偏移值
- blur:模糊–可选，默认0
- spread:阴影的尺寸，扩展和收缩阴影的大小–可选 默认0
- color:颜色–可选，默认黑色
- inset:内阴影–可选,默认是外阴影
边框图片
功能：将图片规定为包围 div 元素的边框
/*border-image: source slice / width/outset repeat;*/
border-image: url("../images/border1.png") 27 / 27px /0px round;
定义和用法： border-image 属性是一个简写属性，用于设置以下属性
| 值 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移—裁切。fill:做内容的内部填充;设置受保护的区域大小 |
| border-image-width | 图片边框的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度，受保护区域 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应直接重复平铺(repeat)、将内容缩放进行完整的重复平铺(round)或拉伸(stretch)。 |
细节：
1.边框图片的本质是背景，并不会影响元素内容的放置
2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度
div{
width: 500px;
height: auto;
border: 10px solid red;
margin:100px auto;
/*添加边框图片*/
border-image-source: url("../images/btn_bg.png");
/*设置受保护的区域大小*/
border-image-slice: 10 fill;
/*设置边框图片的宽度
1.明确圆角的大小
2.明确受保护的区域的大小*/
border-image-width: 10px;
/*设置背景平铺效果 默认是stretch：拉伸*/
border-image-repeat: stretch;
}
背景
背景属性
background-repeat 设置背景平铺
- round:会将图片进行缩放之后再平铺
- space:图片不会缩放平铺，只是会在图片之间产生相同的间距值
background-attachment 设置在滚动容器的背景的行为：跟随滚动/固定
- fixed:背景图片的位置固定不变
- scroll:当滚动容器的时候，背景图片也会跟随滚动
local和scroll的区别：前提是滚动当前容器的内容
- local:背景图片会跟随内容一起滚动
- scroll:背景图片不会跟随内容一起滚动
background-size
通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小
background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
-
auto：此值为默认值，保持背景图片的原始高度和宽度;
-
number：此值设置具体的值，可以改变背景图片的大小;
-
percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
-
cover：按比例缩放，不会出现空白，部分不可见；此值是将图片放大，以适合铺满整个容器，将背景图片放大到适合容器的大小
-
contain：按比例缩放，会出现空白，全部可见；此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，可以使用contain将图片缩小到适合容器大小为止。
-
当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
background-origin
作用：规定 background-position 属性相对于什么位置来定位。默认值是left top左上角；提升移动端响应区域的大小
语法：background-origin: padding-box|border-box|content-box;
属性值说明：
- padding-box 从padding的位置开始填充背景，会与padding重叠
- border-box 从border的位置开始填充背景，会与border重叠
- content-box 背景图像相对于内容框来定位。
background-clip
background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示，就是设置最终显示那些区域
语法：background-clip: border-box|padding-box|content-box;
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。显示border及以内的内容 |
| padding-box | 背景被裁剪到内边距框。显示padding及以内的内容 |
| content-box | 背景被裁剪到内容框。显示content及以内的内容 |
需求：为块设置精灵图背景，需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片
a{
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin:100px auto;
box-sizing: border-box;
background-image: url("../images/sprites.png");
background-position: -20px 0;
padding:14px;
background-origin: content-box;
background-clip: content-box;
}
背景缩放
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
多背景
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
过渡
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。单位是s |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
过渡效果：设置为某些css添加火毒效果，设置过度效果耗时，重某个值到另外一个值的过渡
display:none无法添加过渡效果，必须是具体值
如果想要所有的属性都变化过渡， 写一个all 就可以，但是不推荐
父级高度不确定，用auto
transform2D
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
一、移动平移 translate(x, y)
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
x、y可为负值；
使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
二、缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
-
指不缩放，>1.01放大 <0.99缩小 参照元素的几何中心
-
只有一个参数，就代表x和y方向都进行相等比例的缩放
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
三、旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针； 注意单位是 deg 度数
transform:rotate(45deg);
transform-origin可以调整元素转换变形的原点
设置旋转轴心
- x y
- 关键字：left top right bottom center
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
四、倾斜 skew(deg, deg)
transform:skew(30deg,0deg);该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
如果角度为正，则往当前轴的负方向斜切，如果角度为负，则往当前轴的正方向斜切
可以使元素按一定的角度进行倾斜，第二个参数不写默认为0。
transform连写注意先移动后旋转，因为旋转会将坐标系旋转
transform: none;清除属性值
实现任意元素居中
行级text-alight；块级margin：0 auto（只能同一行居中）
/* 让定位的盒子水平居中 */
.box {
width: 499.9999px;
height: 400px;
background: pink;
/* absolute参照父元素，走的自己的一半,让定位的盒子水平居中 */
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
transform3D
3D坐标系
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
rotateX()
就是沿着x轴旋转
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()
沿着y轴进行旋转
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()
沿着z轴进行旋转
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
理解透视距离原理：
translateX(x)
仅水平方向移动（X轴移动）
主要目的实现移动效果
translateY(y)
仅垂直方向移动（Y轴移动）
translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
translate3d(x,y,z)
[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
动画animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
Flex伸缩布局(CSS3)
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
注意：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
容器的属性
以下6个属性设置在容器上。
- flex-direction：调整主轴方向
- flex-wrap：如何换行
- flex-flow：
flex-direction和flex-wrap的简写形式 - justify-content：在主轴上的对齐方式（默认水平对齐）
- align-items：在交叉轴（侧轴）上对齐方式（垂直对齐）
- align-content：多根轴线的对齐方式
以下对上面属性进行解释：
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
一、flex-direction调整主轴方向（默认为水平方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
二、flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
-
nowrap（默认）：不换行。 -
wrap：换行，第一行在上方。 -
wrap-reverse：换行，第一行在下方。
三、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
四、justify-content
项目在主轴上的对齐方式（默认水平对齐）
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
五、align-items
项目在交叉轴（侧轴）上如何对齐。（垂直对齐）
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
-
flex-start：交叉轴的起点对齐。 -
flex-end：交叉轴的终点对齐。 -
center：交叉轴的中点对齐。 -
baseline: 项目的第一行文字的基线对齐。 -
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
六、align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。
项目的属性
以下6个属性设置在项目上。
order：定义项目的排列顺序flex-grow：定义项目的放大比例flex-shrink：定义项目的缩小比例flex-basis：定义在分配多余空间之前，项目占据的主轴空间flex：flex-grow,flex-shrink和flex-basis的简写align-self：允许单个项目有与其他项目不一样的对齐方式
以下是对上面的属性进行解释：
一、order属性
定义项目的排列顺序。数值越小，排列越靠前，可以为负值。 默认值是 0
.item {
order: <integer>;
}
二、flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
三、 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
四、 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
五、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
六、align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致
Flex部分整理自：Flex 布局教程：语法篇
原文地址：https://blog.csdn.net/weixin_44523860/article/details/104172025
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。