CSS بلاک-سیز属性

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

block-size ਪ੍ਰਤੀਯੋਗਿਤਾ ਪੱਧਰ ਦੇ ਸਮਾਨਤਾ ਨੂੰ ਸੰਕੇਤ ਕਰਦੀ ਹੈ。

ਧਿਆਨ:ਸਬੰਧਤ CSS ਪ੍ਰਤੀਯੋਗਿਤਾ writing-mode ਬਲਕ ਦਿਸ਼ਾ ਨੂੰ block-size ਦੇ ਨਾਲ

CSS ਦੇ block-size ਅਤੇ inline-size ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੇ ਨਾਲ width ਅਤੇ height ਪ੍ਰਤੀਯੋਗਿਤਾ ਬਹੁਤ ਹੀ ਮਿਲਦੇ ਜੁਲਦੇ ਹਨ, ਪਰ block-size ਅਤੇ inline-size ਪ੍ਰਤੀਯੋਗਿਤਾ ਬਲਕ ਦਿਸ਼ਾ ਅਤੇ ਰੇਖੀ ਦਿਸ਼ਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

<div> ਪੱਧਰ ਦੇ ਬਲਕ ਦਿਸ਼ਾ 'ਤੇ ਮੁੱਲ ਸੈਟ ਕਰੋ:

div {
  block-size: 200px;
}

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

ਉਦਾਹਰਣ 2

ਜਦੋਂ <div> ਪੱਧਰ ਦੇ writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ ਦਾ ਮੁੱਲ vertical-rl ਹੋਵੇ ਤਾਂ ਬਲਕ ਦਿਸ਼ਾ ਹੇਠਾਂ ਤੋਂ ਖੱਬੇ ਵੱਲ ਬਦਲ ਜਾਵੇਗੀ, ਇਹ block-size ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੇ ਕੰਮ ਕਰਨ ਦੀ ਦਿਸ਼ਾ ਨੂੰ ਬਦਲ ਦੇਵੇਗਾ:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

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

CSS ਪ੍ਰਕਿਰਿਆ

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

ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੁੱਲ

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

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: auto
ਵਿਰਾਸਤੀ ਪ੍ਰਤੀਯੋਗਿਤਾ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਮਰਥਨ ਕਰੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਪ੍ਰਤੀਯੋਗਿਤਾ。
ਸੰਸਕਰਣ: CSS3
JavaScript ਪ੍ਰਕਿਰਿਆ: object.style.blockSize="100px"

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

ਸਾਰੇ ਪੱਧਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਖਿਆ ਵਿੱਚ ਸਾਰੇ ਪੱਧਰਾਂ ਦੇ ਸੰਖਿਆ ਦਰਸਾਉਂਦੇ ਹਨ。

ਚਰਮੋਗਰਾਹ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
57.0 79.0 41.0 12.1 44.0

ਸਬੰਧਤ ਪੰਨੇ

CSS ਸਿੱਖਿਆਦੋਸਤੀ:CSS ਕੋਈ ਉਚਾਈ ਅਤੇ ਚੌਦਾਈ

CSS ਸਿੱਖਿਆਦੋਸਤੀ:CSS ਫਲੈਕਸ ਮਾਡਲ

CSS ਪ੍ਰਸਤਾਵਨਾਪੱਤਰ:height ਪ੍ਰਤੀਯੋਗਿਤਾ

CSS ਪ੍ਰਸਤਾਵਨਾਪੱਤਰ:width ਪ੍ਰਤੀਯੋਗਿਤਾ

CSS ਪ੍ਰਸਤਾਵਨਾਪੱਤਰ:writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ