CSS ఫ్రేమ్ మోడల్ సమీక్ష

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

CSS ఫ్రేమ్ మోడల్ సమీక్ష

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

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

హిందూ:బ్యాక్గ్రౌండ్ అనేది పరిణామం పొడవు, పెద్దరుదురు మరియు బోర్డర్ కు సంబంధించిన ప్రాంతానికి అనువర్తించబడుతుంది.

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

* {
  మార్జిన్: 0;
  పెద్దరుదురు: 0;
}

CSS లో, width మరియు height అనేవి పరిణామం పొడవు మరియు పరిణామం ఎత్తు అనేవి. పెద్దరుదురు, బోర్డర్ మరియు మార్జిన్ అనేవి పరిణామం పొడవు మరియు పరిణామం ఎత్తు పొడవును ప్రభావితం చేయవు, కానీ అంశం పరిణామం మొత్తం పొడవును పెంచతాయి.

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

CSS ఫ్రేమ్ మోడల్ ఉదాహరణ 
#box {
  వైడ్త్: 70px;
  మార్జిన్: 10px;
  పెద్దరుదురు: 5px;
}

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

హిందూ:పెద్దరుదురు విలువలు ఉండవచ్చు మరియు పెద్దరుదురు పెద్దరుదురు ఉపయోగించబడవచ్చు.

బ్రౌజర్ సహకారం

ఒకసారి పేజీకి సరైన DTD అమర్చినప్పుడు, అత్యంత బ్రౌజర్లు పైన చిత్రం ప్రకారం అందించబడుతాయి. అయితే, IE 5 మరియు 6 బ్రౌజర్లు అందించబడుతున్నది సరైనది కాదు. W3C ప్రమాణాల ప్రకారం, పరిణామం పొడవు అనేది width అనునది అమర్చబడినది, అయితే పరిణామం చుట్టూ padding మరియు border విలువలు ప్రత్యేకంగా గణించబడతాయి. దురదృష్టవశాత్తూ, IE5.X మరియు 6 క్రేజీ మోడ్లో స్వంత అస్టాండర్డ్ మోడల్ ఉపయోగిస్తాయి. ఈ బ్రౌజర్లు వైడ్త్ అనునది పరిణామం పొడవు కాదు, పరిణామం, ప్యాడింగ్ మరియు బోర్డర్ పొడవు మొత్తం విలువను సూచిస్తుంది.

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

术语翻译

  • element : 元素。
  • padding : 内边距，也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距，也有资料将其翻译为空白或空白边。

在 codew3c，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）