尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
【前端】常用属性及实例
一、CSS 初始化*{margin:0;/* 外边距清零 */padding:0;/* 内边距清零 */scroll-behavior:smooth;/* 页面添加平滑滚动效果 */}/* em 和 i 斜体的文字不倾斜 */em, i{font-style:normal;}/* 去掉 li 的小圆点 */li{list-style:none;}/* 解决图片底侧有空白缝隙的问题 */img{vertical-align:middle;}/* 取消 a 链接下划线 */a{text-decoration:none;}快速清除元素所有默认样式,从头开始定制:.reset-component{all:unset;/* 移除所有继承和默认样式 */display:block;/* 重新定义需要的样式 */padding:12px;background:#4299e1;color:white;}二、css样式美化小作坊1. accent-color:一键美化表单元素🔰给表单元素设置 accent-color 样式,就可以改变表单元素的颜色;/* 美化复选框 */input[type="checkbox"]{accent-color:cyan;/* 品牌粉色 */}/* 美化单选按钮 */input[type="radio"]{accent-color:#2196f3;/* 品牌蓝色 */}divclass="container"inputtype="checkbox"name=""id=""inputtype="radio"name=""id=""/div2. caret-color:定制光标颜色🔰给表单元素设置 caret-color 样式,就可以改变光标颜色;.container input{background:#1a1a1a;color:#ffffff;caret-color:#F43507;}divclass="container"inputname=""id=""/div3. currentColor:颜色继承🔰自动继承元素的 color 属性值,让边框、背景等样式与文字颜色同步;.container button{color:#0066cc;/* 主色调 */border:2px solid currentColor;/* 边框继承文字颜色 */background:transparent;}/* hover时同步变色 */.containerbutton:hover{color:#f99;/* 加深主色调 *//* 边框会自动变成 #f99,无需重复定义 */}divclass="container"button颜色继承按钮/button/div4. all: unset:一键清除默认样式🔰all: unset 只需一行,就能彻底移除元素的所有默认样式(包括继承属性).custom-btn{all:unset;/* 清除默认的边框、背景、字体等 */padding:8px16px;background:#ff9800;color:white;border-radius:4px;cursor:pointer;margin:010px;}divclass="container"button默认按钮/buttonbuttonclass="custom-btn"unset 按钮/button/div🔰给表单元素设置 outline 样式,就可以去掉默认的蓝色边框;input { outline: none; }5. inset:简化定位布局🔰写绝对定位(position: absolute)或固定定位(position: fixed)时,常常要重复写 top/right/bottom/left 四行代码。inset 是这四个属性的简写,语法和 padding 类似,能大幅精简代码。/* 全屏覆盖(等价于 top:0; right:0; bottom:0; left:0) */.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);}/* 上下10px,左右20px(等价于 top:10px; right:20px; bottom:10px; left:20px) */.card{position:absolute;inset:10px20px;}6. text-wrap: balance:智能均衡文本折行🔰在响应式设计中,标题或长文本的折行常常参差不齐(比如一行只有 1-2 个字符),影响排版美感。text-wrap: balance 会自动计算文本长度,让每行的字符数尽量均衡,就像专业排版师调整的效果。/* 让标题折行更优雅 */h2{text-wrap:balance;max-width:600px;/* 配合最大宽度使用,效果更佳 */}divclass="container"h2在响应式设计中,标题或长文本的折行常常参差不齐(比如一行只有 1-2 个字符),影响排版美感。text-wrap: balance会自动计算文本长度,让每行的字符数尽量均衡,就像专业排版师调整的效果。/h2/div7. :is ():简化多选择器重复写法🔰当多个选择器需要应用相同样式时,:is()伪类能减少代码重复,让选择器更简洁。比如给header、main、footer中的p标签设置相同样式:/* 传统写法 */headerp, mainp, footerp{margin:8px0;line-height:1.6;}/* :is() 简化写法 */:is(header, main, footer) p{margin:8px0;line-height:1.6;}8. aspect-ratio:固定元素宽高比🔰给元素设置 aspect-ratio 样式,就可以通过宽高比例设置元素的尺寸;/* 16:9 视频容器 */.video-container{width:100%;aspect-ratio:16/9;background:#000;}/* 1:1 头像容器 */.avatar{width:80px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-top:10px;}img{width:100%;height:100%;object-fit:cover;}divclass="video-container"/divdivclass="avatar"im
RELATED

相关推荐

Verilog基础:$readmemb和$readmemh系统任务的使用与其中的初始化地址相关问题(详细细节)

Verilog基础:$readmemb和$readmemh系统任务的使用与其中的初始化地址相关问题(详细细节)

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 $readmemb和$readmemh两个系统任务用于将文件中的数据加载到存储器或者被称为数组的memory中。首先给出他们的语法的BNF范式,有关BNF范式的内容可以在…

📅 2026/11/6 1:12:58
Verilog基础:延迟模型

Verilog基础:延迟模型

相关阅读 Verilog基础专栏https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 目录 1、连续赋值延迟 1.1、赋值内嵌延迟 1.2、线网声明延迟 1.3、门延迟 2、过程赋值延迟 2.1、过程语句前置时序控制 2.2、过程赋值语句内嵌时序控制…

📅 2026/11/6 1:12:58
技术内容创作的安全边界与合规实践指南

技术内容创作的安全边界与合规实践指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/11/6 1:07:58
MORE NEWS

更多资讯

📰

小程序抓包抓不到明文:SSL校验分层与绕过验证

简介:该资源聚焦于支付宝小程序 SSL 验证机制的研究与调试场景,面向从事移动端抓包分析、接口调试及安全测试的开发者与进阶学习者,提供借助 Frida 动态注入与代理工具绕过证书校验、恢复小程序网络流量可见性的实践素材。压缩包共 3 个文件&…

📰

Windows Server 2012/2016 RAID驱动加载与DISM注入

简介:面向在 Windows Server 2012 R2 和 2016 64 位环境中部署、维护 530 与 930 系列 RAID 阵列卡的服务器管理员和运维人员,这份驱动集合用于解决系统无法正确识别阵列卡、RAID 功能不可用以及存储性能难以正常发挥等问题,适合物理服务器、…

📰

530/930 RAID阵列卡驱动:Windows Server装机与DISM注入排错

简介:面向在 Windows Server 2012 R2 与 2016 环境中维护 530、930 系列阵列卡的管理员和运维人员,这套驱动集合用于解决系统无法正确识别阵列卡、RAID 功能不可用及安装部署阶段的兼容性问题,也可作为服务器重装或磁盘阵列排障时的驱动备份。…

📰

Java Swing森林冰火人单人版小游戏源码:瓦片地图与AABB碰撞解析

简介:这份Java小游戏项目以森林冰火人单人版为主题,面向Java初学者、课程设计学生及游戏开发入门者,帮助读者通过一个可运行的案例理解图形界面、事件处理与基础游戏逻辑。压缩包共78个文件,约2.98MB,包含6个java源码、…

📰

CNN人脸识别全流程:MTCNN对齐、ArcFace训练与部署

简介:面向深度学习与人脸识别入门学习者的CNN实战代码包,围绕Olivetti人脸数据集,提供从模型训练到识别调用的完整可运行示例,适合已具备Python基础、希望理解卷积神经网络在人脸分类任务中落地方式的学生与开发者参考。压缩包共4…

📰

交通银行江苏省分行试水词元贷:不押厂房给两家工厂批了6200万

交通银行江苏省分行试水词元贷:不押厂房给两家工厂批了6200万 去银行申请几千万元贷款,企业通常要带上什么?房产证、土地证、厂房设备发票,或者厚厚一叠抵押担保合同。但在2026年11月初的江苏,两家实体企业走进交通银行…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬