CSS bottom کی ویژگی
- ਪਿਛਲਾ ਪੰਨਾ border-width
- ਅਗਲਾ ਪੰਨਾ box-decoration-break
定义和用法
bottom ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਵਰਣਨਾ ਹੈ ਕਿ ਪੈਮਾਨੇ ਦਾ ਨਿਚਲਾ ਬਾਹਰੀ ਮੋਰਚਾ ਉਸ ਦੇ ਪੂਰਵਾਂਤਰ ਪਦ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਤੋਂ ਕਿਵੇਂ ਦੂਰ ਹੈ।
ਟਿੱਪਣੀ:ਜੇਕਰ "position" ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਮੁੱਲ "static" ਹੈ ਤਾਂ "bottom" ਪ੍ਰਤੀਯੋਗੀ ਦਾ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਪੈਦਾ ਹੋਵੇਗਾ。
ਵਰਣਨ
static ਸਥਾਨਾਂ ਲਈ auto; ਲੰਬਾਈ ਮੁੱਲਾਂ ਲਈ ਸਬੰਧਤ ਸਥਾਨਕ ਲੰਬਾਈ; ਪ੍ਰਤੀਸ਼ਤੀ ਮੁੱਲਾਂ ਲਈ ਨਿਰਧਾਰਿਤ ਮੁੱਲ; ਹੋਰ ਤਰੀਕੇ ਵਿੱਚ auto ਹੋਵੇਗਾ。
ਸਥਾਨਕ ਸਥਾਨਾਂ ਲਈ ਜੇਕਰ bottom ਅਤੇ top ਦੋਵੇਂ auto ਹਨ ਤਾਂ ਉਹਨਾਂ ਦੇ ਮੁੱਲ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਹੋਣਗੇ; ਜੇਕਰ ਕੋਈ ਵੀ auto ਹੈ ਤਾਂ ਉਸ ਦੇ ਮੁੱਲ ਦਾ ਵਿਪਰੀਤ ਲਏ ਜਾਣਗੇ; ਜੇਕਰ ਦੋਵੇਂ ਵੀ auto ਨਹੀਂ ਹਨ ਤਾਂ bottom ਦਾ ਮੁੱਲ top ਦੇ ਮੁੱਲ ਦਾ ਵਿਪਰੀਤ ਹੋਵੇਗਾ。
ਹੋਰ ਦੇਖੋ:
CSS ਸਿੱਖਿਆCSS ਸਥਾਨਿਕਤਾ
HTML DOM ਸੂਚਕਾਂਕbottom ਪ੍ਰਤੀਯੋਗੀ
ਉਦਾਹਰਣ
ਚਿੱਤਰ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਨੂੰ ਉਸ ਦੇ ਅੰਦਰੂਨੀ ਪਦ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਦੇ 5 ਪਿਕਸਲ ਉੱਪਰ ਸੈਟ ਕਰੋ:
img { position:absolute; bottom:5px; }
CSS ਗਰੁੱਪਰਸ਼ਨ
bottom: auto|length|initial|inherit;
ਅਤਿਰਿਕਤ ਮੁੱਲ
ਮੁੱਲ | ਵਰਣਨ |
---|---|
auto | ਮੂਲ ਮੁੱਲ। ਬਰਾਉਜ਼ਰ ਦੁਆਰਾ ਹੇਠਲੇ ਸਥਾਨ ਦੀ ਮਾਤਰਾ ਹੱਲ ਕੀਤੀ ਜਾਵੇਗੀ。 |
% | ਪਦਾਂ ਦੀ ਮਾਤਰਾ ਨੂੰ ਸੈਟ ਕਰਨਾ ਜਿਸ ਨੂੰ ਅੰਦਰੂਨੀ ਪਦ ਦੇ ਪ੍ਰਤੀਸ਼ਤੀ ਵਿੱਚ ਦੇਖਿਆ ਜਾਵੇਗਾ। ਨੇਗਾਟਿਵ ਮੁੱਲ ਵਰਤ ਸਕਦੇ ਹਨ。 |
length | px, cm ਆਦਿ ਅਕਾਰਾਂ ਦੀ ਮਾਤਰਾ ਨਾਲ ਅਣਗਿਣਤ ਪਦਾਂ ਦੀ ਮਾਤਰਾ ਨੂੰ ਸੈਟ ਕਰਨਾ। ਨੇਗਾਟਿਵ ਮੁੱਲ ਵਰਤ ਸਕਦੇ ਹਨ。 |
inherit | ਪਿਛਲੇ ਤੋਂ ਵਧਾਉਣ ਲਈ bottom ਅਤੇ ਸਿਰਫ਼ bottom ਪ੍ਰਤੀਯੋਗੀ ਸ਼ਬਦਾਂ ਦੀ ਮਹੱਤਵਪੂਰਣ ਵਿਵਰਣ ਦਿੱਤੀ ਗਈ ਹੈ。 |
ਤਕਨੀਕੀ ਵੇਰਵਾ
ਮੂਲ ਮੁੱਲ | auto |
---|---|
ਵਿਰਾਸਤ | no |
ਸੰਸਕਰਣ | CSS2 |
JavaScript ਗਰੁੱਪਰਸ਼ਨ | object.style.bottom="50px" |
ਹੋਰ ਉਦਾਹਰਣ
- ਪਿਕਸਲ ਦੀ ਮਾਤਰਾ ਨਾਲ ਚਿੱਤਰ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਨੂੰ ਸੈਟ ਕਰਨਾ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦੇਖੋ ਕਿ ਕਿਵੇਂ ਪਿਕਸਲ ਦੀ ਮਾਤਰਾ ਨਾਲ ਚਿੱਤਰ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
- ਪ੍ਰਤੀਸ਼ਤੀ ਦੀ ਮਾਤਰਾ ਨਾਲ ਚਿੱਤਰ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਨੂੰ ਸੈਟ ਕਰਨਾ
- ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦੇਖੋ ਕਿ ਕਿਵੇਂ ਪ੍ਰਤੀਸ਼ਤੀ ਦੀ ਮਾਤਰਾ ਨਾਲ ਚਿੱਤਰ ਦੇ ਨਿਚਲੇ ਬਾਹਰੀ ਮੋਰਚੇ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਦੀ ਸਮਰੱਥਾ ਦਾ ਪਹਿਲਾ ਬ੍ਰਾਉਜ਼ਰ ਆਪਣੇ ਵੱਲੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਬਣਾਉਣ ਦੀ ਸੂਚਨਾ ਟੇਬਲ ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਹੈ。
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- ਪਿਛਲਾ ਪੰਨਾ border-width
- ਅਗਲਾ ਪੰਨਾ box-decoration-break