学习CSS第二周的总结
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
1. flex-direction 设置容器主轴的方向
- flex-direction：row 沿水平方向，由左到右
- flex-direction：row -reverse 沿水平方向，由右到左
- flex-direction： column 主轴沿垂直方向，由上到下
- flex-direction：column-reverse 主轴沿垂直方向，由下到上
2.flex-wrap 当项目在一行无法显示时如何换行
- flex-wrap：nowrap(默认)，不换行
- flex-wrap：wrap，换行，第一行在上方
- flex-wrap：wrap-reverse,换行，第一行在下方
3.flex-flow是flex-direction属性和flex-wrap属性的简写形式
4.justify-content设置项目在容器中的对齐方式
具体对齐方式与主轴的方向有关
- flex-start （默认值）：左对齐
- flex-end : 右对齐
- center : 居中
- space-between : 两端对齐，项目之间的间隔相等
- space-around ： 每个项目两侧的间隔相等，且项目之间的间隔比项目与边框的间隔大一倍
5.align-items定义项目在交叉轴上如何对齐显示
具体对齐方式与交叉轴的方向有关- flex-start : 交叉轴的起点对齐
- flex-end : 交叉轴的终点对齐
- center : 居中对齐
- baseline : 项目的第一行文字的基线对齐
- stretch :若项目未设置高度或设为auto，将占满整个容器的高度
6、其他的属性
order:设置项目的排列方式，默认值为零，数值越小越靠前flex-grow:控制当前项目是否放大显示flex-shrink:可缩小比例flex-basis:设置项目占据主轴空间的位置align-self:当前项目与其他拥有不一样的对齐方式
1.border-radius：css3圆角 （单位是:px)
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
CSS3 圆角属性
border-radius： 所有四个边角 border---radius 属性的缩写
border-top-left-radius ：定义了左上角的弧度
border-top-right-radius： 定义了右上角的弧度
border-bottom-right-radius： 定义了右下角的弧度
border-bottom-left-radius ：定义了左下角的弧度
2.box-shadow: css3阴影
3.border-image: css3边界图片
有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:
background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张
2.background-size属性
指定背景图像的大小
CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
3.background-origin属性
指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
4.background-clip属性
从指定位置开始绘制，规定背景的绘制区域
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
1.线性渐变 - 从上到下（默认情况下）
2.线性渐变--从左到右
3.线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
4.使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向 （to bottom、to top、to right、to left、to bottom right，等等）。
径向渐变（Radial Gradients）- 由它们的中心定义
1.径向渐变 - 颜色节点均匀分布（默认情况下）
2.径向渐变 - 颜色节点不均匀分布
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
CSS3 转换 可以对元素进行移动、缩放、转动、拉长或拉伸。
转换的效果是让某个元素改变形状，大小和位置。
您可以使用 2D 或 3D 转换来转换您的元素。
鼠标移动到以下元素上，查看 2D 和 3D 的转换效果
1. translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
2. rotate() 方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
3. scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
4. skew() 方法
语法
transform:skew(<angle> [,<angle>]);包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX();表示只在X轴(水平方向)倾斜。
- skewY();表示只在Y轴(垂直方向)倾斜。
5. matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
这6个参数，（转载CSDN博主「sophiaYang517」的）
暂且先取名abcdef也就是matrix（a,b,c,d,e,f）。
- e是x轴的平移。
- f是y轴的平移。
- a是x轴对的缩放，以倍数的方式控制。
- d是y轴对的缩放，以倍数的方式控制。
a，b，c，d是共同控制旋转角度的，以cosθ，sinθ，-sinθ，cosθ的方式共同控制,bc处是sinθ-sinθ就是顺时针旋转
其实就是：matrix（倍数·cosθ，sinθ，-sinθ，倍数·cosθ，0，0);
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
1.要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
2.过渡属性
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3
` @keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。`
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
1. 指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长
2. CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
<!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>Document</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #333;
min-height: 100vh;
align-items: center;
}
.cards {
height: 480px;
margin: 133px 0;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
width: 240px;
height: 240px;
position: relative;
background-color: #333;
align-items: center;
margin: 115px;
}
.cardbox1 {
position: absolute;
background-color: #333;
font-size: 40px;
text-align: center;
width: 240px;
height: 240px;
transition: transform 0.6s;
z-index: 1;
}
.card:hover .cardbox1 {
background-color: #ff0037;
color: #fff;
font-size: 50px;
transform: translateY(-100px);
transition: 0.8s;
}
.card:hover .cardbox1>h3 {
opacity: 1;
}
h3 {
text-align: center;
color: #fff;
font-size: 50px;
line-height: 140px;
opacity: 0.5;
}
.card:hover .cardbox1 h3 {
font-size: 65px;
line-height: 50px;
}
.cardbox2 {
width: 240px;
height: 240px;
position: absolute;
background-color: #fff;
font-size: 20px;
transition: transform 0.6s;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}
.card:hover .cardbox2 {
background-color: #fff;
color: black;
transform: translateY(100px);
}
p {
padding: 45px;
font-weight: 800;
}
a {
position: absolute;
color: #333;
background-color: #fff;
text-decoration: none;
top: 170px;
left: 50px;
border: 2px solid black;
border-radius: 12px;
}
a:hover {
position: absolute;
display: inline-block;
background-color: black;
color: #fff;
transition: 0.8s;
}
</style>
</head>
<body>
<div class="cards">
<div class="card">
<div class="cardbox1 ">
<h3>one</h3>
</div>
<div class="cardbox2">
<p>This is one.</p>
<a href="#">one</a>
</div>
</div>
<div class="card">
<div class="cardbox1">
<h3>two</h3>
</div>
<div class="cardbox2">
<p>This is two.</p>
<a href="#">two</a>
</div>
</div>
<div class="card">
<div class="cardbox1">
<h3>three</h3>
</div>
<div class="cardbox2">
<p>This is three.</p>
<a href="#">three</a>
</div>
</div>
</div>
</body>
</html>
