css 10-13

1.背影样式

 backgroud-color                   背景颜色

?

1	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 =0 /top=50

    top: 0px;

         
        }
        .three:hover{
            /* opacity: 1; */
            /* visibility: visible;
             */
             top: 30px;
        }

 

 

6.transform:scale  缩放

  transform:scale(0) / (1)

大于1为放大  小于1为缩小 等于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