【前端】常用属性及实例

一、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