CSS inset-block ਪ੍ਰਤੀਯੋਗਿਤਾ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

inset-block ਪ੍ਰਾਪਰਟੀ ਸੈਟਿੰਗ ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਬਲਾਕ ਡਾਇਰੈਕਸ਼ਨ ਵਿੱਚ ਮਾਤਾ ਇਲੈਕਟ੍ਰੋਨ ਨਾਲ ਦੂਰੀ ਵਿੱਚ ਰੱਖਿਆ ਗਿਆ ਹੈ।

ਗੁਣ ਬਲੌਕ ਦਿਸ਼ਾ ਅਤੇ ਲਿਨਾਈ ਦਿਸ਼ਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。要使此属性生效，必须指定 ਇਸ ਗੁਣ ਨੂੰ ਕਾਰਜਾ ਲਿਆਉਣ ਲਈ ਇਸ ਗੁਣ ਨੂੰ ਸੈਟ ਕਰਨਾ ਹੋਵੇਗਾ: position

inset-block ਗੁਣ

inset-block inset-block-start

ਗੁਣ ਦੇ ਮੁੱਲ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਸੈਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:

inset-block: 10px 50px;
  • ਜੇਕਰ inset-block ਗੁਣ ਵਿੱਚ ਦੋ ਮੁੱਲ ਹਨ:
  • ਸ਼ੁਰੂਆਤ ਦੂਰੀ 10px ਹੈ

ਸਮਾਪਤੀ ਦੂਰੀ 50px ਹੈ

ਜੇਕਰ inset-block ਗੁਣ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਹੈ:
  • inset-block: 10px;

ਸ਼ੁਰੂਆਤ ਅਤੇ ਸਮਾਪਤੀ ਦੂਰੀਆਂ 10px ਹਨ ਗੁਣ ਬਹੁਤ ਹੀ ਸਮਾਨ ਹੈ, ਲੇਕਿਨ inset-block ਅਤੇ CSS ਦੇ inset-block ਅਤੇ ਗੁਣ ਨੂੰ CSS ਦੇbottomtopbottom, left ਅਤੇ right ਗੁਣ ਬਹੁਤ ਹੀ ਸਮਾਨ ਹੈ, ਲੇਕਿਨ inset-block ਅਤੇ inset-inline

ਗੁਣ ਬਲੌਕ ਦਿਸ਼ਾ ਅਤੇ ਲਿਨਾਈ ਦਿਸ਼ਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。ਧਿਆਨ: writing-mode ਬਲੌਕ ਦਿਸ਼ਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਬਲੌਕ ਦੀ ਸ਼ੁਰੂਆਤ ਅਤੇ ਸਮਾਪਤੀ ਦੀ ਦੂਰੀ ਅਤੇ ਸਬੰਧਤ CSS ਗੁਣਾਂ 'ਤੇ ਪ੍ਰਭਾਵ ਪਾਉਂਦਾ ਹੈ inset-block ਗੁਣ ਦੇ ਨਤੀਜੇ।ਇੰਗਲਿਸ਼ ਪੰਨਿਆਂ ਵਿੱਚ ਬਲੌਕ ਦਿਸ਼ਾ ਹੇਠਾਂ ਹੁੰਦੀ ਹੈ ਅਤੇ ਲਿਨਾਈ ਦਿਸ਼ਾ ਵੱਲੋਂ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਹੁੰਦੀ ਹੈ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਪਾਸੇ ਲਗਾਏ <div> ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਬਲੌਕ ਦਿਸ਼ਾ 'ਚ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਦੂਰੀ ਨੂੰ ਸੈਟ ਕਰੋ:

div {
  inset-block: 10px 50px;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

ਜਦੋਂ <div> ਇਲੈਕਟ੍ਰੋਨ ਦੇ writing-mode ਗੁਣ ਮੁੱਲ ਵਿੱਚ vertical-rl ਦੇ ਸਮੇਂ ਇਲੈਕਟ੍ਰੋਨ ਦੀ ਸ਼ੁਰੂਆਤ ਉੱਚੇ ਤੋਂ ਦਾਇਰੇ ਵੱਲ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਇਲੈਕਟ੍ਰੋਨ ਦੀ ਸਮਾਪਤੀ ਹੇਠਲੇ ਤੋਂ ਸਾਹਮਣੇ ਵੱਲ ਹੋ ਜਾਂਦੀ ਹੈ:

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

inset-block: auto|length|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲ ਮੁੱਲ।ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਮੂਲ inset-block ਮੁੱਲ
length px, pt, cm ਆਦਿ ਇਕਾਈਆਂ ਨਾਲ ਦੂਰੀ ਨੂੰ ਸੈਟ ਕਰੋ।ਨੇਕ ਮੁੱਲਾਂ ਦੀ ਆਗਿਆ ਹੈ।ਦੇਖੋ:سی ایس ایل یونٹ。
% ਪਿਤਾ ਤੱਤ ਨਾਲ ਸਬੰਧਤ ਅਕਸਰ ਦੂਰੀ ਨੂੰ ਪ੍ਰਤੀਸ਼ਤ ਦੌਰਾਨ ਨਾਲ ਸੈਟ ਕਰੋ।
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤ ਕਰੋ।ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: auto
ਵਿਰਾਸਤੀ ਵਿਸ਼ੇਸ਼ਤਾ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰਥਨ ਕਰਦੇ ਹਨ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ。
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ: object.style.insetBlock="100px 50px"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਤਰੰਜਾਂ ਵਿੱਚ ਦਿਸਦੇ ਨੰਬਰ ਇਸ ਗੁਣ ਦਾ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲਾ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੰਬਰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਾਮਸ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
87.0 87.0 63.0 14.1 73.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ:CSS ਸਥਾਨਿਕਤਾ

ਸਲਾਹਦਾਤ:CSS position ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਤ:CSS inset-block-end ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਤ:CSS inset-block-start ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਤ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ