సిఎస్ఎస్ లేఆఉట్ - డిస్ప్లే ప్రపర్టీ

display అంశం స్టైలింగ్ ను నియంత్రించడానికి ఉపయోగించబడే అతి ముఖ్యమైన సిఎస్ఎస్ అంశం.

display అంశం

display ప్రతిపాదించబడిన విషయం లేదా ఎలా ఎలిమెంట్ను చూపించాలో అంతర్జాల స్టైల్స్ అతి ముఖ్యమైన అంశంగా ఉంటుంది.

ప్రతి హెచ్టిఎమ్ఎల్ వివిధ ఎలిమెంట్ రకాన్ని బట్టి ఒక అప్రమేయ display విలువను కలిగి ఉంటుంది. అత్యంత ఎలిమెంట్లకు అప్రమేయ display విలువ ఉంటుంది block లేదా inline.

ప్యానెల్ ను చూపించడానికి క్లిక్ చేయండి

ఈ ప్యానెల్ ఒక <div> ఎలిమెంట్ను కలిగి ఉంది, ఇది అప్రమేయంగా దారిచినది。（display: none）

它由 CSS 设置样式，我们使用 JavaScript 显示它。（更改为 display: block）

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

这个
元素属于块级元素。

块级元素的一些例子：

  • -

  • <section>

అనుకూల కెమెల్ (inline element)

అనుకూల కెమెల్లు కొత్త పంక్తిలో మొదలవుతాయి లేదు, మరియు అవసరమైన విస్తీర్ణంతో మాత్రమే ఉంటాయి.

ఈ పేరాగ్రాఫ్ లో ఉన్నదిఅనుకూల <span> కెమెల్.

అనుకూల కెమెల్ల కొన్ని ఉదాహరణలు:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; జావాస్క్రిప్ట్ తో కలిసి ఉపయోగించబడుతుంది, కెమెల్లను మరగించడానికి మరియు పునఃరూపొందించడానికి అవసరం లేకపోతుంది. ఈ లక్ష్యాన్ని ఎలా సాధించాలను తెలుసుకోవాలంటే, ఈ పేజీలో చివరి ఉదాహరణను చూడండి.

డిఫాల్ట్ కాగా,<script> కెమెల్లు ఉపయోగిస్తుంది display: none;.

డిఫాల్ట్ Display విలువను అధిగమించడం

ముందుగా చెప్పినట్లుగా, ప్రతి కెమెల్కు ఒక డిఫాల్ట్ display విలువ ఉంటుంది. కానీ, మీరు దానిని అధిగమించవచ్చు.

అనుకూల కెమెల్ను బ్లాక్ కెమెల్గా మార్చడం మరియు బికారణం బ్లాక్ కెమెల్గా మార్చడం, పేజీ ని ఒక ప్రత్యేక రీతిలో చూపించడానికి మరియు వెబ్ పేరంట్ స్టాండర్డ్స్ ను అనుసరించడానికి మంచిది.

ఒక సాధారణ ఉదాహరణగా, హోరైజంటల్ మెనూ అనేది అనుకూల కెమెల్లను ఉపయోగించడం జరుగుతుంది. <li> కెమెల్లు:

ఉదాహరణ

li {
  display: inline;
}

亲自试一试

గమనిక:చూపు:కెమెల్ యొక్క display అంశాన్ని సెట్ చేయడం మాత్రమే మారుస్తుందికెమెల్ యొక్క ప్రదర్శన రీతి display: block; లోని అనుకూల కెమెల్లు మరొక బ్లాక్ కెమెల్ను చేర్చడానికి అనుమతించబడవు. అది కెమెల్ల రకం మారకూడదు. అందువల్ల,

ఈ ఉదాహరణలో, <span> కెమెల్ ను బ్లాక్ కెమెల్ గా చేయబడుతుంది:

ఉదాహరణ

span {
  display: block;
}

亲自试一试

ఈ ఉదాహరణలో, <a> కెమెల్ ను బ్లాక్ కెమెల్ గా చేయబడుతుంది:

ఉదాహరణ

a {
  display: block;
}

亲自试一试

మరగించబడిన కెమెల్ను మరియు visibility: hidden అనేది ఏమిటి?

display: none

visibility: hidden

రీసెట్

ద్వారా display అంశం సెట్ చేయబడింది నాన్ కెమెల్ మరగించవచ్చు. ఈ కెమెల్ మరగించబడుతుంది మరియు పేజీ కాస్మాస్ ఈ కెమెల్ లేదా లేకపోయినట్లు చూడబడుతుంది:

ఉదాహరణ

h1.hidden {
  display: none;
}

亲自试一试

visibility: hidden; కూడా కెమెల్ మరగించవచ్చు.

అయితే, ఈ కెమెల్ ఇప్పటికే ఉన్న స్థానంలో అదే విస్తీర్ణంతో ఉంటుంది. అది మరగించబడుతుంది, కానీ అది లేదా లేకపోయినట్లు చూడబడుతుంది:

ఉదాహరణ

h1.hidden {
  visibility: hidden;
}

亲自试一试

更多实例

display: none; 与 visibility: hidden; 之间的差异
本例演示 display: none; VS visibility: hidden;
结合使用 CSS 和 JavaScript 来显示内容
本例演示如何使用 CSS 和 JavaScript 在单击时显示元素。

CSS Display/Visibility 属性

అట్రిబ్యూట్ వివరణ
display ఎలా ప్రదర్శించాలో నిర్ణయించండి.
visibility ప్రత్యేక అంశం కనిపించాలా కాదు అని నిర్ణయించండి.