容易忘记的css样式

最新推荐文章于 2024-06-26 17:55:33 发布

借我一秋风

最新推荐文章于 2024-06-26 17:55:33 发布

阅读量517

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_53489791/article/details/127092384

版权

详细的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;向右下箭头