CSS进阶

1. 精灵图

1 为了有效减少服务器接收和发送请求的次数，提高页面的加载速度出现了css精灵技术。
2  核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
3  这个大图片就是精灵图、sprites 或者雪碧图
4  然后移动背景图 background-position： x y
5  一般情况下对应的xy都是负值

2. 字体图标 iconfont

展示的是图标，实际是字体
使用：
下载完成后目录如下：

1. 将fonts放在目录文件夹下
2. 在css样式中全局声明字体：
   
3. 使用 打开demo.html 找到要使用的字体符号，复制下来，对对应的span设置font-family：icomoon

追加 选中selection.json 然后选择要追加的图标。下载 替换掉之前的即可

3. css三角形制作

<div class="box"></div>

向下的箭头 top

.box{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid #000;
}

向上的箭头 top

.box{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid #000;
}

向左的箭头 top

.box{
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid #000;
}

向右的箭头 top

.box{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: aqua;
}

直角三角形

        .dy{
            margin: 50px;
            width: 0;
            height: 0;
            /* 右上下边框都为0 */
            /* border-right: 0px solid transparent;
            border-top: 0px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 100px solid aqua;
            border-left-color: aqua; */
            /*合并  上 右 下 左*/
            border-color: transparent transparent transparent aqua;
            border-style: solid;
            border-width: 0px 0px 50px 100px;
        }

4. 图片与文字对齐方式

vertical-align img上的属性
底线 vertical-align =‘bottom’
基线 默认
中线 vertical-align = ‘middle’
顶线 vertical-align = ‘top’

5. 图片底侧空白缝隙解决

1. 用vertical-align = middle top bottom
2. 将img转化为block display ：block

6. 省略号显示溢出文字

单行

1.先强制一行内显示文本  white-space ：nowrap
2.超出的部分隐藏		overflow:hidden
3.文本用省略号替代超出的部分	text-overflow：ellipsis

多行

1.超出的部分隐藏		overflow:hidden
2.文本用省略号替代超出的部分	text-overflow：ellipsis
3.弹性伸缩盒子模型显示				display：-webkit-box
4.限制在一个块元素显示的文本行数 -webkit-line-clamp：2
5.设置或检索伸缩盒对象的子元素的排列方式 -webkit-box-orient：vertical

7.布局技巧

float的全部元素会紧贴在一起。
两个边框会相加（颜色变浓）。
解决方案
让其中一个盒子的margin-left | margin-right=-边框厚度 等于左右元素的左边框直接重叠不相加。 设置哪个看位置

文字围绕浮动元素

1. 一个父元素内包含 图片和文字 顺序是先图片再文字
2. 图片设置为float即可

    <div class="container">
        <img src="./images/arr.png" alt="">
        <p>全部素材、源码、ppt、素材、讲义都在置顶留言,去下载吧~~</p>
    </div>

        .container{
            width: 300px;
            height: 50px;
            background-color: aqua;
        }
        img{
            float: left;
            width: 50px;
            height: 50px;
        }

8. 瀑布流

1.column-count css 控制

      .content{
      columns: 2;
      column-gap: 2px;
    }
    img{
      width: 100%;
    }

2. flex

      .content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        height: 1600px;
      }
      item:nth-child(4n + 1) {
        order: 1;
      }
      item:nth-child(4n + 2) {
        order: 2;
      }
      item:nth-child(4n + 3) {
        order: 3;
      }
      item:nth-child(4n) {
        order: 4;
      }
      .item {
        width: 25%;
        position: relative;
        counter-increment: item-counter;
      }
      img {
        width: 100%;
      }

3.js

      .container{
            position: relative;
        }
        .item{
            /* width: 200px; */
            height: auto;
            position: absolute;
        }

        .item img{
            width: 100%;
        }

      window.onload = function(){
        pubuliu();
        window.onresize = pubuliu;
      }
      function pubuliu(){
        const con = document.querySelector('.content');
        const item = document.querySelectorAll('.item');


        const clientWidth = document.documentElement.clientWidth;

        // 一行的个数
        const columnCount = 4;

        // 每个图片都宽度
        const width = Math.floor(clientWidth/columnCount);

        // 重置视kou宽度
        con.style.clientWidth = columnCount*width+'px';

        let hrr = [];
        for (let index = 0; index < item.length; index++) {
          item[index].style.width = width+'px';
          if (index<columnCount) {
            item[index].style.top = '0px';
            item[index].style.left = width*index+'px';
            hrr.push(item[index].offsetHeight)
          }else{
            const min = Math.min(...hrr);
            let minIndex = hrr.indexOf(min); // 1-4
            
            item[index].style.top = min+'px';
            item[index].style.left = minIndex*width+'px';

            hrr[minIndex]+=item[index].offsetHeight;
          }
        }
      }