5 个你不知道的隐藏 CSS 属性

层叠样式表 (CSS) 是网页设计的骨架,它可以帮助我们轻松的设置网页的样式和格式。虽然大多数的 CSS 属性,例如颜色、字体大小和边距都被大家熟知,但还有许多鲜为人知的属性可以帮助我们设计添加功能。在这篇文章中,我们将介绍 5 个我们可能从未听说过的 CSS 属性,但它们可以更好的帮助我们开发网页项目。

1. text-decoration

text-decoration除了经典的下划线 (text-decoration: underline) 之外,我们还可以给 text-decoration 属性添加更多样式。它支持三个参数:

  • 线条的宽度 (width)
  • 线条的类型 (style) - 例如实线 (solid)、点线 (dotted) 等
  • 线条的颜色 (color)

下面的代码就可以让悬停的链接呈现绿色双线底线效果:

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
}

image.png

2. 文本下划线偏移 (text-underline-offset)

text-underline-offset 属性可以解决一个我们常见的问题:就是当文本中某些字母的下划线被字母本身的一部分遮挡时,这个属性可以让下划线相对于文本内容进行偏移。

下面代码就可以让链接悬停时下划线距离文本内容 6 像素:

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

image.png

image.png

3. 内嵌 (inset)

对于使用相对定位 (relative) 或绝对定位 (absolute) 等属性的元素,我们可以使用 inset 属性简写设置其上、右、下、左的内边距:

/* 原始写法 */
top: 5px;
right: 3px;
bottom: 1px;
left: 4px;

/* 简写形式 */
inset: 5px 3px 1px 4px;

4. 对象定位 (object-position)

我们经常使用 object-fit: cover 属性来让图像适应容器的宽高并保持清晰。但是,我们无法控制图像被裁切的具体部分。这时,我们就可以使用 object-position 属性来帮助我们指定裁切的位置。

image.png

以下代码可以让图像底部对齐容器:

.test {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}

image.png

object-position: top;

image.png

我们还可以使用 topleftright 属性来指定顶部、左侧或右侧对齐。

我们还可以使用两个参数来更精确地控制裁切位置,例如 object-position: center bottom; 将图像的中心对齐容器底部。

    • top: 将图像或视频的顶部对齐容器顶部
    • center: 将图像或视频的中心对齐容器中心
    • bottom: 将图像或视频的底部对齐容器底部
    • left: 将图像或视频的左侧对齐容器左侧
    • right: 将图像或视频的右侧对齐容器右侧
    • top left: 将图像或视频的顶部左侧对齐容器的顶部左侧
    • top center: 将图像或视频的顶部中心对齐容器的顶部中心
    • top right: 将图像或视频的顶部右侧对齐容器的顶部右侧
    • center left: 将图像或视频的中心左侧对齐容器的中心左侧
    • center center: 将图像或视频的中心对齐容器的中心中心
    • center right: 将图像或视频的中心右侧对齐容器的中心右侧
    • bottom left: 将图像或视频的底部左侧对齐容器的底部左侧
    • bottom center: 将图像或视频的底部中心对齐容器的底部中心
    • bottom right: 将图像或视频的底部右侧对齐容器的底部右侧
  • 百分比值:

    • x%: 将图像或视频的水平位置设置为容器宽度的 x%
    • y%: 将图像或视频的垂直位置设置为容器高度的 y%
  • 长度值:

    • xpx: 将图像或视频的水平位置设置为距离容器左侧 x 像素
    • ypx: 将图像或视频的垂直位置设置为距离容器顶部 y 像素
  • 计算值:

    • calc(x%): 与 x% 相同
    • calc(y%): 与 y% 相同
    • calc(xpx): 与 xpx 相同
    • calc(ypx): 与 ypx 相同
.image {
  width: 200px;
  height: 150px;
  background-image: url('image.jpg');
  object-fit: cover; /* Cover the container without cropping */
}

/* 将图像的顶部对齐容器顶部 */
.image.top {
  object-position: top;
}

/* 将图像的中心对齐容器中心 */
.image.center {
  object-position: center;
}

/* 将图像的底部对齐容器底部 */
.image.bottom {
  object-position: bottom;
}

/* 将图像的左侧对齐容器左侧 */
.image.left {
  object-position: left;
}

/* 将图像的右侧对齐容器右侧 */
.image.right {
  object-position: right;
}

/* 将图像的顶部左侧对齐容器的顶部左侧 */
.image.top-left {
  object-position: top left;
}

/* 将图像的顶部中心对齐容器的顶部中心 */
.image.top-center {
  object-position: top center;
}

/* 将图像的顶部右侧对齐容器的顶部右侧 */
.image.top-right {
  object-position: top right;
}

/* 将图像的中心左侧对齐容器的中心左侧 */
.image.center-left {
  object-position: center left;
}

/* 将图像的中心对齐容器的中心中心 */
.image.center-center {
  object-position: center center;
}

/* 将图像的中心右侧对齐容器的中心右侧 */
.image.center-right {
  object-position: center right;
}

/* 将图像的底部左侧对齐容器的底部左侧 */
.image.bottom-left {
  object-position: bottom left;
}

/* 将图像的底部中心对齐容器的底部中心 */
.image.bottom-center {
  object-position: bottom center;
}

/* 将图像的底部右侧对齐容器的底部右侧 */
.image.bottom-right {
  object-position: bottom right;
}

/* 将图像的水平位置设置为容器宽度的 25%

5.scroll-margin-top (滚动的顶边距)

image.png

默认情况下,当我们点击页面上的锚链接 (例如 <a href="#fairy-tale__inner">行程</a>) 时,浏览器会滚动到该元素的顶端。但是,如果我们想在滚动后元素顶部预留一些空隙,就可以使用 scroll-margin-top 属性。

例如,以下代码可以让链接点击后,在滚动到 “#fairy-tale__inner” 元素时,该元素距离浏览器窗口顶部预留 100 像素的空白:

#fairy-tale__inner {
  scroll-margin-top: 100px;
}

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/697260.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GD32F4XX的ISP方式下载程序时的串口选择

官方资料 详细信息可参考GD32F4xx的用户手册&#xff0c;第 1.4 章节 引导配置 。 版本是 &#xff1a;GD32F4xx_User_Manual_Rev3.0_CN 资料链接: https://www.gd32mcu.com/cn/download/6?kwGD32F4

【解读】小提琴图

ref&#xff1a;解读文献中的箱线图&#xff08;Box-plot&#xff09;和小提琴图&#xff08;Violin-plot)&#xff09;_小提琴图和箱线图的区别-CSDN博客小提琴图展示了每个变量的数据分布情况&#xff0c;通过图中的“小提琴”形状可以看出数据的密度和分布情况。 在图中&…

Layui实现下拉多选功能

1、问题概述? 提供源码下载 在项目中有很多地方需要使用到下拉框,并且实现选择多个信息,下面是展示。 支持如下功能: 1、分页 2、主题自定义 3、国际化 4、下拉方向 5、Tips修改等 6、Style自定义样式 7、取值 8、赋值 2、资源准备及测试? 2.1、资源下载

管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异

目录 一、侦听器&#xff08;watch&#xff09;是什么&#xff1f; 二、Vue2中的watch&#xff08;Options API&#xff09; 2.1、函数式写法 2.2、对象式写法 ①对象式基础写法 ②回调函数handler ③deep属性 ④immediate属性 三、Vue3中的watch 3.1、向下兼容&#xff…

Qt实现简易播放器

效果如图 源码地址&#xff1a; 简易播放器: 基于Qt的简易播放器&#xff0c;底层采用VLC源码 - Gitee.com GitHub:GitHub - a-mo-xi-wei/easy-player: 基于Qt的调用VLC的API的简易播放器

Running Gradle task ‘assembleDebug‘ Flutter项目

基于Android方面运行Flutter项目一直卡在 Launching lib\main.dart on Android SDK built for x86 in debug mode… Running Gradle task ‘assembleDebug’… 基础原因&#xff1a; 默认存放Gradle插件包的Maven仓库是国外(需VPN) 我的原因&#xff1a; 缺少JDK和缺少Androi…

tcp协议中机制的总结

目录 总结 分析 三次握手 总结 分析 其中,序列号不止用来排序,还可以用在重传时去重 确认应答是机制中的核心 因为都需要依靠应答来拿到协议字段,从而判断是否触发机制 保证可靠性的策略也可以提高效率,比如: 流量控制,可以根据多个因素来动态调整数据发送量拥塞控制也是,让…

支持YUV和RGB格式两路视频同时播放

1.头文件&#xff1a; sdlqtrgb.h #pragma once #include <QtWidgets/QWidget> #include "ui_sdlqtrgb.h" #include <thread> class SdlQtRGB : public QWidget {Q_OBJECTpublic:SdlQtRGB(QWidget* parent Q_NULLPTR);~SdlQtRGB(){is_exit_ true;//等…

现实转虚拟:Video2Game引领3D互动体验

在当今数字化时代&#xff0c;虚拟环境的创建对于游戏开发、虚拟现实应用和自动驾驶模拟器等多个领域至关重要。然而&#xff0c;传统的虚拟环境创建过程不仅复杂而且成本高昂&#xff0c;通常需要专业人员和专业软件开发工具的参与。例如&#xff0c;著名的《侠盗猎车手V》以其…

「51媒体」江苏媒体宣传报道,邀请媒体报道资源汇总

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 江苏作为中国东部的重要省份&#xff0c;拥有丰富的媒体资源&#xff0c;包括电视台、广播电台、报纸以及网络媒体。 电视台 江苏卫视&#xff1a;作为江苏省唯一的省级卫视台&#xff…

Nvidia/算能 +FPGA+AI大算力边缘计算盒子:桥梁结构安全监测

中国铁路设计集团有限公司&#xff08;简称中国铁设&#xff09;&#xff0c;原铁道第三勘察设计院集团有限公司&#xff08;铁三院&#xff09;&#xff0c;是中国国家铁路集团有限公司所属的唯一设计企业&#xff0c;成立于1953年&#xff0c;总部位于天津市&#xff0c;是以…

基于机器学习的锂电池RUL SOH预测

数据集为NASA锂电池数据集。 import datetimeimport numpy as npimport pandas as pdfrom scipy.io import loadmatfrom sklearn.preprocessing import MinMaxScalerfrom sklearn.metrics import mean_squared_errorfrom sklearn import metricsimport matplotlib.pyplot as p…

python tushare股票量化数据处理:笔记

1、安装python和tushare及相关库 matplotlib pyplot pandas pandas_datareader >>> import matplotlib.pyplot as plt >>> import pandas as pd >>> import datetime as dt >>> import pandas_datareader.data as web 失败的尝试yf…

01——生产监控平台——WPF

生产监控平台—— 一、介绍 VS2022 .net core(net6版本&#xff09; 1、文件夹&#xff1a;MVVM /静态资源&#xff08;图片、字体等&#xff09; 、用户空间、资源字典等。 2、图片资源库&#xff1a; https://www.iconfont.cn/ ; 1.资源字典Dictionary 1、…

攻防演练之-动员大会

清晨的阳光透过薄雾洒在甲方的攻防演练中心。由于国家对于重点行业的数据灾备的要求。因此每一家企业都会选择在不同的地理位置建多个数据中心&#xff0c;包括一个生产中心、一个同城灾难备份中心、一个异地灾难备份中心。通过这种方式将业务分布在不同地理位置的数据中心&…

PowerDesigner 16.5安装教程

&#x1f4d6;PowerDesigner 16.5安装教程 ✅1. 下载✅2. 安装 ✅1. 下载 官网地址&#xff1a;https://www.powerdesigner.biz/EN/powerdesigner/powerdesigner-licensing-history.php 云盘下载&#xff1a;https://www.123pan.com/s/4brbVv-aUoWA.html ✅2. 安装 1.运行P…

Linux网络诊断工具mtr命令详解

目录 一、mtr概述 二、mtr的特点 1、动态路由显示 2、数据包类型 3、显示延迟和丢包 4、过滤和日志 5、网络探测 三、基本用法 1、基本语法 2、帮助 3、常用选项 四、输出解释 1、常见mtr命令及其输出 2、输出解释 四、命令实例 1. 最基本的用法 2. 显示报告形式…

Leetcode3170. 删除星号以后字典序最小的字符串

Every day a Leetcode 题目来源&#xff1a;3170. 删除星号以后字典序最小的字符串 解法1&#xff1a;栈 由于要去掉最小的字母&#xff0c;为了让字典序尽量小&#xff0c;相比去掉前面的字母&#xff0c;去掉后面的字母更好。 从左到右遍历字符串 s&#xff0c;用 26 个栈…

Collections工具类及其案例

package exercise;public class Demo1 {public static void main(String[] args) {//可变参数//方法形参的个数是可以发生变化的//格式&#xff1a;属性类型...名字//int...argsint sum getSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);System.out.println(sum);}//底层&#xff1a;可…

嵌入式仪器模块:DMM LCR SMU 及自动化测试软件

• 6 位数字表显示 • 24 位分辨率 • 250 KSPS 采样率 • 电源和数字 I/O 均采用隔离抗噪技术 应用场景 • 电压、电流、电阻、电感、电容的高精度测量 • 二极管/三极管测试 通道1222输入阻抗电压10 MΩHigh-Z, 10 MΩHigh-Z电流10 Ω50 mΩ / 2 Ω / 2 KΩ2 KΩ / 2 M…