3 css 奖品出现弹出动画_《CSS 知识总结》

CSS的特别在于层叠样式表，样式可以层叠（可以多次对同一选择器进行样式声明），选择器层叠（可以用不同选择器对同一个元素进行样式声明），文件层叠（可以用多个文件进行层叠），正因为这些特性让CSS提高了灵活性。

CSS共经历了四个版本，其中2.1是目前为止使用最为广泛的版本，从3开始分模块升级功能，也是眼下最新的版本。当需要了解目标浏览器是否支持CSS特性时，可以使用caniuse．com来查询。

调试

　CSS的语句并不复杂，难点在于调试代码，寻找错误。所以我们在写代码时要养成良好的习惯，而border调试法就是在写代码时使用起来最方便的调试方法之一，为元素加入border，通过查看border出现与否，来判定语句的语法或者选择器的使用是否出错误，调试完成后即可删除border。

基础概念

• 文档流
• 块、内联、内联块
• margin合并
• 两种盒模型（content－box与border－box）

　文档流的概念并非其字面意思，其内容是为了规定文档中元素流动方向。共有３种元素类型，有inline、block、inline－block。inline类型的大小取决于内部元素和,其高度也只由line-height来间接确定,另外两种则完全可以手动设定大小。当内容总量超出所规定范围，就会溢出显示，如果需要在规定范围内禁止缩放并放下所有内容即可使用overflow语句来创建具有滚动条的窗口。（auto灵活设置，scroll永远显示，hidden隐藏溢出部分，visible显示溢出部分）overflow还可设置-x或-y来控制横向或纵向的溢出情景。

有时因为我们的需求需要某些元素脱离文档流，当我们使用float、position：absolute/fixed语句来规定选择器后，引用该选择器的元素将会脱离文档流。

CSS盒模型本质上是一个盒子，封装周围的HTML元素。

盒模型大致可分为两种

1.content-box（又称为W3C盒模型、标准盒模型）
2.boder-box（又称为IE盒模型、怪异盒模型）
盒模型的结构为：

取自饥人谷前端体系课程课件

包含了（content）、内边距（padding）、边框（border）、外边距（margin），这两种模型之间的区别在于计算宽度与高度时存在差异。

content-box总宽度/高度=width/height + padding + border + margin。（即width/height 只是内容高度，不包含 padding 和 border 值 ）

boder-box总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。（ 即 width/height 包含了 padding 和 border）

盒模型还存在多个相邻盒之间边距合并的原则

1.父子margin合并

2.兄弟 margin合并

（只存在上下外边界的合并，左右边界不影响）

也可以应用一些办法来阻止合并的情况

1.在父子合并处加入父padding/border 挡住

2.在父子合并处加入overflow:hidden 挡住

3.父子合并用display:flex

4.兄弟合并可以改变元素类型为inline-block来阻止

布局

取自饥人谷前端体系课程课件

float布局

1. 在子元素上加float:left和width
2. 在父元素上加.clearfix

主要用于对PC端ie浏览器的页面布局

flex布局

我们先要了解两个词的含义

再来介绍如何让元素变成flex容器

.container{
display:flex;
}

• 使用flex-direction控制items的流动方向（主轴方向）
• 使用flex-wrap控制折行样式
• 使用justify-content控制主轴对其方式
• 使用align-items控制次轴的对其样式
• 使用align-content控制多行内容分布的样式

flex item的属性

• 使用order控制items内容顺序
• 使用flex-grow可选择性控制items元素缩放时扩张的比例
• 使用flex-shrink可选择性控制items元素缩放时收缩的比例
• 使用flex-basis可选择性控制items元素缩放时的基准宽度
• 使用align-self控制items内部某一个或某一类内容脱离其他单独设立样式

尽量不要将宽度或高度设定为固定数值，使用百分比、max或min来控制大小。

grid布局

同样存在container与items

.container{
display:grid;
}

直接设行与列来设计表格

.container{
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto:
}

直接利用起止的横线与纵线来规划分区

.items-a{
grid-column-start:2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}

也可以使用fr-free space来控制空间的分割

.container{
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 50px 1fr 1ft;
}

还可以用grid-template-areas形象的分区

.container{
display: inline-grid;
grid-template-rows: 240px repeat(4, 120px); 
grid-template-columns: 250px 250px;
grid-template-areas: 
    "big mid1"
    "big mid2"
    "sm1 mid2"
    "sm2 mid3"
    "sm3 mid3";
}

在行与列中加入空隙gap

.container{
grid-template-columns:100px 50px 100px;
grid-template-rows:80px auto 80px;
grid-column-gap:10px;
grid-row-gap:10px;
}

CSS动画

浏览器渲染原理

• 根据HTML构建HTML树（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两棵树合并成一颗渲染树（render tree）
• layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制（把边框颜色、文字颜色、阴影等画出来）
• Compose合成（根据层叠关系展示画面）

CSS动画有两种制作方法 transform和animation

transform共有四个常用功能

1. translate位移属性 //translate(-50%,-50%)可做到绝对定位元素的居中
2. scale缩放属性
3. rotate旋转属性 //一般用于360°旋转制作loading
4. skew倾斜属性

为了动画的制作我们要在开始状态与结束状态中加入transition过渡，inline元素不支持transform，需要先变成block。

transition过渡的目的是补充动画缺失的中间帧

transition:属性名称 时长 过渡方式 延迟；//可以用逗号分隔两个不同属性
display:none=>block无法过度，visibility、background、opacity则可以过渡
当不仅存在一段过程而是多段过程时，可以使用多次transform。

而另一种办法就是使用animation

animation的原理不止可以设定起始帧，还可以添加多个关键帧设计动画。

标准写法有以下两种

@keyframe slidein{
from{
transsform:translateX(0%);
}
to{
transform:translateX(100%)
}
@keyframes ifentifier{
0%{top:0;left:0;}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px;left:100%}
}

在展示动画的元素上加入animation:时长 过渡方式 延迟 次数 方向 填充方式 是否暂停 动画名；
时长可以秒或毫秒为单位，次数可以为数字也可取infinite。

以上为暂时的CSS总结，还会继续补充将来学习的概念。