CSS 常用属性概览

建议学习时长： 10分钟
学习方式：了解

学习目标

• 大概了解下，CSS 有哪些常用属性。

详细介绍

CSS 的属性非常之多，我们只需了解有哪些即可。很多属性，不知怎么用，查文档好了。

CSS 属性的参考文档

• CSS参考手册
• CSS 属性 按字母排序
• -webkit- CSS
• CSS的未来：一些试验性CSS属性

教程

要学的包括

• 文本与字体
• 背景
• 边框
• 颜色

下面是常见属性的罗列。

布局

• position,z-index
• top, bottom, right, left
• float, clear
• flex-direction, flex-wrap, justify-content ...
• text-align
• vertic­al-­align

尺寸

• width, min-width, max-width
• height, min-height, max-height

盒模型

• box-sizing
• margin, margin-left, margin-right, margin-top, margin-bottom
• padding, padding-left, padding-right, padding-top, padding-bottom

显示

• display
• visibility
• opacity
• overflow

字体

• font, font-f­amily, font-size, font-w­eight, font-style, color
• @font-face

文本

• text-indent
• text-d­eco­ration, text-s­hadow
• text-overflow
• line-height
• word-s­pacing, letter­-sp­acing
• white-­space

背景

• background
• background-image, background-color
• background-position
• background-repeat
• background-size

边框相关

• border, border-width, boder-style, border-width, border-color
• outline

表格

• border­-sp­acing, border­-co­llapse, empty-­cells

列表

• list-style, list-s­tyl­e-type, list-s­tyl­e-image, list-s­tyl­e-p­osition

变形

• transform, transform-origin
• scale, scale3d, rotate, translate, perspective, matrix ...

渐变

• transition, transition-property, transition-duration, transition-delay, transition-timing-function

动画

• animation, animation-name, animation-duration, animation-play-state ...
• @keyframes

伪元素

• content

其他

• border-radius
• cursor
• filter
• will-change
• -webkit-overflow-scrolling :设置为 touch 滚动会带惯性