WEB基础笔记一

Web基础笔记01

一、浮动
float 浮动 让元素在行显示
left 左浮动
right右浮动
二、选择器：
标签选择器：div{}
类选择器：.box{}
后代选择器
选择类名为box下的所有div
.box div{}
三、缩放：
transform:scale(1); 等比例缩放
transform:scale(x轴缩放,y轴缩放);
四、延迟动画
animation:scale(动画名称) 1s(执行时长) 0.2s(延迟时间) linear(运动曲线) infinite(运动次数) alternate(往返);
五、子盒子在父盒子中绝对居中：
第一步：给父级盒子设置相对定位；
第二部：给子级盒子设置绝对定位，然后设置margin:auto;left:0;right:0;top:0;bottom:0;
注意：定位的时候除了这种情况，左右不能同时设置，上下也不能同时设置；
六：盒子的层级关系：
z-index
1）默认后写的标签层级要比先写的层级高
2) 子盒子默认要比父盒子层级高；
3) z-index 的值越大层级越高，如果两个值相对，通过先后顺序比较；
七、阴影：
box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影
设置多个阴影：box-shadow:10px 10px blue,-10px -10px red;
八、线性渐变：
background:linear-gradient(red,blue); // 由红色到蓝色的渐变，默认是从上到下
background:linear-gradient(to right,red,blue); // 设置渐变的方向
background:linear-gradient(red 50%,blue); // 0-50% 纯红色，从50%到100%是红到蓝的渐变
background:linear-gradient(red 50%,blue 80%); // 0-50%纯红色，从50%到80%是红到蓝的渐变，从80%到100%是纯蓝色
设置多个渐变： background:linear-gradient(rgba(255,0,0,0.3) 50%,rgba(255,0,0,0) 50%),linear-gradient(to right,rgba(255,0,0,0.3) 50%,rgba(255,0,0,0) 50%);
九、rgba
颜色表示方式：
1) 英文单词；
2）十六进制（常用）
3）rgb 红绿蓝三原色
rgba
a 是指透明度
值：0-1，0是完全透明，1是完全不透明
十、背景图：
background-image:url(图片路径+图片名+扩展名);
背景图默认是平铺的；
十一、设置背景图大小：
background-size:宽 高;