CSS常用知识点

2.1、定位（难点）

position: static; （没有定位）  fixed（绝对定位，相对浏览器始终显示 相对于广告）; relative（相对定位，相对正常位置）;   absolute;

relative、absolute配合使用（父子类使用）；

以导航条为例：使用 fixed绝对定位 怎么滚动导航条都变化

三、css3关键字

1、边框：

border-radius:圆角 5px 或20%；100%的话是圆；

box-shadow（10px 10px 10px 解释：先水平 在垂直 在投影高度）:

2、背景：

background-size:背景图片的尺寸

background-origin（规定图片位置）：content-box（）、padding-box 或 border-box（边框显示） 区域；

3.宽高包含区域：

 Box-sizing:content-box(默认)，border-box；（红色为重点）

 Border-box 设置后width、height 包含

4、文本效果：

text-shadow：文本阴影；（解释：先水平 在垂直 距离）

word-wrap:（break-word）自动换行；

5、字体引入：

@font-facel{font-family:

Src:url(‘sanation light.ttf’).url(‘sanation light.eot’)

}

6、2D转换/3D转换：

transform:

translate(top,left):从其当前位置移动多少;

rotate(30deg):顺时针旋转给定的角度；

scale(1.1):元素尺寸增加或减少的倍数; 0.几就是缩小；

scale(0.9)倍如下；

skew(30deg,20deg):翻转给定的角度；根据x轴y轴

3D：

rotateX()：围绕X轴旋转；

rotateY():围绕Y轴旋转；

7、过渡：

transition:width 2s;（tranfrom过程 2s）

变化如下：

8、动画：先创建动画行为，再从css中进行定义

animation:myfirst{2s infinite循环}动画名 2s;

@keyframes myfirst创建动画；

animation.css网页中写好了好多动画效果

9、多列：

column-count:规定元素应该被分隔的列数;

column-gap 属性规定列之间的间隔;