分享CSS的常用属性速查表？

1条回答我要回复

小满1172天前

选择器



element
元素本身，p 



 



class
类，p.class



 



id
id，p#id



 



child
子元素，ul li



 



attribute
属性，input[type="checkbox"]



 



sibling
相邻元素，input ~ label




pseudo class
伪类，button:hover

常用伪类：
hover：鼠标悬浮 focus：本身获得焦点 focus-within：本身及子元素获得焦点 nth-child：第n个子元素 not：非某元素 target：URL的锚点

表单伪类：
checked：单/复选框开关on的状态 disabled：被禁用的元素 valid：表单校验通过时的情况 invalid：表单校验不通过时的情况 placeholder-shown：有占位符时的情况（也就是用户还未输入时的情况）

pseudo element
伪元素，button::before

常用伪元素：
before after
 



*
全选



定位
position
 
relative：相对定位，元素占据文档位置，可以有偏移 absolute：绝对定位，元素不占位置，相对于父元素定位 fixed：固定在视窗某一位置 sticky：“粘”在视窗某一位置
 



top | left | bottom | right
上下左右的偏移距离






z-index
层叠关系



 
布局

display
block：块级元素 inline：内联元素 flex：弹性盒子布局 grid：网格布局

盒模型



width | height
宽高






padding | margin
内外边距



overflow
visible：超出部分可见 hidden：超出部分不可见

字体



font-weight
字体粗细






font-size
字体大小






font-family
字体种类






line-height
字体行高



 
文本



text-align
文本对齐






text-shadow
文本阴影






text-transform
文本大小写






text-decoration
文本装饰样式






-webkit-text-stroke
文本描边






color
文本颜色






opacity
颜色透明度






white-space
空格处理



 
背景



background-color
背景颜色






background-image
背景图片






background-size
背景大小






background-position
背景定位






background-repeat
背景是否重复






background-clip
背景裁剪



 
边框



border-width
边框宽度






border-style
边框样式






border-color
边框颜色






border-radius
边框圆角






box-shadow
阴影



 
滤镜



filter
作用于元素本身的滤镜



常用滤镜：
blur：高斯模糊 contrast：对比度 drop-shadow：投影 greyscale：灰度 hue-rotate：色调变换
 



backdrop-filter
作用于元素背景的滤镜



 
混合模式
mix-blend-mode
 
常用混合模式
multiply：正片叠底 screen：滤色 difference：插值

图片



object-fit
处理替换元素（如img）的变形问题



 
svg



clip-path
裁剪路径，用来裁剪出各种形状






letter-spacing
字母间距






pointer-events
鼠标事件



 
列表



list-style-type
列表的marker样式（通常都设为none）



UI



appearance
元素的默认样式（通常都设为none）






box-sizing
盒模型类型



 
content-box：默认，标准盒模型 border-box：IE盒模型（将border和·padding一并算作长宽）
 



cursor
光标类型，最常用的是pointer，也就是一只手






outline
轮廓






user-select
用户是否能选择文本（通常都设为none）



 
滚动行为
scroll-behavior
auto：默认滚动行为 smooth：丝滑滚动行为
 



scroll-snap-type
定义在滚动容器中的一个临时点（snap point）如何被严格的执行






scroll-snap-align
控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式



 
变换
transform
常见的几何变换：
translate：平移 scale：缩放 rotate：旋转 skew：斜切
 
 transform-origin
变换中心
 
transform-style
flat：默认 preserve-3d：3d场景
 perspective
透视距离

backface-visibility
物体后方是否可视

过渡和动画



transition
过渡






transition-property
过渡属性名






transition-duration
过渡时间






transition-delay
过渡延迟






transition-timing-function
过渡时间函数






animation
动画






animation-name
动画名称






animation-duration
动画时间






animation-delay
动画延迟






animation-timing-function
动画时间函数






animation-iteration-count
动画播放次数






animation-fill-mode
动画填充模式






@keyframes
关键帧



 
其他



var()
CSS自定义变量






calc()
计算值






@media
媒体查询，用于适配不同设备






-webkit-box-reflect
投影