css 10-13

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);
        }

8.css与img之间的距离

1.用给img(图片)设置display:block;

2.给img(图片)设置verical-align :bottom/top/middle;

3.修改line-heigh的值

4.div的font-size=0