前言:
目前小伙伴们对“解析css属性”大体比较关怀,同学们都需要了解一些“解析css属性”的相关资讯。那么小编也在网上收集了一些有关“解析css属性””的相关内容,希望兄弟们能喜欢,朋友们一起来了解一下吧!前言
要想写出优美的CSS作品,想象力固然很重要,然而基础也是不可忽略的。相信大部分人怕写CSS的原因是被它庞大的基础知识体系给吓到了,在此笔者推荐一个叫freecodecamp的网站,通过闯关的方式来学习前端三剑客,用它入门CSS是最佳的选择!
当你成功地入了门之后,便可以开始探索CSS的全貌了。本文是CSS属性的速查表,配合在线API文档使用即可
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
属性速查表
以下列出的属性知识点都是笔者用到过的
千万不要被数量吓到,其实常用的也就这些:选择-定位-布局-盒模型-字体-背景-动画-其他
选择器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
常用伪元素:
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
链接:
标签: #解析css属性