十三.其他使用

精灵图
也叫雪碧图（css sprite），将多图合并为1张图片，然后通过背景图进行引入。

优势：
减少资源加载的次数和大小。

劣势：
合并图片复杂，使用图片时必须按照实际大小使用。

语法：
1.元素固定宽度、高度；
2.background-image: url();
3.background-position

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo {
      width: 24px;
      height: 24px;
      background-image: url(images/nicon.png);
      background-repeat: no-repeat;
    }
    .demo:hover {
      background-position: 0 -24px;
    }
  </style>
</head>
<body>
  <div class="demo"></div>
</body>
</html>

 三角形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo {
      width: 0;
      height: 0;
      /* background-color: lightcoral; */
      /* transparent: 透明 */
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 50px solid transparent;
      border-bottom: 50px solid darkmagenta;
    }
  </style>
</head>
<body>
  <div class="demo"></div>
</body>
</html>

 

iconfont使用

iconfont使用
1.先下载代码
2.在自己的css之前用link 引入iconfont.css，权重问题，所以要在前引入
3.在标签中写入：<span class="iconfont icon-user"></span>
iconfont icon-user指的是iconfont下的icon-user图标，使用.icon-user{}设置css样式

 布局使用

常见布局
    2.1左右两列宽度固定布局，总长度两个相加，两列浮动，margin居中
    2.2左右两列布局，左列宽度固定，右列宽度不固定 左列浮动，右列不浮动，右列设置margin-left
    2.3左右布局，左边不宽度固定，右边宽度固定，右列浮动先，左列固定，magin-right
    2.4 三列布局，左右固定，中间不固定
        1.左右两列有宽度
        2.中间不固定，设置个子元素，不浮动
        3.左右两列在前，左右浮动
        4.左浮动的元素设置，margin-left:-100%；挤入中间元素的左边
        5.有浮动元素设置，margin-right：-width；挤入元素的右边
        6.中间元素的子元素设置margin-left:左浮动元素的宽度；
        7.中间元素的子元素设hi在margin-right:有浮动元素的宽度
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css</title>
    </head>
     <style type="text/css">
         *{
             margin:0;
             padding: 0;
         }
         .left {
             width: 200px;
             background: red;
             margin-left: -100%;
         }
         .right{
             width: 200px;
             background: blue;
             margin-left: -200px;
         }
         .middle{
             width: 100%;
             background: yellow;
         
         }
         .content{
             margin-left: 200px;
             margin-right: 200px;
         }
     </style>
    <body>
        <div class="middle">
            <div class="content">
            中间
            </div>
        </div>
        <div class="left">
               左边
        </div>
        <div class="right">
            右边
        </div>

    </body>
</html>

隐藏

1、隐藏元素：
    display: none; // 不再占据文档流，不会有动画效果
    visibility: hidden; // 隐藏元素，会保留文档流
    width:0;height:0;overflow: hidden;
    transform: scale(0);
    opacity: 0; 透明度设置为0，位置保留，并且也会有hover
    position: absolute; 定位到无限远

 

posted @ 2021-03-13 10:09  faval  阅读(25)  评论(0)    收藏  举报