CSS常用知识点
2021-03-10 00:30
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 属性规定列之间的间隔;
上一篇：js结合计时器实时更新时间