1.背影样式
backgroud-color 背景颜色
backgroud-color :redbackgroud-image 背景图片
backgroud-image backgroud-position 背景图片位置
backgroud-position top left right bottombackgroud-repeat 背景平铺方式
backgroud-repeat no-repeat backgroud-attachment 背景固定方式
backgroud-attachment fixedbackgroud-origin 背景显示区域
backgroud-origin backgroud-clip 背景图片显示区域
backgroud-clipbackgroud-size 背景图片尺寸
backgroud-size2.雪碧图/精灵图
backgroud:url(图片路径) 平铺方式 定位
background: url(./img/one.png) no-repeat -512px -438px;3.阿里矢量图标
link 外部引入链接
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4220809_f0kwgxzcwxk.css">div class 中引入图标名称
<div class=" iconfont icon-xiaoxi"></div>
<div class=" iconfont icon-fangdajing"></div>
<div class=" iconfont icon-080jiating"></div>然后在css中增加图标的样式
.icon-xiaoxi ,.icon-fangdajing,.icon-080jiating{
font-size: 50px;
color: aqua;
opacity: 0;
}4.透明度 光标
opacity=1 表示显示
opacity=0 表示透明
cursor: 添加光标
crosshair | 精确定位"十"字形；
| pointer | "小手"形状
| text | 文本"I"形；
| wait | 等待，"沙漏"形；
| default | 默认指针；
| help | 帮助，带尾箭头
| auto | 鼠标按照默认的状态根据页面上的元素自行改变样式 |5,弹性盒子
在div中添加display;flex; 此时这个div为弹性盒子 是容器 其中的标签为项目
其中分为主轴与交叉轴
主轴
justify-content :flex-start 默认从开始对齐
justify-content :flex-end 从最后开始对齐
justify-content :space-around 环绕 每个项目的左右间距一样
justify-content :space-between 两端对齐 中间平分
justify-content :space-evenly 平分项目之间的间距 使每个项目的之间间距一样
交叉轴
align-content: flex-start; 默认从上对齐
align-content: flex-end 从下对齐
align-content:space-around 环绕 每个项目的上下间距一样
align-content:space-between 上下对齐 中间平分
align-content: space-evenly 平分项目之间的间距 使每个项目的之间间距一样
切换主轴
---------------------- | ------------- |
| flex-direction 主轴方向 | order |
| flex-wrap 主轴换行方式 | flex-grow |
| flex-flow 符合形式 | flex-shrink |
| justify-content 主轴对齐方式 | flex-basis |
| align-items 交叉轴对齐方式 | flex |
| align-content 多根主轴对齐方式 | align-self |主轴的改变
flex-direction 决定主轴方向（即项目排列方向）
> 属性值：
> row（默认值）：主轴为水平方向，起点在左端。
> row-reverse：主轴为水平方向，起点在右端。
> column：主轴为垂直方向，起点在上沿。
> column-reverse：主轴为垂直方向，起点在下沿。6定位
position:relative; 相对定位 是对自身的左上角为原点 用top 向上 left 向左 right 向右 bottom向下
一般我们不经常单独用这个相对定位
position: relative; position:absolute; 绝对定位 是对页面的左上角为原点 用top 向上 left 向左 right 向右 bottom向下
一般我们不经常单独用这个绝对定位
position:absolute;一般我们使用子绝父相
.one{
width: 200px;
height: 100px;
background-color: #ce0909;
/* 相对定位 */
position: relative;
}
.two{
width: 50px;
height: 100px;
background-color: #17e14a;
/* 绝对定位 */
position: absolute;
top: 0 ;
left: 0;
}position:sticky; 粘性定位 到一个位置可以固定在在页面上
position:sticky;
top:0;position:fixed; 固定定位 固定一个项目到一个页面位置上 不会跟着页面而往下滑
position: fixed;
bottom: 0;
right: 0;
7.隐藏的6种方式
1, height/width=0 overfow=hidden
/* height: 0; */
width: 0;
overflow: hidden;2.opacity=0 /opacity=1
opacity: 0;
}
.three:hover{
opacity: 1;
}3. display =none /display=balck
display: none;
}
.three:hover{
display: block;
}4.visibility:hidden / visible
visibility: hidden;
}
.three:hover{
/* opacity: 1; */
visibility: visible;
}5. position 定位
top: 0px;
}
.three:hover{
/* opacity: 1; */
/* visibility: visible;
*/
top: 30px;
}top =0 /top=50
6.transform:scale 缩放
transform:scale(0) / (1)
transform: scale(0);
}
.three:hover{
/* opacity: 1; */
/* visibility: visible;
*/
/* top: 30px; */
transform: scale(1);
}