css初级

已于 2024-07-31 14:56:26 修改
阅读量158 收藏
点赞数 1
文章标签： css 前端
于 2023-08-03 09:47:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54010685/article/details/124105356
版权

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

文章目录

开始前介绍一些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直接可以用
配置参考

四、媒体查询

点击查看链接

//包含小的，不包含大的
@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

  1. justify-content 主轴元素对齐方式
  2. align-content 交叉轴行对齐方式//多行
  3. 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);
}

十四、文字从右开始

点击查看

  1. 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一样

十八、定位和浮动

定位点击查看
浮动

粘性定位

只需注意：

  1. 浮动后的元素变为 行内快元素，定位不会
  2. 只有相对定位relative和粘性sticky才占位置，
    不同：
    a:相对定位针对自己定位，
    b:sticky相对浏览器定位，
    相同：
    a:定位后还是原来位置占据
  3. 定位显示在标准文档和浮动上面
  4. 浮动出现层级问题，只会是块元素，且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-repeatbackground-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

四十三、百分比

添加链接描述

  1. margin ， padding
    百分比值总是相对于父元素块的宽度

  2. transform: translate();background-size；border-radius；
    相对于自身宽高

  3. line-height
    行高百分比是基于当前元素字体大小（字体大小 * 所设行高的百分比 = 最终所呈现的行高值）

  4. 当定位为absolute定位时，left,top参考的是【从当前元素往外找遇到的第一个定位为非static的元素，若没有这样的元素则以当前视口为参考】的宽和高

  5. 若为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%
}

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

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

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

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

  1. normal：默认，忽略文本中所有的空白、换行符；只有文本存在 <br> 或文本达到框的约束时，文本才会换行
  2. nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
  3. pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在\
    或文本中有换行符时，文本才会换行
  4. pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 <br> 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
  5. 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整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

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

可能原因：

  1. height百分比太大
  2. 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>
qq_54010685
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css初级资料
06-12
根据提供的信息来看，这段文本与CSS初级资料并无关联，而是讲述了一个故事。但由于任务需求，这里将基于“CSS初级资料”这一主题展开详细的知识点梳理。 ### CSS初级资料知识点汇总 #### 1. CSS基础概念 - **CSS**...
CSS初级学习手册.pdf
09-30
以上就是CSS初级学习手册中的知识点概览。对于初学者而言，需要逐步掌握这些基础知识，并通过实践不断提升自己的前端开发能力。对于经验丰富的开发者来说，手册中的内容也是很好的参考资料，能够帮助回顾和巩固CSS的...
css初级篇
qq_42221394的博客
08-01 74
css——cascading style sheet 层叠样式表 引入css 1.行间样式 <div style="width:10px;height:100px;background-color:red;"> </div> 2.页面级css <html> <head> <style type="text/css"> div{ ...
CSS初级阶段
Poggie的博客
01-14 388
严格来讲，CSS不是编程语言，却要求抽象思维。它不是纯粹的设计工具，却要求创造力。 尽管了解一些“小技巧”或者具体的实现方式很有用，真正掌握CSS却需要理解这些实践背后的原理，一知半解不能让人走得更远，需要不断深入了解。
CSS初级属性
qq_53959286的博客
12-25 2701
关于CSS属性 设置字体的属性 1. font-size属性 font-size 可以设置字体大小，可以无限放大，但是不能无限小， 最小是12 值为长度单位： px 像素单位 em 一个汉字的大小 ex 一个英文x的大小 % 百分比 1 font-size:20px; //可以无限放大 2 font-size:12px; //不可以无限小，最小为12px的字体； 2.color属性 color 设置字体的颜色，注意 千万别写成font-color 值为颜色值：
css初级学习
m0_63338766的博客
11-07 90
格式：<style> 标签名{ 属性： ； } <style> 注意！！！1.属性值前面冒号后有一个空格2.选择器（标签）和大括号保留空格 font内容 font-size 改变字号 font-family 改变字体 font-weight 改变粗细 font-style字体样式 text内容 aline对齐方式 indent缩进（em为一个文字大小）docoration 划线 line-height行高 Emme...
CSS初级课程
Lized的博客
07-26 357
“程序媛计划”CSS初级课程笔记
前端HTML+CSS初级面试题汇总二
路漫漫其修远兮，吾将上下而求索。
02-13 4573
目录 什么是Css Hack？ie6,7,8的hack分别是什么？ 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？ 什么是外边距重叠？重叠的结果是什么？ rgba()和opacity的透明效果有什么不同？ css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 如何垂直居中一个浮动元素？ px和em的区别。 描述一个”reset”的CSS文件并如何使...
HTML与CSS——CSS初级
weixin_42026547的博客
01-12 89
css初级
CSS初级
Poggie的博客
09-11 101
来源pink老师，自学笔记
CSS 初级教程
Alex
07-25 319
需要具备的基础知识 在继续学习之前，你需要对下面的知识有基本的了解： HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样...
CSS初级教程(边框)【第三天】
m0_45463480的博客
12-27 2273
CSS初级教程【第三天】 【1】CSS 边框 【2】CSS 边框宽度 【3】CSS 边框颜色 【4】CSS 边框各边 【5】CSS 简写边框属性 【6】CSS 圆角边框 【7】所有 CSS 边框属性 上回学习链接 CSS初级教程【第一天】
Html和Css初级教程.txt
07-30
Html和Css初级教程，共160多集，资源33.5G大小。。。。
免费的CSS初级教程下载
03-28
### 免费的CSS初级教程知识点总结 #### CSS简介与作用 - **分离内容与表现**：CSS（层叠样式表）的主要优势在于它能够将网页的内容与表现形式分离，这意味着开发者可以在不影响网页结构的情况下单独修改其外观。...
使用css如何获取最后一行的元素？使用css解决双边框问题
最新发布
希文Gershwin
08-20 600
我只要知道最后一行中有哪几个元素，然后给最后一行的元素设置就行了但是只能获取到最后一个元素需要知道一排要有几个元素才行。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 709
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS——弹性盒（flex）
Fan_web的博客
08-16 1406
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS的:defined伪类：选择已定义元素的新选择器
2401_85743969的博客
08-17 639
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值