CSS-定位 | <position>-低调大师

CSS-定位 | <position>

2018-09-11 818

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

位置坐标由一个或两个关键字指定，并带有可选的偏移量。每个关键字（left，right，top，bottom，或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

微信关注我们

原文链接：https://yq.aliyun.com/articles/638670

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

AndroidStudio笔记（2）插件介绍

前言 Android Studio作为基于IDE的专业开发Android的开发工具，插件市场为我们提供了各种方便快捷、提高工作效率的插件，本文记录一些比较常用的插件。插件 IDEA themes 严格意义上讲，这个并不算是插件，但是的确能为我们提供愉悦的编码心情。就像这样的： ide themes 这里是地址：http://color-themes.com/ 1. 下载主题选择你喜欢的主题进行下载，下载主题后会得到一个jar文件。主题包 2. 导入主题 File –> Import Setttings –> 选中下载的主题jar文件 –> 确定->确定 –> 重启编译器 setting file GsonFormat 直接上图吧，将 JSON 字符串转换为Java实体bean GsonFormat GitHub地址 JsonToKotlinClass 与 GsonFormat 一样，对于使用 kotlin 开发的人也有类型的插件，能够直接将 JSON 字符串转换为 data class JsonToKotlinClass GitHub地址 Code...

2018-09-10

775

如果指定了background-image，那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。 /* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; 初始值 scroll 适用元素 all elements. It also applies to ::first-letter and ::first-line. 是否是继承属性 no 适用媒体 visual 计算值 as specified Animation type discrete 正规顺序 the unique non-ambiguous order defined by the formal...

2018-09-11

685

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

CSS-定位 | <position>

内插值

值

正式语法

规范