css3关键字

场景/属性 说明 效果/行为
子绝父相 + 子元素width:100% 子元素position: absolute,父元素position: relative,子元素设置width: 100% 宽度以父元素(最近的非static定位祖先,即包含块)为基准,与是否脱离标准流无关,等于父元素内容区域宽度(受box-sizing影响)。
inset属性 top/right/bottom/left的简写属性,支持1-4个值(同margin/padding语法) 简化定位代码,如inset: 0等价于top:0; right:0; bottom:0; left:0,可快速让子元素充满父元素;inset: 10px 20px对应上下10px、左右20px偏移。
子元素absolute + inset:100% 子元素position: absolute,且inset: 100%(等价于top/right/bottom/left: 100% 子元素偏移至包含块外部(顶部在包含块底部,左侧在包含块右侧),宽高为负(-包含块宽/高),反向延伸至与包含块等大,通常完全隐藏在可视区域外。
inherit关键字 强制元素继承父元素对应属性的值(无论属性是否默认可继承) border-color: inherit可让边框颜色继承父元素样式,减少重复设置。
initial关键字 将属性重置为CSS规范定义的初始值(非浏览器默认样式) border: initial可移除按钮默认边框(初始值为none)。
unset关键字 对可继承属性等价于inherit,对非继承属性等价于initial 快速“清除”自定义样式,如color: unset让文字颜色继承父元素,border: unset重置为初始值。
revert关键字 将属性还原为浏览器默认样式(区别于initial的CSS标准初始值) input { padding: revert }可让输入框内边距回到浏览器原生样式。
currentColor 引用元素自身的color值,可用于其他属性(如border、box-shadow) 实现颜色联动,如border: 1px solid currentColor让边框颜色与文字颜色一致,简化主题色维护。
posted @ 2025-10-27 10:53  jialiangzai  阅读(5)  评论(0)    收藏  举报