• 容易忘记的css样式

    详细的css教程推荐查看 MDN

    1. 文字单行显示，超出用省略号显示

    在这里插入图片描述

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

    2. 文字多行显示，超出用省略号显示

    在这里插入图片描述

    word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 这里是超出几行省略 */
overflow: hidden;

    仅在webkit内核浏览器生效（谷歌浏览器）

    3. 设置滚动条样式

    ::-webkit-scrollbar 滚动条整体部分
    ::-webkit-scrollbar-button 滚动条两端的按钮
    ::-webkit-scrollbar-track 外层轨道
    ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
    ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那个
    ::-webkit-scrollbar-corner 边角
    ::-webkit-resizer 定义右下角拖动块的样式
    详细：
    :horizontal水平方向的滚动条
    :vertical垂直 方向的滚动条
    :decrement应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
    :incrementdecrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
    :start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
    :end类似于start伪类，标识对象是否放到滑块的后面。
    :double-button该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
    :single-button类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

    例如：
    在这里插入图片描述

    .box {
        width: 200px;
        height: 200px;
        background-color: #ccc;
        overflow-y: auto;  
      }
.box::-webkit-scrollbar-thumb {
        background-color: bisque;
        border-radius: 5px;
      } 
.box::-webkit-scrollbar {
	   background-color: blueviolet;
	   width: 10px;
	   border-radius: 5px;
  	}

    仅在webkit内核浏览器生效（谷歌浏览器）

    4. 字体样式(镂空、渐变、背景)

    • 文字镂空
      在这里插入图片描述
    .box {
        font-size: 120px;
        color: white;
        -webkit-text-stroke: 6px red;
      }
    • 文字渐变色
      在这里插入图片描述
    .box {
        /* 转变为行内块元素 文字渐变才会生效 */
        display: inline-block;
        font-size: 50px;
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
      }
    • 文字背景图
      在这里插入图片描述
     .box {
        font-size: 100px;
        color: transparent;
        background-image: url("https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_45fa33e6a9717c6d418ccae4b8eff9b4/0");
        -webkit-background-clip: text;
        background-position:center;
      }

    5. 清除浮动

    使用 Clearfix 清除浮动，解决父类高度崩塌。

    .clearfix {
	zoom: 1;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

    6. 引入字体

    在这里插入图片描述

    <style>
      @font-face {
        font-family: 'font-cicada';
        src: url('./abc.ttf');
      }
      .box {
        font-family: 'font-cicada';
        font-size: 30px;
      }
 style>
 <body>
    <div class="box">你好吗？div>
 body>

    7. 拖动右下角改变一个div元素尺寸大小

    在这里插入图片描述

     .box {
        resize: both;
        overflow: auto;
        border: 2px solid #000;
      }

    8. 网格布局

    要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid

    grid-template-columns 属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。
    grid-template-rows 属性设置每一行的高度。网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
    grid-column-gap ，grid-row-gap ， grid-gap 可以使用这些属性来调整间隙大小。
    justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
    align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
    grid-column 属性定义了网格元素列的开始和结束位置。
    grid-row 属性定义了网格元素行的开始和结束位置。
    在这里插入图片描述

    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: #000;
        border: 1px solid #000;
        
		/* 网格布局 */
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 1px;     
      }
      .item {
        background-color: #fff;
      }
    style>

  <body>
    <div class="box">
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
      <div class="item">div>
    div>
  body>

    详细教程 菜鸟教程、MDN

    9. 其他

    • user-select: none; 禁止用户选中文本
    • outline: none; 去除当点击Input元素时显示的边框
    • opacity: 0.5; 给背景颜色添加透明度,取值范围是0~1
    • cursor: pointer; 改变鼠标指针样式
    cursor:hand;手型
cursor:pointer;手型
cursor:auto;由系统自动给出
cursor:crosshair;十字型 
cursor:text;I字形
cursor:wait;等待
cursor:default;默认
cursor:e-resize;向右的箭头
cursor:ne-resize;向右上箭头
cursor:n-resize;向上箭头
cursor:nw-resize;向左上箭头
cursor:w-resize;向左箭头
cursor:sw-resize;向坐下箭头
cursor:s-resize;向右下箭头
  • 相关阅读:
    Linux系统运维脚本：批量创建linux用户和密码（读取文件中的账号和密码来批量创建用户）
    SpringMVC的方法形参注解(Restful风格)
    【毕业设计】15-基于单片机的交通灯系统设计（原理图+仿真+论文）
    正则表达式
    Matlab编程中函数的重命名方法
    用户运营体系中，用户精细化运营闭环是怎样的
    2023如何做谷歌收录？
    Sante DICOM Viewer CD/DVD患者读取器
    i.MX6ULL驱动开发 | 26 - Linux内核的RTC驱动
    读写/dev/kmsg设备编程实例
  • 原文地址：https://blog.csdn.net/qq_53489791/article/details/127092384