web前端：CSS的常用属性速查表

前言要想写出优美的CSS作品，想象力虽然很重要，然而基础也是不行忽略的。相信大部门人怕写CSS的原因是被它庞大的基础知识体系给吓到了，在此笔者推荐一个叫freecodecamp的网站，通过闯关的方式来学习前端三剑客，用它入门CSS是最佳的选择！当你乐成地入了门之后，便可以开始探索CSS的全貌了。本文是CSS属性的速查表，配合在线API文档使用即可我自己是一名从事了多年开发的web前端老法式员，现在告退在做自己的web前端私人定制课程，今年年头我花了一个月整理了一份最适合2019年学习的web前端学习干货，种种框架都有整理，送给每一位前端小同伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

属性速查表以下列出的属性知识点都是笔者用到过的千万不要被数量吓到，其实常用的也就这些：选择-定位-结构-盒模型-字体-配景-动画-其他选择器element元素自己，pclass类，p.classidid，p#idchild子元素，ul liattribute属性，input[type="checkbox"]sibling相邻元素，input ~ labelpseudo class伪类，button:hover常用伪类：hover：鼠标悬浮focus：自己获得焦点focus-within：自己及子元素获得焦点nth-child：第n个子元素not：非某元素target：URL的锚点表单伪类：checked：单/复选框开关on的状态disabled：被禁用的元素valid：表单校验通过时的情况invalid：表单校验不通过时的情况placeholder-shown：有占位符时的情况（也就是用户还未输入时的情况）pseudo element伪元素，button::before常用伪元素：beforeafter*全选定位positionrelative：相对定位，元素占据文档位置，可以有偏移absolute：绝对定位，元素不占位置，相对于父元素定位fixed：牢固在视窗某一位置sticky：“粘”在视窗某一位置top | left | bottom | right上下左右的偏移距离z-index层叠关系结构displayblock：块级元素inline：内联元素flex：弹性盒子结构grid：网格结构盒模型width | height宽高padding | margin内外边距overflowvisible：超出部门可见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）的变形问题svgclip-path裁剪路径，用来裁剪出种种形状letter-spacing字母间距pointer-events鼠标事件列表list-style-type列表的marker样式（通常都设为none）UIappearance元素的默认样式（通常都设为none）box-sizing盒模型类型content-box：默认，尺度盒模型border-box：IE盒模型（将border和·padding一并算作长宽）cursor光标类型，最常用的是pointer，也就是一只手outline轮廓user-select用户是否能选择文本（通常都设为none）转动行为scroll-behaviorauto：默认转动行为smooth：丝滑转动行为scroll-snap-type界说在转动容器中的一个暂时点（snap point）如何被严格的执行scroll-snap-align控制将要聚焦的当前转动子元素在转动偏向上相对于父容器的对齐方式变换transform常见的几何变换：translate：平移scale：缩放rotate：旋转skew：斜切transform-origin变换中心transform-styleflat：默认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投影作者：alphardex链接：https://juejin.im/post/5e060afd6fb9a0163b12d46d。

本文来源：泛亚电竞-www.txdtzd.com