非常教程

CSS参考手册

背景和边框 | Backgrounds & Borders

定位 |

CSSposition属性用于指定一个元素在文档中的定位方式。toprightbottom和 left属性则决定了该元素的最终位置。

定位  |  <position>

位置坐标由一个或两个关键字指定,并带有可选的偏移量。每个关键字(leftrighttopbottom,或center)表示任一元件的盒子的边缘或两个边缘之间的中心线上。根据上下文,center表示左边缘和右边缘之间的中心,或者表示顶边和底边之间的中心。

如果指定,偏移量可以是相对<percentage>值或绝对值<length>。正值向右或向下偏移,以适当值为准。负值在相反的方向上偏移。

如果只指定一个关键字或偏移量,则它定义x坐标; 另一个轴的值​​被假定为center

内插值

横坐标和纵坐标都是独立插值的。由于速度由<timing-function>两者定义,点将沿直线移动。

/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
<length> or <percentage> /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction (the order is irrelevant) */
keyword value            /* The value is the offset for the edge defined by the keyword */

正式语法

[ [ left | center | right | top | bottom | <percentage> | <length> ] |
                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
                  [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
                ]

规范

Specification

Status

Comment

CSS Values and Units Module Level 3The definition of '<position>' in that specification.

Candidate Recommendation

Relists links to both definitions with the requirement to be coherent: if CSS Backgrounds and Borders Module Level 3 is supported, its definition of <position> must be used too.

CSS Backgrounds and Borders Module Level 3The definition of '<position>' in that specification.

Candidate Recommendation

Defines <position> explicitly and extends it to support offsets from any edge.

CSS Level 2 (Revision 1)The definition of '<position>' in that specification.

Recommendation

Allows combination of a keyword with a <length>, or <percentage> value.

CSS Level 1The definition of '<position>' in that specification.

Recommendation

Defines <position> anonymously as the value of background-position.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

12

1.0 (1.7 or earlier)

4.0

3.5

1.0 (85)

Combination of a keyword and a <length> or <percentage>

1.0

12

1.0 (1.7 or earlier)

4.0

3.5

1.0 (85)

Four-value syntax (support for offset from any edge)

25.0

12

13.0 (13.0)

9.0

10.5

7.0

Feature

Android

Chrome for Android

Edge mobile

Firefox Mobile (Gecko)

IE mobile

Opera Android

iOS Safari

Basic support

(Yes)

(Yes)

(Yes)

1.0 (1)

(Yes)

(Yes)

(Yes)

Combination of a keyword and a <length> or <percentage>

(Yes)

(Yes)

(Yes)

1.0 (1)

(Yes)

(Yes)

(Yes)

Four-value syntax (support for offset from any edge)

(Yes)

(Yes)

(Yes)

13.0 (13.0)

(Yes)

(Yes)

7.1

背景和边框 | Backgrounds & Borders相关

1.背景 | background
2.背景附件 | background-attachment
3.背景裁剪 | background-clip
4.背景颜色 | background-color
5.背景图片 | background-image
6.背景来源 | background-origin
7.背景图片位置 | background-position
8.背景位置-x | background-position-x
9.背景位置-y | background-position-y
10.背景重复 | background-repeat
11.背景大小 | background-size
12.边框 | border
13.底部边框 | border-bottom
14.底部边框颜色 | border-bottom-color
15.左下角的边框半径 | border-bottom-left-radius
16.右下角的边框半径 | border-bottom-right-radius
17.边框底部样式 | border-bottom-style
18.边框底部宽度 | border-bottom-width
19.边框颜色 | border-color
20.边框图片 | border-image
21.边框图像开始 | border-image-outset
22.边框图像重复 | border-image-repeat
23.边框图像使用范围 | border-image-slice
24.边框图像路径 | border-image-source
25.边框图像宽度 | border-image-width
26.左边框 | border-left
27.左边框颜色 | border-left-color
28.左边框宽度 | border-left-width
29.边框半径 | border-radius
30.右边框 | border-right
31.右边框颜色 | border-right-color
32.右边框样式 | border-right-style
33.右边框宽度 | border-right-width
34.边框样式 | border-style
35.边框属性 | border-top
36.边框属性颜色 | border-top-color
37.边框左上角半径 | border-top-left-radius
38.边框右上角半径 | border-top-right-radius
39.边框样式属性 | border-top-style
40.上边框宽度 | border-top-width
41.边框宽度 | border-width
42.盒子阴影 | box-shadow
43.背景和边框 | CSS Background and Borders
44.背景图像生成 | CSS Background and Borders: Border-image generator
45.边界半径生成 | CSS Background and Borders: Border-radius generator
46.框阴影生成 | CSS Background and Borders: Box-shadow generator
47.缩放背景图像 | CSS Background and Borders: Scaling background images
48.多个背景 | CSS Background and Borders: Using CSS multiple backgrounds
49.背景和边框 | CSS Backgrounds and Borders
CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单