css3布局编写心得

设计新的组件时，先定好容器，以及确定自己想用的布局方式（传统布局盒模型、inline-block布局、flex布局），交叉着用会导致一些出人意料的问题，也不利于复用。

以传统布局为例，书写顺序,建议遵循 Positioning(定位) -> Box model（盒模型） -> typographic （排版）->visual（视觉） ->other

 /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;

显示属性

• Position
• Top
• Right
• Bottom
• Left
• Display
• List-style
• Float
• Clear
• Z-index

自身属性

• Width
• Height
• Overflow
• Margin
• Padding
• Border
• Border-radius(圆角)
• Outline
• Border-collapse
• Border-spacing
• Background
• Opacity

文本属性

• Color
• Font
• Font-style
• Font-variant
• Font-weight
• Font-size/line-height
• Font-Family
• Text-transform
• Text-overflow
• Vertical-align
• Text-align
• Layout-flow
• Writing-mode
• Direction
• Unicode
• Word-break
• Line-break
• Word-wrap

其它属性

• Content
• Cursor
• Behavior
• Filter
• Zoom