值得注意的CSS属性

文本TEXT

---

• letter-spacing 字符间距
• word-spacing 字间距
• line-height 行高
• text-decoration 修饰（下划线）
• text-indent 首行缩进
• text-shadow 文字阴影
• vertical-align 元素垂直对齐
• overflow-wrap 容器内文字溢出容易还是/换行

---

定位POSITION

• position 定位
• z-index 层叠
• top/right/left/bottom 配合position使用

---

布局LayOut

• visibility 是否可见（不可见也保留空间）
• overflow 对溢出内容的处理

---

尺寸Dimension

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

---

边框border

• border-radius 边角半径长度
• border-shadow 边框阴影

---

背景background

• background-attachment 背景图像是否随着页面滚动（是否fixed）
• background-position 指定背景图像填充的位置
• background-clip 从什么区域开始向外剪裁图像
• background-size 背景图像的大小

---

颜色color

• opacity 不透明度

---

字体font

• font-style 字体样式（斜体等）
• font-weigth 字重（粗细）
• font-size 字大小
• font-family 字体库

---

列表list

• list-style-image 标记的图像
• list-style-position 标记的位置
• list-style-type 标记样式

---

表格table

• table-layout 表格布局（根据内容拉伸或固定不变）
• border-collapse 表格的行和单元格的边是合并还是独立
• border-spacing 表格之间的间距（若表格边是合并的则无效）
• empty-cells 空单元格是否显示

---

内容content

• content 内容用来和:after及:before伪元素一起使用，在对象前或后显示内容。

---

使用用户自定义标识名作为组件取值。

• 自定义标识区分大小写，例如test与TEST是2个不同的值
• 自定义标识不能使用与CSS属性及属性值相同的名字
• 正常工作的例子：

  示例代码：

  li {
      counter-increment: testname;
  }
  li {
      counter-reset: testname2;
  }
  

---

 用户界面userinterface

• text-overflow 当内联内容溢出容器时，将溢出部分裁切掉
• outline-width/color/style/offset 不占据中间的轮廓
• cursor 不仅有样式选择，还有位置
• zoom 对象实际尺寸的缩放
• box-sizing 定义盒模型的宽高是针对content还是border
• pointer-events 设置属性是否可以触发事件

---

 变化transform

• transform 设置或检索对象的转换,可选项很多
• transform-origin 设置对象以某个原点进行转换
• transform-style 设置对象是2D还是3D
• perspective 指定观察者距离z=0界面的距离，为元素及其内容应用透视变换
• perspective-origin 指定透视点位置
• backface-visibility 指定元素背面可见，允许显示正面的镜像

---

过渡Transition

• transition-property 需要过渡的属性
• transition-duration 过渡持续时间
• transition-timing-function 事件函数
• transition-delay 过渡延时

---

动画Animation

• animation 

  <' animation-name '>：

  检索或设置对象所应用的动画名称

  <' animation-duration '>：

  检索或设置对象动画的持续时间

  <' animation-timing-function '>：

  检索或设置对象动画的过渡类型

  <' animation-delay '>：

  检索或设置对象动画延迟的时间

  <' animation-iteration-count '>：

  检索或设置对象动画的循环次数

  <' animation-direction '>：

  检索或设置对象动画在循环中是否反向运动

  <' animation-fill-mode '>：

  检索或设置对象动画时间之外的状态

  <' animation-play-state '>：

  检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

---

以上就是CSS包括CSS3基本的重点属性了，但是多列和伸缩盒本人没有用到所以暂时没有列出来！