盒子模型

控件可以分为：margin，border，padding和content四部分。这个模型成为盒子模型。值得注意的是，resize控制的是整个盒子模型的尺寸。

border边框设置

边框。可以设置的项目包括宽度，样式和颜色。可以在border中统一进行设置

border-width边框宽度

可以传入一个值，表示各边设置成同样的宽度，也可以传入两个值，分别为上下，和左右，还可以传入四个值，分别为上右下左。需要写上单位，例如px

border-top-width等

单独设置某一侧的边框宽度。如上面的例子

border-style边框样式。

可以传入一个值，表示各边设置成同样的样式，也可以可以传入四个值，分别是上右下左边框设置

border-top-style等

单独设置某一侧的边框样式。如上面的例子

可以设置的样式举例

• none
• dotted
• solid
• dashed
• double
• ...
  

  border-color边框颜色

  可以传入一个值，表示各边设置成同样的颜色，也可以传入两个值，分别为上下，和左右，还可以传入四个值，分别为上右下左。需要写上单位，例如px

  border-top-color等

  单独设置某一侧的边框颜色。如上面的例子

  可以设置的颜色举例

• red
• rgb(100,100,100)

• 00ff00

• 渐变颜色
  

  border-image

  用一张图片设置边框示

  border-width: 30px
  border-image: url(../source/border_image.png) 30px 30px 30px 30px stretch;

  margin外边距设置

  可以传入一个值，表示各边设置成同样的外边距，也可以可以传入四个值，分别是上右下左外边距设置

  margin-left

  左边距，类似的有左右上下的边距

  padding内边距设置

  可以传入一个值，表示各边设置成同样的内边距，也可以可以传入四个值，分别是上右下左内边距设置

  padding-left

  左边距，类似的有左右上下的边距

  background背景

  可统一设置多个值。类似border属性的统一设置

  background-color

  背景颜色

  background-image

  背景图片

  background-repeat

  背景图片是否重复

• no-repeat
• repeat-x
• repeat-y
• repeat-xy(默认)
  

  background-position

  图片放置位置

• top
• bottom
• left
• right
  

  background-origin

  参照位置

• padding（默认）
• border
• margin
• content
  

  background-clip

  裁剪策略

• padding（默认）
• border
• margin
• content
  

  background-attachment

  背景是否随着内容移动

• scroll
• fixed
  

  字体 font

• 字体家族 font-family
• 字体尺寸 font-size
• 字体样式 font-style
• 字体权重（加粗）font-weight
• 颜色 color
  

  设置最大最小尺寸

• 最小宽度 min-width
• 最小高度 min-height
• 最大宽度 max-width
• 最大高度 max-height
  

  前景图片 image

  子控件相对父控件位置

• subcontrol-origin
• subcontrol-position
• position: relative 和 position: absolute
• 位置微调 top，bottom，left，right