CSS基础知识复习笔记#查漏补缺#

CSS选择器

后代选择器和子元素选择器的区别
后代选择器写法：father son{}
子元素选择器写法：father>son{}
后代选择器可以通过父元素直接找到所包含的子元素甚至是子元素的子元素，
fatther grandson{}
子元素选择器需要一级一级地找。
father>son>grandson{}
同样的选择器效果可以通过id选择器来实现，但使用后代选择器与子元素选择器运行更快速。

CSS盒子

外边距合并
当两个相邻元素都设置了margin的时候，

#div1{margin:10px}
#div2{margin:10px}

我们认为这两个元素之间的间距应该是20px，但实际却是10px，这就是外边距合并。
当设置的margin值不一致的时候，间距取最大的外边距的值。

float

使用了float样式的元素1会漂浮在没有使用float样式的元素2上方，相当于元素1被单独抠出来变成了一个浮动窗口。

给元素2也设置float样式，那元素2会与元素1处在同一窗口平面上，如果float样式都设置的是left，元素1和元素2会依次并排显示在屏幕左边。

当三个元素都设置了float:left;，但并列后宽大于承载容器的宽时，会自动换行。如果元素1的高大于后面俩元素时，排列方式如下图：

position

relative

postition:relative;
left:20px;
top:20px;

元素偏移了，但后面的元素并没有产生任何变化。

absolute
position设置为absolute之后

我们把left和top样式都删掉后的效果如下

类似于float:left;的效果。
fix
将元素固定在页面上，无论如何滚动页面，始终显示在那个位置，多用于设置导航条或者返回页面顶端按钮的位置。
static
静态布局，left、top（包括z-index）等样式的设置不再产生任何效果。页面中的展现效果和没有设置left、top等样式的absolute效果一样。

多列

CSS3要注意浏览器的兼容情况。

/*列数*/
column-count:4;
/*每列的宽度*/
column-width:120px;
/*列与列的间距*/
column-gap:10px;
/*类似border*/
column-rule:5px outset red;

CSS动画效果

静态效果：
CSS3要注意浏览器的兼容情况。

2D

• translate
  x、y轴上的位移，可以运用在定位上。

transform:translate(100px,100px);

• rotate
  围绕中心点进行旋转。

transform:rotate(180deg);

• scale

transform:scale(1,2);

参数为缩放的倍数，前一个参数是宽度的倍数，后一个是高度的倍数。

• skew

transform:skew(50deg,50deg);

前一个参数是围绕x轴倾斜的角度，后一个参数是围绕y轴倾斜的角度。

• matrix
  这个……康不懂

3D
围绕X轴进行三维空间的旋转。

transform:rotateX(120deg);

围绕Y轴进行三维空间的旋转。

transform:rotateY(120deg);

动态效果（过渡）：

• transition

/*设置div变化前的样式以及动画时间*/
div{
background-color:blue;
width:100px;
height:100px;
/*参数为property和duration，过渡名称和过渡效果花费的时间，
同时进行多个动画用逗号隔开*/
transition:width 2s,height 2s,transform 2s;
/*动画延时时间*/
transition-delay:2s;
}
/*设置变化后的样式*/
div:hover{
width:200;
height:200;
transform:rotate(360deg);
}

• animation
  通过对关键帧的设置来制作动画。

/*设置div变化前的样式以及动画时间*/
div{
background-color:blue;
width:100px;
height:100px;
animation:anim 5s;
/*设置关键帧的样式*/
@keyframs anim{
0%{background-color:red;left:0px;top:0px;}
25%{background-color:blue;left:200px;top:0px;}
50%{background-color:yellow;left:200px;top:200px;}
75%{background-color:green;left:0px;top:200px;}
100%{background-color:red;left:0px;top:0px;}
}