十一月
1
QSS之声明
盒子模型
控件可以分为: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