display மிகவும் அடிப்படையான CSS பண்புகளில் ஒன்றாகும் — இது ஒரு உறுப்பு ஒரு상자 எப்படி உৎপாদிக்கிறது மற்றும் அதன் குழந்தைகள் எப்படி அமைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்துகிறது.
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display உண்மையில் இரண்டு விஷயங்களை அமைக்கிறது:상자 வெளியே (block/inline) எப்படி நடந்துகொள்ளுகிறது மற்றும் அது குழந்தைகளை உள்ளே (flow/flex/grid) எப்படி அமைக்கிறது. display: flex என்பது "இந்த상자 ब्लॉक-லেवல், மற்றும் அதன் குழந்தைகள் flex பொருட்கள்."
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
ஒரு முக்கிய வேறுபாடு: display: none தளவாடத்தை சரிந்துவிடுகிறது (மற்றும் திரை வாசகர்களிடமிருந்து மறைக்கிறது); visibility: hidden உறுப்பு இருந்த இடத்தில் ஒரு இடைவெளியை விட்டுவிடுகிறது. உண்மையிலேயে அகற்ற display: none ஐ பயன்படுத்தவும், தளவாடத்தை பாதுகாப்பது போது மறைக்க visibility: hidden ஐ பயன்படுத்தவும்.
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
আধুनिক தளவாடம் கிட்டத்தட்ட முழுவதுமாக flex (1D — வரிசைகள் அல்லது நெடுவரிசைகள்) மற்றும் grid (2D — வரிசைகள் மற்றும் நெடுவரிசைகள் ஒன்றாக) எপ்படி உருவாக்கப்படுகிறது.
display உறுப்பின் முழு தளவாடத் தொழிலை தீர்மானிக்கிறது.
block, inline மற்றும் inline-block க்கு இடையேயான வேறுபாடு தெரிந்துகொள்வது இயல்பான ஓட்டத்தை விளக்குகிறது; flex/grid என்பது நவீன தளவாடத்தின் மূலமாகும்; மற்றும் none மற்றும் visibility க்கு இடையேயான வேறுபாடு அடிக்கடி சோதிக்கப்படும், நடைமுறையளவில் முக்கியமான விவரம் ஆகும்.