第二周的学习内容

1、表格样式：

empty-cells: hide；内容为空的时候，隐藏边框。

table-layout: fixed；内容过多，不拉伸表格。

vertical-align: baseline/middle/bottom； 垂直居中属性。

2、透明度兼容

filter ： progid:DXImageTransform.Microsoft.Alpha(opacity=50)； 兼容IE浏览器。

3、2D变换效果

           0%{
                    移动：
                    transform: translate(0px);
                    旋转：
                    transform: rotate(0deg);
                    缩放： 
                    transform: scale(1);
                    倾斜：
                     transform: skew(0);
                }

      100%{

                    移动：
                    transform: translateX(200px);
                    transform: translateY(200px);
                    transform: translate(200px,200px);
                    旋转：
                    transform: rotate(90deg);
                    缩放：
                    transform: scale(0.5);
                    transform: scale(1.5);
                    transform: scaleX(.5);
                    transform: scaleY(.5);
                     倾斜：
                    transform: skewX(60deg);
                    transform: skewY(60deg);
                    transform: skew(45deg,45deg);
                    简写：
                    transform: rotate(-45deg) scale(1.5);
                }

4、定位属性

定位属性position：让任意元素按照指定的偏移量去位移，top、left、right、bottom。

1、absolute 绝对定位：元素会脱离标准文档流，宽度也会变成仅仅能够容纳里面文本的宽度，默认情况下，相对于浏览器定位。

2、relative 相对定位：不会对父级和兄弟元素产生任何影响，相对自身去移动。

3、fixed 固定定位。

（注：想让绝对定位的元素，相对于父亲去定位，那么需要在它的祖先元素中有定位属性 ）

5、box-sizing属性定义及用法

1、box-sizing：box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为"border-box"，这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中）；

2、box-sizing属性及语法结构

3、参数说明

content-box：这是由CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；

border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度；

inherit：规定应从父元素继承box-sizing属性的值；

6、多行文本居中—固定高度

display: table； 成为一个块级的表格元素，子元素display：table-cell，使元素成为表格的单元格，verticle-align：middle ；

7、关于弹性布局

1、容器属性：

     flex-direction；

     flex-wrap；

     justify-content；

     align-items；

     algin-content；

2、项目属性：

     order；

     flex-grow；

     flex-shrink；

     flex-basis；

     align-self；

3、如何让一个元素水平垂直居中：

     display：flex；

     justify-content：center；

     align-items：center；

8、关键帧

1、要使用关键帧动画,需要先创建⼀个具名的@keyframes规则，以便后续使⽤animation-name属性来调⽤指定的@keyframes. 每个@keyframes规则包含多个关键帧，也就是⼀段样式块语句，每个关键帧有⼀个百分⽐值作为名称，代表在动画进⾏中，在哪个阶段触发这个帧所包含的样式。

2、为了让一个关键帧列表有效，它必须⾄少包含了对0%(或from)和100%(或to)即动画的开头帧和结束帧的定义。 如果都没有进⾏定义，那么整个@keyframes 是⽆效的，不能使用。

3、如果在关键帧的样式中使用了不能⽤作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。