css初级-CSDN博客

本文链接：https://blog.csdn.net/qq_54010685/article/details/124105356

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、旋转效果
二、animation
三、rem适配(配合flexible.js效果更佳)
适配是适应宽度，如果高度（即内容多少是可以变的）是变化的，则定位或浮动的高度不能写成响应式或百分比，否则位置会发生变化
四、媒体查询
五、grid布局
六、overflow: auto实现滚动，可以滚动盒子必须有高度
七、遮罩层
八、input radio修改样式
九、Transform和animation
十、select修改原来样式
十一、nth:chid()后代选择器
十二、flex布局
十三、移动端字体小10px和pc小于10px
十四、文字从右开始
十五、对话框
十六、text-align: center
十七、vh和window.innerHeight
十八、定位和浮动
十九、input单选框
二十、提示框
二十一、transition、transform和translate
二十二、background-position
二十三、vertical-align
二十四、var
二十五、塌陷
二十六、自动换行
二十七、首行空两格
二十八、display:inline-flex
二十九、阴影
三十、font-style 斜体
三十一、渐变色
三十二、旋转
三十三、动画总结
三十四、闪闪的按钮
三十五、无缝上滚动
三十六、左右滑动
三十七、无缝左右滚动（非手动滑动）
三十八、手机出现左右滑动问题
三十九、background
四十、html
四十、后代选择器
四十一、switch
四十二、vue模态框
四十三、百分比
四十四、下拉搜索
四十五、两行后省略号
四十六、文字自动换行
四十七、border-image
四十八、grid布局
四十九、background-position
五十、省略号汇总
五十一、定位覆盖问题z-index
五十二、flex和margin
五十三、吸顶效果
五十四、浏览器缩放
五十五、object-fit
五十六、flex影响高度
五十七、对齐问题
五十八、white-space: wrap对手机字体换行不起效
五十九、ios输入框自动放大页面
六十、object-fit不起效
六十一、图片浮动但文字不悬浮左右问题
六十二、滚动出现问题
六十三、换行
六十四、默认值
六十五、设置火狐浏览器独有的样式
六十六、对齐问题
六十七、占满剩余屏幕尺寸
六十八、保持宽高比
六十九、父盒子宽度小于子盒子，子盒子不换行原因
七十、文本有\n换行符（或有\<br>标签）
七十一、css计数器
七十二、word-break: break-all和word-wrap: break-word的区别
七十三、滚动条无法显示全
七十四、flexible文件
七十五、不可点击事件
七十六、对角线
七十七、内容垂直居中属性
七十八、下划线特效
七十九、不定高度动画
八十、遮罩层
八十一、has用来获取父元素和先前兄弟元素
八十二、flex：1 滚动问题
八十三、flex布局子项中英文数字对齐

开始前介绍一些ui框架：vant：支持vue移动端，部分小程序，react移动端，antdesignVue：vue版web，antdesign：react版web

一、旋转效果

   .smallImg {
      //旋转中心，一般是图片时才会用到（图片不对称），不写默认是盒子中心
      transform-origin: 50% 60%;
      //动画持续时间，动画变化曲线   
      transition: all 3s;
    }
    .smallImg:hover {
    //绕Z轴旋转
      transform: rotateZ(360deg)
    }
   <img src="small.png" alt="" class="smallImg">

二、animation

查看csdn

@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-timingfunction  规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是 0
animation-iteration-count 规定动画被播放的次数，默认是 1，还有 infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"

animation 所有动画属性的简写属性，除了animation-play-state 属性

  @keyframes a {
            0% {
                width: 300px;
            }
 
            50% {
                width: 800px;
            }
 
            100% {
                width: 300px;
            }
        }

<!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>
    div{
      height: 200px;
      height: 100px;
      overflow: hidden;
    }
    table{
      animation: up 15s linear  infinite ;
    }
    @keyframes up{
      0%{

      }
      100%{
        transform: translateY(-50%);
      }
    }
    table:hover {
      animation-play-state: paused;
    }
  </style>
</head>
<body>
  <div>
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
      
     </table> 
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
   <script>
    let tab=`
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
  `
    $('tbody').append(tab)
   </script>
</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>
        .box1{
            background-image: url(./image/雪人.jpg);
            height:180px;
            width: 123px;
            margin: 0 auto;
            animation-name: run;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(4);
           
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -487px 0;
            }
                
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

三、rem适配(配合flexible.js效果更佳)

适配是适应宽度，如果高度（即内容多少是可以变的）是变化的，则定位或浮动的高度不能写成响应式或百分比，否则位置会发生变化

查看连接
注意：设计稿宽度可以随意设置，就是用于比例计算而已
rpx 是微信小程序独有的，且不需要计算，会自适应

设计稿宽度：400px

移动设备：400px
//如果不想x，也可以设置设计稿宽度调整比例
首先，通过设计稿宽度，设置html的 font-size的值为 移动设备 / 设计稿宽度 *	 x = x px（x可为任意值，下方实例中使用为10，即 1rem = 10px）。

当相同的代码运行在屏幕为小于400px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x，整体比例不变，以此达到移动适配的效果

rem插件，rem大小设置要和当前屏幕的html的font-size大小保持一致，不一致也行，反正都是成比例变化的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 1rem /* 100px -> 1rem */;
      height: 1rem /* 100px -> 1rem */;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>

  </div>
  <!-- 引入flexible.js  修改源码，原来分为10分先改成24份 -->
  <!-- flexible.js可在github下载 -->
  <script src="./index.js"></script>
</body>
</html>

适配总结：
省去写媒体查询，最方便：
1.引入flexible.js（修改为24份更有效）
2.rem插件随意设置一个值（手机50，电脑100）
3.开始写即可。
其他解决方案：
1.autofit，不需要flexible.js
2.px2rem（需要flexible.js）：
添加链接描述
 看这个
 vue2直接可以用
 配置参考
flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
 
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }
 
  setRemUnit();
 
  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

四、媒体查询

点击查看链接

//包含小的，不包含大的
@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}

五、grid布局

点击参考
grid布局常用作移动端布局

<!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>
    @media screen and (max-width:350px) {
      html{
        font-size: 100px;
      }
    }
    @media screen and (min-width:350px) {
      html{
        font-size: 120px;
      }
    }
    .content{
      display: grid;
      //行可能是不确定的，auto-fill自动填充
      grid-template-rows: repeat(auto-fill,1rem );
      grid-template-columns: 1.2rem   1.2rem  ;
      column-gap: .2rem ;
      row-gap: .1rem ;
      justify-content: center;
    }
    .content div{
      text-align: center;
      background: green;
    }
  </style>
</head>
<body>
  <div class="content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

六、overflow: auto实现滚动，可以滚动盒子必须有高度

<div style="margin-bottom: 50px;height: 200px; overflow: auto;">
    <ul id="couponsContainer" >
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
      <li>111</li>
    </ul> 
  </div>

七、遮罩层

<!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>
    .zhezhaoDiv{
      background-color: rgba(0,0,0,0.7);
      /* 占满全屏 */
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
    .zheContent{
      width: 100px;
      height: 100px;
      background-color: #fff;
      position:absolute;
      /* 居中 */
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin:  auto;
      overflow: hidden;
    }
    .couponsContainer{
      overflow: hidden;
    }
  </style>
</head>
<body>
  <button id="btn1" >显示</button>
  <div class="zhezhaoDiv">
    <div class="zheContent">
      <div class="radioTitle">请选择当前可用优惠券</div>
      <!-- height: 85%;overflow:auto  实现滚动 -->
      <div style="height: 85%;overflow:auto" id="radioContents">
        <div class="tangkuands">
          <ul id="couponsContainer" style="margin-bottom: 50px;">
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
          </ul>
          <button id="btn" style="position: absolute; bottom: 0px;">隐藏</button>
        </div>
       
      </div>
      
    </div>
   
  </div>
  <div>
    sadasdasdasd
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    $('#btn').click(function(){
      $('.zhezhaoDiv').hide()
    })
    $('#btn1').click(function(){
      $('.zhezhaoDiv').show()
    })
  </script>
</body>
</html>

八、input radio修改样式

查看csdn
1.input radio 只允许修改宽度和高度，而且宽度和高度必须相等才会有变化
2.使用appearance: none隐藏整个radio，重写样式，input还是显示的，只是radio消失了
原理：通过绝对定位覆盖原多选框

      input[type="radio"] {
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
      }

      /** 未被选中的样式*/
      input[type="radio"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      /** 选中的样式 */
      input[type="radio"]:checked::before {
        content: "\2713";   /* 2713表示勾勾✓ */
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        color: #7d7d7d;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
      }

九、Transform和animation

Transform的 scale属性不能作用于 inline元素上，例如span
并且动画 animation 也不能作用于inline元素上
可以给span加display:inline-block;属性

十、select修改原来样式

select {
  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  /* 兼容 */
  -moz-appearance:none;
  -webkit-appearance:none;
  /* 去除掉原来样式就可以直接写样式了 */
  border: .0082rem /* 1px -> .0082rem */ solid #aae7fc; 
  border-radius: .0328rem /* 4px -> .0328rem */;
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("../images/下-三角.svg") no-repeat scroll right center transparent;
  background-size: .1641rem /* 20px -> .1641rem */  .1641rem /* 20px -> .1641rem */;
  /*为下拉小箭头留出一点位置，避免被文字覆盖，上下也要有间隔让字体居中*/
   padding: .0164rem /* 2px -> .0164rem */  .1231rem /* 15px -> .1231rem */; 
   //选择框被字体颜色包含下拉框
   color: #aae7fc;
  }

在这里插入图片描述

十一、nth:chid()后代选择器

点击查看更多

//需要从1开始，top_left 是父元素，选取第二个div子元素
.top_left div:nth-child(2){
  width: .5744rem /* 70px -> .5744rem */;
  height: .2872rem /* 35px -> .2872rem */;
  line-height: .2872rem /* 35px -> .2872rem */;
  border: 1px solid #5dd5ff;
  background: #5dd5ff;
}
.top_left div:nth-child(3){
  width: .8205rem /* 100px -> .8205rem */;
  height: .1641rem /* 20px -> .1641rem */;
  line-height: .1641rem /* 20px -> .1641rem */;
  border: 1px solid #5dd5ff;
  background: #5dd5ff;
}

十二、flex布局

点击查看csdn

justify-content 主轴元素对齐方式
align-content 交叉轴行对齐方式//多行
align-items 交叉轴元素对齐方式//单行

主要用
justify-content: space-around;
align-content: space-around;
如果item之间间隔大，可以使用item的父元素(flex的元素)使用padding进行压缩上下左右大小，注意此时盒子会变大。
如果盒子本身没有指定宽度或高度，则此时padding不会撑大盒子

十三、移动端字体小10px和pc小于10px

<span>123</span>
span{
display: inline-block;
font-size: .0821rem /* 10px -> .0821rem */;
transform: scale(0.8);
}

十四、文字从右开始

点击查看

direction：
语法：
direction : ltr | rtl | inherit
取值：
ltr :　默认值。文本从左到右流入
rtl :　文本从右到左流入
inherit :　文本流入方向由继承获得

十五、对话框

点击查看

<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>
    div{
      width: 300px;
      height: 100px;
      border: 5px solid aqua;
      position: relative;
      border-radius: 5px;
    }
    //下三角
    div::before{
      content: '';
      display: block;
      position: absolute;
      bottom: -45px;
      left: 50px;
      border: 20px solid ;
      border-color: aqua transparent transparent;
    }
    //白色下三角
    div::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -38px;
      left: 50px;
      border: 20px solid ;
      border-color: #fff transparent transparent;
    }
  </style>
</head>
<body>
  <div> </div>
</body>
</html>

十六、text-align: center

点击查看参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parent {
            width: 500px;
            height: 150px;
            text-align: center;
            background-color: pink;
            border-bottom: 1px solid black;
        }
        strong {
            background-color: blue;
        }
        em {
            display: inline-block;
            background-color: blue;
        }
        p {
            width: 200px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 问题1:text-align: center的使用 -->
    <div class="parent">
        <!-- 1.块级元素下使用text-align: center，使得其文本内容居中对齐 -->
        123
    </div>
    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <strong>行内元素</strong>
    </div>
    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <em>行内元素转行内块元素</em>
    </div>
    <div class="parent">
        <!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
        但是这个子代块级元素p会继承text-align: center，使得其文本内容居中对齐-->
        <p>hahaha</p>
    </div>
    </script>
</body>
</html>

十七、vh和window.innerHeight

vh和window.innerHeight一样

十八、定位和浮动

定位点击查看
 浮动

粘性定位

只需注意：

浮动后的元素变为行内快元素，定位不会
只有相对定位relative和粘性sticky才占位置，
不同：
a:相对定位针对自己定位，
b:sticky相对浏览器定位，
相同：
a:定位后还是原来位置占据
定位显示在标准文档和浮动上面
浮动出现层级问题，只会是块元素，且float元素在前面，其他只会出现位置问题，即浮动元素会在最左面和最右面

十九、input单选框

添加链接描述
accend-color：会改变input单选框原有的选中颜色

二十、提示框

<!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>
        #tip{
            position: relative;
            width: 200px;
            height: 50px;
            background: red;
            top: 200px;
            left: 200px;
        }
        #tip::before{
            content: '';
            display: block;
            position: absolute;
            background: green;
            width: 100px;
            height: 20px;
            top: -35px;
            left: 20%;
            z-index: 999;
            display: none;

            /* transform: rotate(90edg); */
        }
        #tip::after{
            content: '';
            display: block;
            position: absolute;
            background: green;
            width: 20px;
            height: 20px;
            top: -25px;
            left: 50%;
            transform: rotate(45deg) ;
            display: none;
        }
        #tip:hover::after,#tip:hover::before{
            display: block;
        }
    </style>
</head>
<body>
    <div id="tip" >
        提示
    </div>
</body>
</html>

二十一、transition、transform和translate

添加链接描述
translate(x, y) x，y 可设置为百分比值，代表着基于自身宽度/高度的百分比

如果使用transition监听基本属性，例如height或width等，其值在发生改变时就会对文档流产生影响，比如下图，鼠标悬停的div长宽变化会把其他的div给“挤开”，甚至最边上的还挤到了下一行。并且，可以长宽属性在发生变化时元素的固定点不是中心，而是左上角

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    width: 120px;
    height: 120px;
}

在这里插入图片描述
而使用transform则不会出现这种情况，如下。因为transform只会影响当前元素的状态，达到类似position: relative;的效果，而且transform是默认基于元素的中心进行转换的，就算想改的话也可以使用transform-origin属性进行修改，具体用法非常简单，这里就不再赘述。

.box {
    width: 100px;
    height: 100px;
    //如果使用translate平移，scale的中心会变得奇怪，margin和定位则不会出现这种情况。
    //transform: translate(50%,50%);
    transition: all 0.4s ease;
}

.box:hover {
    transform: scale(1.2, 1.2);
}

在这里插入图片描述

二十二、background-position

添加链接描述

二十三、vertical-align

添加链接描述
 看这个
看这个：
0.vertical-align用在行内块上，是目标元素与父元素的某个线对齐，默认是基线对齐
1.文字有顶线、中线、基线，有文字的父元素才有线，包括span内的文字
2.图片，输入框，转换成inline-block的没有文字的div等等没有顶线，中线，基线，如果是基线对齐（baseline）那么目标元素的底端与父元素的基线对齐，
所以父元素的文字会变化到img等的低端对齐线上，父元素是被动的一方
3.一个子元素对齐方式改变，会引发父元素的基线等发生变化，其他对齐方式不同的子元素会跟着父元素改变
在这里插入图片描述

<!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>
    .father{
      width: 500px;
      height: 500px;
      background: green;
    }
    .box1{
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: brown;
    }
    .box2{
      display: inline-block;
      width: 70px;
      height: 70px;
      background: pink;
    }
  </style>
</head>
<body>
    <div class="father">
      11
      <div class="box1"></div>
      <div class="box2">11</div>
      <span>sasa</span>
    </div>
</body>
</html>

重点：
1.当使用table-cell布局或inline元素时，可以使用CSS的vertical-align属性控制元素的垂直对齐方式
2.父元素的基线是如何判断？

在CSS中，父元素的基线是根据该元素的文本内容来确定的。在一个包含文本的元素中，基线是字符底部的位置，也就是字符下方的空白区域的顶部。

例如，如果一个

元素包含一个单词hello，那么该元素的基线就是单词中第一个字母h的底部位置。如果该元素包含多个行内元素，则该元素的基线是这些行内元素中的基线位置的最低值。

在vertical-align属性中，如果将其值设置为baseline，则该元素将沿着其父元素的基线对齐。如果将其值设置为其他值，则该元素将相对于其父元素的基线进行偏移。

需要注意的是，如果一个元素没有文本内容，那么它将无法确定基线位置。在这种情况下，可以手动指定一个基线位置，或者使用其他适当的对齐方式。
3.如何手动的指定父元素的基线？

要手动指定父元素的基线位置，可以使用vertical-align属性在父元素上设置基线的位置。vertical-align属性不仅可以用于子元素的垂直对齐，也可以用于父元素的基线对齐。

当你想要在父元素中垂直对齐文本时，可以将vertical-align属性设置为baseline，这样子元素就会与父元素的基线对齐。例如，如果你有一个div元素，其中包含一些文本，你可以通过以下方式来指定父元素的基线位置：

div {display: inline-block;vertical-align: baseline;}

在上面的代码中，display: inline-block可以使div元素与其他行内元素一样，而vertical-align: baseline则将div元素与其父元素的基线对齐。这样就可以手动指定父元素的基线位置，从而实现更精确的垂直对齐。

二十四、var

添加链接描述

二十五、塌陷

添加链接描述
如果父元素和子元素没有间距，
1.子元素margin-top会带着父元素一起下沉，且子元素相对父元素margin-top为0，
2.如果父元素自身有margin-top，且子元素也有margin-top，则父元素会下沉最大的，子元素相对父元素margin-top为0

<!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>
    
        .d1{
            background-color: royalblue;
            width: 500px;
            height: 400px;
            margin-top: 20px;
        }
        .d2{
            background-color:red;
            width: 300px;
            height: 200px;
            margin-top: 60px;
        }
      
        /* .firstChild{
            height: 0.1px;
        } */
    </style>
</head>
<body>
    <div class="d1">
        <div class="firstChild"></div>
        <div class="d2">子盒子</div>
    </div>
</body>
</html>

在这里插入图片描述

二十六、自动换行

1.width:120px
2.word-break:break-all

二十七、首行空两格

text-indent:2em

二十八、display:inline-flex

添加链接描述

<!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>
        .out{
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: inline-flex;
            vertical-align: top;
        }
        .div2{
            background: red;
        }
    </style>
    
</head>
<body>
    <div class="out">
        <div class="div1">

        </div>
        <span class="div2">
                111
        </span>
    </div>
    <script>
  
      
    </script>
</body>
</html>

在这里插入图片描述

二十九、阴影

添加链接描述
box-shadow: x-shadow y-shadow blur spread color inset;
1.x-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，x-shadow不同情况下的不同表现
2.y-shadow: 必需的，水平阴影的偏移量，可以为负值，下图表示了在其他参数相同，y-shadow不同情况下的不同表现
3.blur: 可选的，模糊距离，不支持负数，下图表示了在其他参数相同，blur不同情况下的不同表现
4.spread: 可选的，阴影的扩展半径，阴影的原理其实就是复制一个当前元素出来，这个属性就是控制的复制出来的元素的半径，一定要记好了啊，支持负数，如果为负数，复制出来的元素就会比原元素小，下图表示了在其他参数相同，spread不同情况下的不同表现

阴影动画
在这里插入图片描述

<!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>
        .box19 {
            width: 100px;
            height: 30px;
            background: #89d444;
            line-height: 30px;
            color: #fff;
            user-select: none;
            box-shadow: 0px 8px 0 0 #479a48;
            border-radius: 5px;
            transform: translateY(-8px);
            text-align: center;
        }
        .box19:active {
        transform: translateY(0);
        box-shadow: 0 0
        }

    </style>
</head>
<body>
    <div class="box19">
        点我
    </div>
   
</body>
</html>

三十、font-style 斜体

font-style
　normal：正常的字体
　italic：斜体。对于没有斜体变量的特殊字体，将应用oblique
　oblique：倾斜的字体
两者都是斜体，不必区分

三十一、渐变色

添加链接描述
CSS定义了三种渐变类型:

Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线（记住这个）
Radial Gradients (defined by their center) 由中心定义（了解）
Conic Gradients (rotated around a center point) 绕一个中心点旋转（了解）

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
//Direction - Top to Bottom (这是默认,从上到下)
#grad {
  background-image: linear-gradient(red, yellow);
}

Direction - Left to Right (从左到右)
#grad {
  background-image: linear-gradient(to right, red , yellow);
}
Direction - Diagonal （对角线）
#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}
使用多种颜色的stop
#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

三十二、旋转

添加链接描述
transform-origin属性：设置旋转中心
看上去transform-origin取值与background-position取值类似。

top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%

三十三、动画总结

添加链接描述
包含：1.过度 2.动画 3.变形 4.旋转 5.播放
过度和动画的时间都要加s

三十四、闪闪的按钮

在这里插入图片描述

<!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>
        .content{
            margin-left: 100px;
            width: 100px;
            height: 100px;
            background: gray;
            overflow: hidden;
        }
        .content::after{
            content: '';
            display: block;
            width: 5px;
            height: 200px;
            float: left;
            margin-left: -20px;
            transform: rotate(40deg);
            transform-origin: 57px 13px;
            background: #000;
            /* animation: move 3 ease infinite ; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* 重点时间要单位s */
            animation: move 1.5s linear 0s infinite ;

        }
        @keyframes move {
            0%{
                margin-left: 0;
            }
            25%{
                margin-left: 50px; 
            }
            50%{
                margin-left: 100px; 
            }
            75%{
                margin-left: 150px; 
            }
            100%{
                margin-left: 200px; 
            }
        }
    </style>
</head>
<body>
    <div class="content">

    </div>
</body>
</html>

三十五、无缝上滚动

重点：1.内部div上滚，而非最外面滚动
2.上滚动50%，而且要克隆一组滚动元素添加内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes up {
            100% {
                transform: translateY(-50%);
            }
        }
        .nav{
            height: 100px;
            overflow: hidden;
           /* background: greenyellow; */
        }
        .content{
            animation: up 3s linear 0s infinite ;
        }
        li{
            height: 30px;
        }
        
    </style>
</head>
<body>
    <div class="nav">
        <div class="content">
            <ul>
                <li>11111111111</li>
                <li>11111111111</li>
                <li>11111111111</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $('ul li').clone().appendTo('ul')
    </script>
</body>
</html>

三十六、左右滑动

overflow:auto ：可以滑动
overflow:hiden ：禁止滑动
遇到的坑：
苹果手机宽度可能出现不继承情况，要手动写：width:100%
添加链接描述
 -webkit-box

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>纯css实现左右滑动</title>
	<style type="text/css">
	ul{
	//防止内容换行，重点
	white-space:nowrap;
	}
	ul,
	li {
		list-style: none;
	}

	.slide-box {
		margin-top: 50px;
		display: -webkit-box;
		overflow-x: auto;
		/*适应苹果*/
		-webkit-overflow-scrolling: touch;
	}

	.slide-item {
		//由于块元素独占一行
		//转换成inline-block则无法滚动，因为沾满手机宽度会换行导致宽度不会超出屏幕，不会滑动。
		//想办法变成不换行，超出屏幕宽度，使用display: -webkit-box;
        /* display: inline-block; */
		width: 20%;
		height: 300px;
		border: 1px solid #ccc;
		margin-right: 30px;
		background: pink;
	}

	/*隐藏掉滚动条*/
	.slide-box::-webkit-scrollbar {
		display: none;
	}
	</style>
</head>

<body>
	<ul class="slide-box">
		<li class="slide-item">1</li>
		<li class="slide-item">2</li>
		<li class="slide-item">3</li>
		<li class="slide-item">4</li>
		<li class="slide-item">5</li>
	</ul>
	<p>测试文字，左右滚动时，这里不会动</p>
</body>

</html>

三十七、无缝左右滚动（非手动滑动）

overflow:hide
注意事项：
1.内容如果用标签的话会自动挤下来
2.只用一个标签，内用要overflow：hidden,内容可能换行了，左右移动看起来后面没内容，要使用white-space:nowrap
3.内使用了white-space:nowrap，最外面盒子宽度会被撑大（外部即使设置宽度也没办法限制），最外面盒子也要用overflow：hidden这样就限制了，使用了这个属性宽和高都要设置，宽自动100%，高要看内容设置，防止隐藏高度内容。

  .saysomething{
  			overflow:hidden;
            position: relative;
            top:10px;
        }
        .saysomething div{
            display: inline-block;
            vertical-align: middle;
            height: 32px;
            font-size: 15px;
           
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: #6acfff;
            border-radius: 4px;
        }
        .saysomething img{
            width: auto;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: 0px;
        }
        .toleft{
            position: absolute;
            top: -10px;
            left: 32px;
            text-align: top;
            overflow: hidden;
        }
        @keyframes toleft {
            100%{
                transform: translateX(-50%);
            }
        }
        .content{
            line-height: 13px;
            white-space: nowrap;
            color: white;
            animation: toleft 40s linear  0s infinite ;
            
        }
<div class="saysomething">
        <img src="./images/laba.png" alt="">
        <div class="toleft">
            <div class="content">
                用户 13*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 15*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 13*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 15*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 13*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 15*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 13*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 15*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                用户 18*******刚刚已参与活动！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
 </div>

三十八、手机出现左右滑动问题

* {
padding: 0;
margin: 0; 
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body {
position: absolute;
top: 0;
left: 0;
}

三十九、background

添加链接描述
比如：background:url(…) no-repeat fixed center/cover
又或者background: #333 0 0 / 100px 100px
或background: url(“./images/bg.png”) no-repeat 0/100% ;

其他属性的缺失或者顺序都不重要但是在 position 和 size 之间无论是什么写法都需要以一个 “/” 来分割否则无法识别

background-repeat
属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

background-size
设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
background-size: length|percentage|cover|contain;

值	说明
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
auto	以背景图片的比例缩放背景图片。

四十、html

html{
width: 100%;
height: 100%;
}
可以把html高度和宽度和屏幕保持一致

四十、后代选择器

添加链接描述
1、first-child

first-child表示选择列表中的第一个标签。

2、last-child

last-child表示选择列表中的最后一个标签

3、nth-child(3)

表示选择列表中的第3个标签，上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。

4、nth-child(2n) 倍数列可以是3,4,5…n

这个表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签。

5.nth-child(even)

同4系数为2时，这个表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签。

四十一、switch

添加链接描述

    <input type="checkbox" class="switch-button" id="switch-button" onclick="handleClick(this)">
    <label for="switch-button"></label>
        .switch-button{
            display: none;/*隐藏表单元素*/
        }
        .switch-button+label{/*+选择器选择紧跟“+”左边选择器的第一个元素*/
            display: inline-block;
            position: relative;
            transition: all .3s;
            width: 60px;
            height: 30px;
            border: 1px solid #999;
            border-radius: 15px;
            background-color: #ccc;
        }
        .switch-button:checked+label{/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
            background-color: lightgreen;
        }
        .switch-button+label::before{/*使用伪元素生成一个按钮*/
            content: '';
            display: block;
            height: 25px;
            width: 25px;
            position: absolute;
            border-radius: 25px;
            left: 2px;
            top: 2px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
            transition: all .3s;
        }
        .switch-button:checked+label::before{/*checkbox选中时按钮的样式*/
            left: 32px;
            transition:  all .2s linear;
        }
//使用单选框，可以选中和取消
        function handleClick(e){
           console.log(e.checked);
        }

四十二、vue模态框

添加链接描述
很好改造成普通html

四十三、百分比

添加链接描述

margin ， padding
百分比值总是相对于父元素块的宽度
transform: translate();background-size；border-radius；
相对于自身宽高
line-height
行高百分比是基于当前元素字体大小（字体大小 * 所设行高的百分比 = 最终所呈现的行高值）
当定位为absolute定位时，left,top参考的是【从当前元素往外找遇到的第一个定位为非static的元素，若没有这样的元素则以当前视口为参考】的宽和高
若为relative定位，则以父元素的宽，高为参考依据

四十四、下拉搜索

利用标签datalist

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>list属性示例</title>
</head>
<body>
text: <input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none;"将datalist元素设定为不显示 -->
<datalist id="greetings" style="display:none;">
    <option value="Good Morning">Good Morning</option>
    <option value="Hello">Hello</option>
    <option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>
</html>

四十五、两行后省略号

text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

四十六、文字自动换行

当文字很多可能会超出div的宽度，需要设置这个自动换行

word-wrap:break-word; 
word-break:break-all;

四十七、border-image

border-image必须配合border使用

border: 1px solid ;
//最后面1 不能少
border-image: linear-gradient(180deg, rgba(2, 86, 255, 0.1) 2%, rgba(2, 86, 255, 0.5) 49%, rgba(2, 86, 255, 0.1) 100%) 1;

四十八、grid布局

添加链接描述

//常用，如果不知道几行，高度可以在item内设置
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;

//响应式布局
//外层父元素要写成百分比或rem
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
//这种写法可以用来做响应式布局，
//auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，
//minmax最小值255px、最大值1fr代表剩余空间的比例。

//写在item上,以grid-row行为例，从第几列开始 / 第几列+想占几个
.item{
 	grid-row: 1/3;
    grid-column: 1/3;
}

 /* 如果1个值代表全部统一行高 如果两个值代表 第一个代表奇数 第二个代表偶数 */
 //这样写行数可以避免行数写死，又可以统一行高，也可以使用grid-template-rows: repeat()代替
grid-auto-rows: .7fr .2fr;

 grid-auto-rows: minmax(50px,auto);

四十九、background-position

background: url('../../../assets/bl/VendorColumn.png') no-repeat;
//将背景图片的 100%(right) 100% 这个点，和元素的 100%(right) 100% 这个点对齐
background-position: 100% 100%;

五十、省略号汇总

添加链接描述
1.文字单行不换行多余文字显示省略号

      white-space: nowrap;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;

2.文字多行不换行多余文字显示省略号

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;//行数

五十一、定位覆盖问题z-index

如果设置z-index很大也不能覆盖其他图层，是因为没有设置背景色background，即使背景色是纯白色也要设置

五十二、flex和margin

flex中使用margin：auto ，把上下左右的空间占据
margin-right：auto ：把右的空间占据

五十三、吸顶效果

父元素relative定位，子元素sticky定位
注意：必须绝对的父子关系

<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>
        #container{
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow: auto;
        }
        #header{
            height: 100px;
            position:sticky;
            top: 0;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        你好 <br>
        你好 <br> 你好 <br>
        你好 <br> 你好 <br>
        你好 <br> 你好 <br>
        你好 <br>
        <div id="header">
            固定的头部
        </div>
        <div id="inner">
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
            你好 <br>
        </div>
    </div>
</body>

五十四、浏览器缩放

浏览器缩放和电脑显示设置缩放都是改变的分辨率，统一使用媒体查询

五十五、object-fit

添加链接描述

五十六、flex影响高度

flex：align-items默认stretch，即高度一致，如果子元素设置高度，则该效果不起效，或者套个父盒子

五十七、对齐问题

除了margin padding 字体大小也可能影响

五十八、white-space: wrap对手机字体换行不起效

解决方案

word-break: break-all;
 word-wrap: break-word;
 white-space: pre-wrap;

五十九、ios输入框自动放大页面

原因：输入框字体小于16px
解决方案：

 <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

可能用到el-input聚焦

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    // console.log("aaaa",el.children[0].focus);
    //原生
    el.focus()
    setTimeout(_ => {
    //el-input
      el.children[0].focus()
    })
  },
  update:function (el) {
    // 聚焦元素
    // console.log("aaaa",el.children[0].focus);
    el.focus()
    setTimeout(_ => {
      el.children[0].focus()
    })
  },
})

六十、object-fit不起效

原因：没有设置图片的宽高，

六十一、图片浮动但文字不悬浮左右问题

原因：文字没有换行
解决： word-wrap: break-word;

<div>
<img/>
<p>wqd1dasdwqda</p>
</div>

六十二、滚动出现问题

寻找oveflow属性，auto是对的，其他值是有问题

六十三、换行

两个都要加
white-space: normal;
word-break: break-all;

六十四、默认值

initial：w3c标准初始化
inset：浏览器代理初始化（例如：button浏览器代理的初始化）
inherit：继承
resvet：如果可以继承则inherit，无法继承则initial

消除浏览器代理的初始化：all：resvet
消除继承：all：initial

六十五、设置火狐浏览器独有的样式

@-moz-document url-prefix(){
	//样式卸载里面
}
//例如
@-moz-document url-prefix(){
  .wordNumber {
      left: 1005px;
    bottom: -11px;
    top: 245px;
    word-break: normal;
  }
}

六十六、对齐问题

效果图
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="content">
        <div class="item">
            <div>
                <span style="display: block;">
                    名字
                </span>
                111111111111111111111111111111111111111111111
            </div>
            <div>
                <span>
                    年龄
                </span>  
                <span>
                    18
                </span>
            </div>
        </div>
        <div class="item">
            <div>
                <span style="display: block;">
                    名字11
                </span>
                11111
            </div>
            <div>
                <span>
                    年龄
                </span>  
                <span>
                    18
                </span>
            </div>
        </div>
        <div class="item">
            <div>
                <span style="display: block;">
                    名字
                </span>
                11111111111
            </div>
            <div>
                <span>
                    年龄
                </span>  
                <span>
                    18
                </span>
            </div>
        </div>
    </div>
</body>
</html>

scss

$minWidth: 200px;
%flex {
    display: flex;
}

@mixin myFlexItem($flex: .3333, ) {
    display: flex;
    flex: $flex;
    vertical-align: top;
}
.content{
    width: 800px;
}
.item {
    margin-top: 20px;
    @extend %flex;
    div {
        @include myFlexItem;
        //设置最小宽度（配合flex：0.3333）是为了某个数据过长，不会影响左右的标签位置
        min-width: 400px;
        span:first-child{
            //设置最小宽度，为了列的每一行头部对齐
            min-width: $minWidth;
            margin-right: 20px;
        }
    }
}

六十七、占满剩余屏幕尺寸

效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* html必须设置高度100% */
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .content{
        	//高度必须设置
            height: 100%;
            display: flex;
            flex-direction: column;
            >div:nth-child(2){
                background: #000;
                //在需要占满剩余屏幕的标签设置flex，任何数字都可以
                //尽量使用后flex布局，flex：1会自动扩大和缩小占满剩余的内容，
                //height：100%，写死会有问题
                //定位和flex会有冲突，定位时使用height：100%
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <div>
            111
        </div>
        <div>
            222
        </div>
        <div>
            3333
        </div>
    </div>
</body>
</html>

六十八、保持宽高比

添加链接描述
重点：当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时，计算结果是参照父元素的宽度

下面是5:4比例

html

<div class="father">
	<div class="childern">
      <div class="sun">
      //在这里写内容
		</div>
    </div>
    <div class="childern">
      <div class="sun">
      //在这里写内容
	</div>
    </div>
</div>

css

.childeren{
	position: relative;
	width: 50%;
	height: 0;
	padding-top: 40%;
	display: inline-block;
	overflow: hidden;
}
.sun{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height:100%
}

六十九、父盒子宽度小于子盒子，子盒子不换行原因

word-wrap: break-word;
子盒子flex布局：flex-wrap: nowrap;默认
设置了max-width，实际宽度不高于max-width，但显示内容宽度大于max-width，根据实际宽度不会换行
或是table标签无法换行

七十、文本有\n换行符（或有<br>标签）

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示

normal：默认，忽略文本中所有的空白、换行符；只有文本存在 <br> 或文本达到框的约束时，文本才会换行
nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在\
或文本中有换行符时，文本才会换行
pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 <br> 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
pre-line：会略文本中的空白符；文本存在\
或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行

七十一、css计数器

    .one {
      /* 用于重置计数器的初始值，这里将计数器命名为 "oneCounter"  */
      counter-reset: oneCounter;

      /* 值 初始化是1， 不写的话，默认值是 0 */
      /* counter-reset: oneCounter 1; */
    }
    .one p::before {
      counter-increment: oneCounter 1;
      /* counter */
      content: counter(oneCounter) " 段 "
    }

  <div class="one">
    <p>北国风光</p>
    <p>千里冰封</p>
    <p>万里雪飘</p>
    <p>望长城内外</p>
    <p>惟余莽莽</p>
    <p>大河上下</p>
    <p>顿失滔滔</p>
  </div>

七十二、word-break: break-all和word-wrap: break-word的区别

word-break: break-all和word-wrap: break-word都是CSS属性，用于控制文本内容在容器中的换行行为。它们的区别如下：英文单词
1， word-break:break-all

例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

七十三、滚动条无法显示全

可能原因：

height百分比太大
max-height：100vh太大改成95vh或其他

七十四、flexible文件

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 103
  // 把屏幕平均分成10等份。比如1920/10= 192 px,这个时候1rem就是192px,配合vscod插件快速适配，在style中使用媒体查询。
  function setRemUnit() {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

七十五、不可点击事件

添加链接描述

七十六、对角线

参考

background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) calc(50% - 1.5px),
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) calc(50% + 1.5px),
    rgba(0, 0, 0, 0) 100%
  ),#F6F6F6 !important

在这里插入图片描述

七十七、内容垂直居中属性

360浏览器不支持

align-content: center;

七十八、下划线特效

<style>
		.title span{
			background: linear-gradient( to right,#ec695c,#61c454) no-repeat right bottom;
			background-size: 0 2px;
			transition: background-size 1300ms;
		}
		.title span:hover{
			cursor: pointer;
			background-position-x: left;
			background-size: 100% 2px;
		}
	</style>
	<body>
		<h2 class="title">
			<span>
				我不认为我会葬身于此，并且我从来没有如此神清气爽，
				我仿佛看到重生，因为从今以后我海波东将不受束缚
			</span>
		</h2>
	</body>

七十九、不定高度动画

 isOpen(e, item) { 
      if (!item.children || item.children.length == 0) return
      let target = e.currentTarget.firstElementChild
      let dom = e.currentTarget.nextElementSibling
      if (dom.offsetHeight == 0) {
        target.style.transform = "rotate(180deg)"
        dom.style.height = "auto"
        let domRealHeight = dom.offsetHeight
        dom.style.height = 0
        dom.offsetHeight
        dom.style.height = domRealHeight + "px"
      } else {
        target.style.transform = "rotate(90deg)"
        dom.style.height = dom.offsetHeight + "px"
        dom.offsetHeight
        dom.style.height = 0
      }
    },

八十、遮罩层

1，父元素要absolt相对定位，如果使用绝对定位realtive 不能全屏
2，子元素可以使用absolt或fixed定位
3，主要z-index问题

八十一、has用来获取父元素和先前兄弟元素

添加链接描述

八十二、flex：1 滚动问题

flex: 1的作用是同时设置flex-grow: 1、flex-shrink: 1和flex-basis: 0% 全写为flex: 1 1 0% ；
要写成flex：1 0 0
重点是flex-shrink: 0，这样不会拉伸

八十三、flex布局子项中英文数字对齐

<div class="out-top-right">
				<span>2024.12.31 </span>
				<span> 星期二 </span>
				<span> 1231 </span>
</div>

display: flex;
align-items: baseline; //基线对齐

在这里插入图片描述