Box 属性
属性 | 描述 | CSS |
---|---|---|
overflow-x | 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 | 3 |
overflow-y | 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 | 3 |
overflow-style | 规定溢出元素的首选滚动方法。 | 3 |
rotation | 围绕由 rotation-point 属性定义的点对元素进行旋转。 | 3 |
rotation-point | 定义距离上左边框边缘的偏移点。 | 3 |
overflow-x / overflow-y 属性无法在 IE8 以及更早的浏览器正确地工作。
值 | 描述 | 测试 |
---|---|---|
visible | 不裁剪内容,可能会显示在内容框之外。 | 测试 |
hidden | 裁剪内容 - 不提供滚动机制。 | 测试 |
scroll | 裁剪内容 - 提供滚动机制。 | 测试 |
auto | 如果溢出框,则应该提供滚动机制。 | 测试 |
no-display | 如果内容不适合内容框,则删除整个框。 | 测试 |
no-content | 如果内容不适合内容框,则隐藏整个内容。 | 测试 |
CSS 尺寸属性(Dimension)
属性 | 描述 | CSS |
---|---|---|
height | 设置元素高度。 元素内容区的高度 | 1 |
max-height | 设置元素的最大高度。 元素内容区的宽度 | 2 |
max-width | 设置元素的最大宽度。 | 2 |
min-height | 设置元素的最小高度。 | 2 |
min-width | 设置元素的最小宽度。 | 2 |
width | 设置元素的宽度。 | 1 |
img.big
{
height: 50%
}
JavaScript 语法: | object.style.height="50px" |
---|
p { height:100px; width:100px; }
JavaScript 语法: | object.style.width="50px" |
---|
max-height / max-width / min-height / min-width 属性不包括外边距、边框和内边距。
JavaScript 语法: | object.style.maxHeight="50px" |
---|
JavaScript 语法: | object.style.minWidth="50%" |
---|
CSS 字体属性(Font)
属性 | 描述 | CSS |
---|---|---|
font | 在一个声明中设置所有字体属性。 | 1 |
font-family | 规定文本的字体系列。 | 1 |
font-size | 规定文本的字体尺寸。 | 1 |
font-size-adjust | 为元素规定 aspect 值。 | 2 |
font-stretch | 收缩或拉伸当前的字体系列。 | 2 |
font-style | 规定文本的字体样式。 | 1 |
font-variant | 规定是否以小型大写字母的字体显示文本。 | 1 |
font-weight | 规定字体的粗细。 | 1 |
1.font 用于一次设置元素字体的两个或更多方面, 至少要指定字体大小和字体系列。未设置的属性会使用其默认值。
可以按顺序设置如下属性: font-style font-variant font-weight font-size/line-height font-family
p.ex2
{
font:italic bold 12px/30px arial,sans-serif;
}
JavaScript 语法: | object.style.font="italic small-caps bold 12px arial,sans-serif" |
---|
2.font-family 规定元素的字体系列, font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:
- 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
- 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
p.serif{font-family:"Times New Roman",Georgia,Serif}
JavaScript 语法: | object.style.fontFamily="arial,sans-serif" |
---|
3.font-size该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
值 | 描述 |
---|---|
| 把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。 默认值:medium。 |
smaller | 把 font-size 设置为比父元素更小的尺寸。 |
larger | 把 font-size 设置为比父元素更大的尺寸。 |
length | 把 font-size 设置为一个固定的值。 |
% | 把 font-size 设置为基于父元素的一个百分比值。 |
inherit | 规定应该从父元素继承字体尺寸。 |
h2 {font-size: 200%}
JavaScript 语法: | object.style.fontSize="larger" |
---|
4.font-style 属性定义字体的风格。该属性设置使用斜体、倾斜或正常字体。
值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
p.italic {font-style:italic;}
JavaScript 语法: | object.style.fontStyle="italic" |
---|
5.font-weight 属性设置文本的粗细。
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
p.thick {font-weight: bold}
JavaScript 语法: | object.style.fontWeight="900" |
---|
CSS 列表属性(List)
属性 | 描述 | CSS |
---|---|---|
list-style | 在一个声明中设置所有的列表属性。 | 1 |
list-style-image | 将图象设置为列表项标记。 | 1 |
list-style-position | 设置列表项标记的放置位置。 | 1 |
list-style-type | 设置列表项标记的类型。 | 1 |
marker-offset | 2 |
1.list-style 简写属性在一个声明中设置所有的列表属性 可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值
可以按顺序设置如下属性:list-style-type list-style-position list-style-image
ul
{
list-style: square inside url('/i/eg_arrow.gif')
}
JavaScript 语法: | object.style.listStyle="decimal inside" |
---|
2.list-style-type 属性设置列表项标记的类型
值 | 描述 |
---|---|
none | 无标记。 |
disc | 默认。标记是实心圆。 |
circle | 标记是空心圆。 |
square | 标记是实心方块。 |
decimal | 标记是数字。 |
decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
ol.decimal {list-style-type: decimal}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
JavaScript 语法: | object.style.listStyleType="square" |
---|
3.list-style-position 属性设置在何处放置列表项标记。
值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
JavaScript 语法: | object.style.listStylePosition="inside" |
---|
4.list-style-image 属性使用图像来替换列表项的标记。
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
JavaScript 语法: | object.style.listStyleImage="url('/images/blueball.gif')" |
---|
(以上内容摘自http://www.w3school.com.cn)