CSS3阶段笔记

CSS3

PS：dispaly：flex可以看一下前端大神阮一峰的笔记

一.文本类

1. ​ text-overflow:clip|ellpisis(文本隐藏)
2. ​ letter-spacing:文本间距
3. ​ text-shadow:x y blur color;

二.背景类

1. ​ background-size

三.2D

1. ​ transfrom:

​ 平移：transate

​ 旋转：rotate

​ 缩放：scale

​ 拉伸：skew

四.3D

1. ​ 搭建3d视角（视觉距离）：3d 透视效果

​ perspective:number;

1. 3d转换

   
   transfrom-style:persve-3d
   
   

    	  transfrom:
   

   ​ 平移：transateX|Y|Z

   ​ 旋转：rotateX|Y|Z

   ​ 缩放：scaleX|Y|Z

   ​ 拉伸：skewX|Y|Z

五.过渡

​ transition:all 2s [ease|linear|…] [0.5s];

	transition-property:属性

​ transition-duration:完成时间

	transition-timing-function:过渡方式

​ transition-delay:延迟时间

六.动画

1.定义动画

@keyframes name{

​ 关键帧

​ from{

​ css 样式属性

​ }

​ to {}

}

---

0%{}

…

}

2.调用动画

animation:名称 完成时间 ;

animation:name 3s;
animation-name:name;
/*完成时间*/
animation-duration：3s;
/*延迟时间*/
animation-timing-function：;
/*infinite 无限循环  99999次*/
animation-interation-count:infinite
/*动画往复运行(回弹)*/
animation-direction:alternate；
/*动画的播放状态*/
animation-play-state:running

@keyframes name{

			关键帧

			from{
                 css 样式属性 
                }

			to{}
}

七.媒体查询(实时捕获当前屏幕的分辨率)

@media

@media [not|only] mediatype and (expressions){
		CSS 代码
}

min-width:最小宽度

max-width:最大宽度

通过分辨率来引入css文:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> 

例子

<link rel="stylesheet" media="screen and (min-width:768px)" href="print.css"> 

not：取反
only：只匹配
mediatype：媒体类型
and:并且(连接)

所有设备 all

屏幕(screen)
打印设备（print）
阅读器（speech）

各类屏幕适配标准

1.手机屏幕：超小屏幕（xs）

​ <768px

2.平板电脑：小屏幕（small）

​ >=768px-------<=991px

3.普通pc：中型屏幕（middle）

​ >=992px-------<=1199px

4.pc电脑、电视（xl）

​ >=1200px

and+空格+()

/*手机分辨率 */
@media screen and (max-width:768px){
    bady{
		background-color: red;        
    }
}
/*平板分辨率 */
@media screen and (min-width:768px) and (max-width:911px){
    bady{
		background-color:green;        
    }
}
/*中型、大型分辨率 */
@media screen and (min-width:991px){
    bady{
		background-color:blue;        
    }
}

适口

快捷键：mate:vp+tab建(Hbulidex中)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

八.弹性盒子（Flex布局）弹性布局

[https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]:

display:block | inline-block | inline | none | flex

display:Flex;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

使用：

1. 移动端布局排版（手机）
2. 替代部分 float 布局

弹性盒子的内部元素排列

X 主轴（默认）

Y 交叉轴（从轴）

依据主轴的方向进行排列

(1)容器属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

---

1.flex-direction属性

(属性决定主轴的方向（即项目的排列方向）)

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

---

2.flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。**flex-wrap**属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3.flex-flow属性:简写模式 主轴+换行（row no-wrap）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4.justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

space-around两边距离是中间距离的一般

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items属性

align-items属性定义项目在交叉轴上如何对齐。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content属性

​ 多跟轴线上的对齐方式

(2)项目属性

• order 排列 默认为 0 排序值越小越靠前
• flex-grow 成长比 默认为 0 number;
• flex-shrink 缩小比 默认为 1 , 0 (不缩小)
• flex-basis
• flex 简写方式 flex-grow+flex-shrin [flex-basis可以加]
• align-self 允许单个项目有与其他项目不一样的对齐方式

---

1.order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

2.flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

(flex-grow：2；剩下的空间有时不可能是flex-grow：1的两倍)

.item {
  flex-grow: <number>; /* default 0 */
}

3.flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(即设置了宽度,缩小的最小宽度为设置的宽度)

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。