CSS ఫ్రేమ్ మోడల్

CSS ఫ్రేమ్ మోడల్

అన్ని హెచ్టిఎంఎల్ మెలంట్స్ అనేకాన్ని పరిగణించవచ్చు క్వాడ్ మాడల్. సిఎస్ఎస్ లో, డిజైన్ మరియు లేఆట్ గురించి మాట్లాడటంలో,

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

CSS ఫ్రేమ్ మోడల్

对不同部分的说明：

  • 内容 - 框的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。

框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

సూచన:బ్యాక్గ్రౌండ్ అంశం కంటెంట్, అంతరాంతరం మరియు బార్డర్ ద్వారా నిర్మించబడిన ప్రాంతానికి అమర్చబడుతుంది.

అంతరాంతరం, బార్డర్ మరియు మార్జిన్ ఎంపికబడినవి ఉన్నాయి, మరియు డిఫాల్ట్ విలువలు నలుపులు. కానీ, అనేక అంశాలు యూజర్ ఏజెంట్ స్టైల్ షేర్లను అమర్చవచ్చు. ఈ బ్రౌజర్ శైలులను తరచుగా మార్జిన్ మరియు ప్యాడింగ్ ని సెట్ చేయడం ద్వారా తగ్గించవచ్చు. ఇది వేర్వేరుగా చేయవచ్చు, లేదా యూనివర్సల్ సెలెక్టర్ ద్వారా అన్ని అంశాలపైన అమర్చవచ్చు:

* {
  margin: 0;
  ప్యాడింగ్: 0;
}

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

హాస్ట్ బాక్స్ ప్రతి ప్రక్కపై 10 పిక్సెల్స్ మార్జిన్ మరియు 5 పిక్సెల్స్ ప్యాడింగ్ ఉన్నట్లు భావించండి. ఈ అంశం బాక్స్ ను 100 పిక్సెల్స్ పరిమాణానికి చేర్చడానికి, అంతర్గత వెడల్పును 70 పిక్సెల్స్ పరిమాణానికి అమర్చండి. దిగువ చిత్రాన్ని చూడండి:

CSS ఫ్రేమ్ మోడల్ ఇన్స్టాన్స్ 
#box {
  వెడల్పు: 70px;
  మార్జిన్: 10px;
  ప్యాడింగ్: 5px;
}

సూచన:అంతరాంతరం, బార్డర్ మరియు మార్జిన్ అన్ని అంశాలపైన కలిగినవి కావచ్చు, లేదా ఒకే అంశపైన కలిగినవి కావచ్చు.

సూచన:ముఖ్యమైన సూచన: మార్జిన్ పోసిటివ్ విలువలు ఉండవచ్చు, మరియు అనేక సందర్భాలలో పోసిటివ్ మార్జిన్ విలువలను వాడవలసివుంటుంది.

ఉదాహరణ

ఫ్రేమ్ మోడల్ ప్రదర్శన:

div {
  వెడల్పు: 300px;
  బార్డర్: 15px సోలిడ్ గ్రీన్;
  ప్యాడింగ్: 50px;
  మార్జిన్: 20px;
}

亲自试一试

అంశం వెడల్పు మరియు పొడవు

అన్ని బ్రౌజర్లలో అంశం వెడల్పు మరియు పొడవును సరిగా అమర్చడానికి, ఫ్రేమ్ మోడల్ ఎలా పని చేస్తుందో తెలుసుకోవాలి.

ముఖ్యమైన సూచన:సిఎస్ఎస్ ద్వారా అంశం వెడల్పు మరియు పొడవు అంశాలను అమర్చటం సమయంలో, కేవలం సాంకేతిక ప్రాంతం వెడల్పు మరియు పొడవును అమర్చండి. అంశం పూర్తి పరిమాణాన్ని గణించడానికి, అంతరాంతరం, బార్డర్ మరియు మార్జిన్ ను కలపండి.

ఉదాహరణ

<div> మొత్తం వెడల్పు 350px కాగలదు:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

亲自试一试

计算如下：

320px(宽度)
+ 20px（左+右内边距）
+ 10px（左+右边框）
+ 0px（左+右外边距）
= 350px

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

మూలకం మొత్తం ఎత్తు ఈ విధంగా గణించాలి:

మూలకం మొత్తం ఎత్తు = ఎత్తు + పై అంతరాంతరం + క్రింద అంతరాంతరం + పై బార్డర్ + క్రింద బార్డర్ + పై బయటపడిన మొత్తం అంతరం + క్రింద బయటపడిన మొత్తం అంతరం