1.背影样式
backgroud-color 背景颜色
backgroud-color :red
backgroud-image 背景图片
backgroud-image
backgroud-position 背景图片位置
backgroud-position top left right bottom
backgroud-repeat 背景平铺方式
backgroud-repeat no-repeat
backgroud-attachment 背景固定方式
backgroud-attachment fixed
backgroud-origin 背景显示区域
backgroud-origin
backgroud-clip 背景图片显示区域
backgroud-clip
backgroud-size 背景图片尺寸
backgroud-size
2.雪碧图/精灵图
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); }