inset-block-end

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

inset-block-end CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the top , right , bottom ，或 left property depending on the values defined for writing-mode , direction ，和 text-orientation .

/* <length> values */
inset-block-end: 3px;
inset-block-end: 2.4em;
/* <percentage>s of the width or height of the containing block */
inset-block-end: 10%;
/* Keyword value */
inset-block-end: auto;
/* Global values */
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: unset;

句法

值

inset-block-end property takes the same values as the left 特性。

形式定义

初始值	`auto`
适用于	positioned elements
继承	no
百分比	logical-height of containing block
计算值	same as box offsets: `top` , `right` , `bottom` , `left` properties except that directions are logical
动画类型	a length , percentage or calc();

形式句法

<'top'>

范例

Setting block end offset

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}
.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}

结果

规范

规范	状态	注释
CSS Logical Properties and Values Level 1 The definition of 'inset-block-end' in that specification.	编者草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`inset-block-end`	Chrome 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 79 Disabled 完整支持 79 Disabled Disabled From version 79: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Firefox 完整支持 63 完整支持 63 不支持 41 — 63 Alternate Name Alternate Name Uses the non-standard name: `offset-block-end` 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 56 Disabled 完整支持 56 Disabled Disabled From version 56: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 完整支持 69 Disabled 完整支持 69 Disabled Disabled From version 69: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ). To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 63 完整支持 63 不支持 41 — 63 Alternate Name Alternate Name Uses the non-standard name: `offset-block-end` 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 48 Disabled 完整支持 48 Disabled Disabled From version 48: this feature is behind the `enable-experimental-web-platform-features` preference (needs to be set to `enabled` ).	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
用户必须明确启用此特征。
使用非标名称。

另请参阅

The properties which defines other insets: inset-block-start , inset-inline-start ，和 inset-inline-end
The mapped physical properties: top , right , bottom ，和 left
writing-mode , direction , text-orientation

元数据

最后修改： Oct 8, 2020

在此页

句法

值