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:宽 高;