CSS max-block-size ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

定义和用法

max-block-size 属性指定元素在块方向上的最大尺寸。

如果内容在块方向上的尺寸小于最大值，则 max-block-size 属性值不起作用。

如果内容在块方向上的尺寸大于最大值，则会应用 max-block-size 属性值。

注意：相关的 CSS 属性 writing-mode 定义了块方向，这会影响 max-block-size 属性的结果。对于英文页面，块方向是向下，而行内方向是从左到右。

CSS max-block-size 属性与 CSS 属性 max-height ਅਤੇ max-width ਬਹੁਤ ਹੀ ਸਮਾਨ, ਪਰ max-block-size ਲੋੜ ਦੀ ਨਿਰਭਰਤਾ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਇੱਕ <div> ਇਲਾਕੇ ਦੇ ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਅਕਾਰ 60 ਪਿਕਸੈਲ ਸੈਟ ਕਰੋ:

div {
  max-block-size: 60px;
}

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

ਉਦਾਹਰਣ 2: ਲਿਖਣ ਦਾ ਮੋਡ

ਇੱਕ <div> ਇਲਾਕੇ ਦੀ writing-mode ਲੋੜ ਮੁੱਲ ਵਿੱਚ vertical-lr ਸੈਟ ਕੀਤਾ ਤਾਂ ਬਲਾਕ ਡਾਇਰੇਕਸ਼ਨ ਨੂੰ ਹੇਠਾਂ ਤੋਂ ਪਾਸੇ ਵੱਲ ਬਦਲ ਜਾਵੇਗਾ, ਇਹ ਇਸ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰੇਗਾ: max-block-size ਲੋੜ ਦਾ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

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

ਉਦਾਹਰਣ 3: Max-block-size vs Block-size

ਇੱਕ <div> ਇਲਾਕੇ (block-size 100px (ਮੁੱਕੀ ਅਕਾਰ) ਅਤੇ ਦੂਜੇ <div> ਇਲਾਕੇ (max-block-size 100px (ਮੁੱਕੀ ਅਕਾਰ) ਵਿੱਚ ਕੰਟੈਂਟ ਸਾਈਜ਼ ਬਦਲਣ ਉੱਤੇ ਵੱਖ-ਵੱਖ ਪ੍ਰਤੀਕਿਰਿਆਵਾਂ ਲਈ:

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

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

CSS ਗਰੇਫਿਕਸ

max-block-size: auto|length|initial|inherit;

ਲੋੜ ਮੁੱਲ

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਸਪਰੇਸ਼ਨ ਵਿੱਚ ਸੰਖਿਆ ਇਹ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਲੋੜ ਨੂੰ ਪੂਰਾ ਕਰਨ ਵਾਲਾ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਦਿਸਾਈ ਹੈ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਬੰਧਤ:CSS بلوک-سائز اپریٹ

ਸਬੰਧਤ:CSS min-block-size ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਬੰਧਤ:CSS max-height ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਬੰਧਤ:CSS max-width ਪ੍ਰਤੀਯੋਗਤਾ ਪ੍ਰਤੀਯੋਗਤਾ

ਸਬੰਧਤ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ