पाठ 30 / 30
स्टिकी फुटर और कार्ड लेआउट
Sticky footer और responsive card layout बनाएँ, जो लगभग हर project में उपयोग होने वाले दो patterns हैं।
स्टिकी फुटर
पेज कंटेंट छोटा होने पर भी फुटर सबसे नीचे रहता है — main पर flex: 1 उसे नीचे धकेलता है।
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}एक कार्ड कंपोनेंट
क्लासिक बॉर्डर, पैडिंग और शैडो वाला कंटेंट बॉक्स।
.card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}कार्ड + ग्रिड = एक गैलरी
.card एलिमेंट को repeat(auto-fit, minmax(...)) ग्रिड में डालें और लगभग बिना अतिरिक्त सीएसएस के पूरी तरह रिस्पॉन्सिव कार्ड गैलरी पाएँ।
अंतिम क्विज़ 1/8
अंतिम क्विज़
त्वरित जाँच: अंदर से बाहर सही box-model क्रम कौन-सा है?
- content, border, padding, margin
- margin, border, padding, content
- content, padding, border, margin
- padding, content, border, margin
Answer
content, padding, border, margin — Content padding के भीतर, फिर border, फिर margin होता है।
अंतिम क्विज़ 2/8
अंतिम क्विज़
त्वरित जाँच: box-sizing: border-box क्या बदलता है?
- Width excludes content
- Margins collapse
- Borders disappear
- Width includes padding and border
Answer
Width includes padding and border — यह width की गणना अनुमानित बनाता है।
अंतिम क्विज़ 3/8
अंतिम क्विज़
त्वरित जाँच: Absolute element किसके सापेक्ष स्थित होता है...
- Its nearest positioned ancestor
- The viewport always
- Its sibling
- The body only
Answer
Its nearest positioned ancestor — बिना positioned ancestor के यह initial containing block पर जाता है।
अंतिम क्विज़ 4/8
अंतिम क्विज़
त्वरित जाँच: द्वि-आयामी layout के लिए कौन-सा सबसे अच्छा है?
- float
- CSS Grid
- inline
- table-layout hacks
Answer
CSS Grid — Grid rows और columns दोनों साथ संभालता है।
अंतिम क्विज़ 5/8
अंतिम क्विज़
त्वरित जाँच: कौन-सी unit user के default font size के साथ scale होती है?
- px
- pt
- rem
- cm
Answer
rem — rem root font size के सापेक्ष है।
अंतिम क्विज़ 6/8
अंतिम क्विज़
त्वरित जाँच: कौन जीतता है: class selector या id selector?
- The class selector
- Whichever is longer
- Neither
- The id selector
Answer
The id selector — Ids की specificity अधिक होती है।
अंतिम क्विज़ 7/8
अंतिम क्विज़
त्वरित जाँच: Performance के लिए कौन-से properties animate करना सबसे अच्छा है?
- transform and opacity
- width and height
- margin and padding
- top and left
Answer
transform and opacity — ये layout से बचते हैं और GPU पर चलते हैं।
अंतिम क्विज़ 8/8
अंतिम क्विज़
त्वरित जाँच: Custom property --gap को कैसे पढ़ें?
- $gap
- var(--gap)
- gap()
- @gap
Answer
var(--gap) — var() custom properties पढ़ता है।