CSS box-sizing ਪ੍ਰਤੀਯੋਗਿਤਾ

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

box-sizing ਵਿਸ਼ੇਸ਼ਤਾ ਤੁਹਾਨੂੰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਖੇਤਰ ਦੇ ਵਿਸ਼ੇਸ਼ ਇਕਾਈ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਤਰ੍ਹਾਂ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ。

ਉਦਾਹਰਣ ਵਜੋਂ, ਜੇਕਰ ਤੁਸੀਂ ਦੋ ਪਾਰੇ ਵਾਲੇ ਬਕਸ ਨੂੰ ਪਾਰੇ ਵਾਲੇ ਸਥਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ box-sizing ਨੂੰ "border-box" ਸੈੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।ਇਹ ਬਰਾਉਜ਼ਰ ਨੂੰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਾਲੇ ਬਕਸ ਦਿਖਾਉਂਦਾ ਹੈ ਅਤੇ ਬਾਰਡਰ ਅਤੇ ਇਨਰ-ਸਪੇਸਿੰਗ ਨੂੰ ਬਕਸ ਵਿੱਚ ਲਿਆਉਂਦਾ ਹੈ。

ਹੋਰ ਦੇਖੋ:

CSS3 ਸਿਖਲਾਈ:CSS3 ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ

HTML DOM ਸੂਚੀਬੱਧ:boxSizing ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਦੋ ਪਾਰੇ ਵਾਲੇ ਬਕਸ ਨੂੰ ਸਥਾਪਤ ਕਰਦਾ ਹੈ:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

ਖੁਦ ਸਿਖਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ ਉਦਾਹਰਣ ਹਨ。

CSS ਵਿਗਿਆਨਕ

box-sizing: content-box|border-box|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਕੀਮਤ

ਕੀਮਤ ਵਰਣਨ
content-box

ਇਹ ਕ੍ਰਮਵਾਰ ਸੀਐੱਸਐੱਸ2.1 ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿਵਹਾਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਨਾਲ ਇਕਾਈ ਦੇ ਕੰਟੈਂਟ ਬਕਸ ਤੇ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ。

ਬਾਰਡਰ ਅਤੇ ਇਨਰ-ਸਪੇਸਿੰਗ ਨੂੰ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਤੋਂ ਬਾਹਰ ਚਿੱਤਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
border-box

ਇਕਾਈ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਇਕਾਈ ਦੇ ਬਾਰਡਰ ਬਕਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀਆਂ ਹਨ。

ਅਰਥਾਤ, ਜਿਸ ਤਰ੍ਹਾਂ ਨਾਲ ਇਕਾਈ ਲਈ ਕੋਈ ਅੰਦਰੂਨੀ ਸਪੇਸਿੰਗ ਜਾਂ ਬਾਰਡਰ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਉਹ ਪਹਿਲਾਂ ਨਾਲ ਸੈੱਟ ਕੀਤੀ ਗਈ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿੱਚ ਆਉਂਦੇ ਹਨ。

ਇਸ ਪ੍ਰਕਾਰ, ਵੈਸਟਿੰਗ ਅਤੇ ਇਨਰ-ਸਪੇਸਿੰਗ ਨੂੰ ਸਿਰਫ ਕੰਟੈਂਟ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਤੋਂ ਘਟਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਹੀ ਕੰਟੈਂਟ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਮਿਲਦੀ ਹੈ。
inherit ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ box-sizing ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਕੀਮਤ ਪੁਰਾ ਪੁਰਾ ਪਿਤਾ ਵਿਸ਼ੇਸ਼ਤਾ ਤੋਂ ਲਈ ਲੈਣੀ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਤਵੀ ਕੀਮਤ: content-box
ਵਿਰਾਸਤੀ: no
ਸੰਸਕਰਣ: CSS3
JavaScript ਵਿਗਿਆਨਕ: object.style.boxSizing="border-box"

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

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

ਜੋ ਨੰਬਰ ਕਿ -webkit- ਜਾਂ -moz- ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ, ਉਹ ਪ੍ਰਾਪਤ ਪ੍ਰਾਪਤੀ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਦੇ ਪ੍ਰਿਫਿਕਸ ਦਿਸਦੇ ਹਨ。

ਚਰੋਮੇ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5