Atributo CSS inset-inline-start

Página anterior inset-inline-end
Próxima página isolation

定义和用法

inset-inline-start A definição e uso

Nota:A propriedade define a distância do início do elemento na direção da linha em relação ao elemento pai. Para que essa propriedade funcione, é necessário especificar position

do CSS inset-inline e inset-block As propriedades são semelhantes às propriedades do CSS top,bottom,left e right As propriedades são muito semelhantes, mas inset-block e inset-inline A propriedade depende da direção do bloco e da direção da linha.

Nota:propriedades CSS relacionadas writing-mode e direction Define a direção da linha. Isso afeta a posição inicial do elemento na direção da linha e inset-inline-start O resultado da propriedade. Para páginas em inglês, a direção da linha é da esquerda para a direita, e a direção do bloco é para baixo.

Exemplo

Exemplo 1

Defina a distância do início do elemento <div> na direção da linha em relação ao elemento pai:

div {
  inset-inline-start: 50px;
}

Experimente você mesmo

Exemplo 2

Quando o atributo writing-mode Quando o valor do atributo é vertical-rl, a direção da linha é para baixo. O resultado é que o início do elemento se move do lado esquerdo para o topo:

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 3

Quando o atributo direction Quando o valor da propriedade é rtl, a direção da linha é da direita para a esquerda. A descrição contém um erro pequeno, deve ser "O resultado é que o início do elemento ainda permanece na direita (porque para rtl, o início é a direita, apenas em relação ao layout padrão ltr, todo o conteúdo é invertido)".

div {
  inset-inline-start: 50px;
  direction: rtl;
}

Experimente você mesmo

Sintaxe do CSS

inset-inline-start: auto|length|initial|inherit;

Valor da propriedade

Valor	Descrição
auto	Valor padrão. Distância padrão de inline嵌入.
length	Especifique a distância em unidades como px, pt, cm, etc. Valores negativos são permitidos. Veja:Unidades CSS.
%	Especifique a distância em porcentagem da largura do elemento pai no eixo correspondente.
initial	Defina essa propriedade como seu valor padrão. Veja: initial.
inherit	Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão:	auto
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe do JavaScript:	object.style.insetInlineStart="30%"