CSS బాక్స్ సైజింగ్ అట్రిబ్యూట్

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

ఉదాహరణకు, మీరు రెండు పక్కప్పుడు ఉన్న బార్డర్ గల పెట్టెలను సరికొనాలి అయితే, box-sizing ను "border-box" గా సెట్ చేయండి. ఇది బ్రౌజర్ కు ప్రక్షేపణం మరియు వైడ్త్ ను ప్రదర్శించడానికి మరియు బార్డర్ మరియు ప్రక్షేపణం లను పెట్టెలో చేరుస్తుంది.

మరింత చూడండి:

CSS3 శిక్షణాగృహం:CSS3 యూజర్ ఇంటర్ఫేస్

HTML DOM సూచికాగ్రం:boxSizing అంశం

ఉదాహరణ

రెండు పక్కప్పుడు ఉన్న బార్డర్ గల పెట్టెలను నిర్వచిస్తుంది:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

మీరే ప్రయత్నించండి

పేజీ కిందికి మరిన్ని ఉదాహరణలు ఉన్నాయి.

CSS సంకేతాలు

box-sizing: content-box|border-box|inherit;

అంశం విలువ

విలువ వివరణ
content-box

ఇది CSS2.1 నిబంధనలు నిర్ణయించిన వైడ్త్ మరియు ప్రక్షేపణం ప్రవర్తన.

వైడ్త్ మరియు ప్రక్షేపణం అంశం కాంటెంట్ బాక్స్ పైన వర్తిస్తాయి.

వైడ్త్ మరియు ప్రక్షేపణం దాటి అంశం ప్రక్షేపణం మరియు బార్డర్ గీయబడతాయి.
border-box

అంశానికి సంకేతించిన వైడ్త్ మరియు ప్రక్షేపణం అంశం బార్డర్ బాక్స్ ను నిర్ణయిస్తాయి.

అంటే, అంశానికి సంకేతించిన ఏదైనా ప్రక్షేపణం మరియు బార్డర్ ప్రక్షేపణం ప్రక్షేపణం మరియు వైడ్త్ లోపల గీయబడతాయి.

కాంటెంట్ వైడ్త్ మరియు ప్రక్షేపణం నుండి బార్డర్ మరియు ప్రక్షేపణం తొలగించి మాత్రమే కాంటెంట్ వైడ్త్ మరియు ప్రక్షేపణం లభిస్తాయి.
inherit పిత్ర అంశం నుండి box-sizing అంశం వారసత్వం పొందాలి.

సాంకేతిక వివరాలు

అప్రమేయం: content-box
వారసత్వం: లేదు
సంచిక: CSS3
JavaScript సంకేతాలు: object.style.boxSizing="border-box"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంచికను పేర్కొంటాయి.

ముందుగా ఉన్న -webkit- లేదా -moz- అనే సంఖ్యలు ప్రాథమిక సంచికను సూచిస్తాయి.

క్రోమ్ ఐఇ / ఎండ్జె ఫైర్ఫాక్స్ సఫారీ ఓపెరా
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5