Absolute and Relative Units

Absolute and Relative Units అంటే ఏమిటి?

CSSలో width, height, margin, padding, font-size వంటి propertiesకు value ఇవ్వడానికి units ఉపయోగిస్తాం. Unit ద్వారా ఒక element ఎంత పరిమాణంలో ఉండాలో browserకు చెబుతాం.

Absolute Units

Absolute units సాధారణంగా ఒక స్థిరమైన పరిమాణాన్ని సూచిస్తాయి. Element చుట్టూ ఉన్న parent size మారినా, ఈ units సాధారణంగా తమ స్వంత పరిమాణాన్ని ఉంచుతాయి.

ప్రధాన absolute units: px, cm, mm, in, pt, pc. Web pagesలో px ఎక్కువగా కనిపిస్తుంది.

Relative Units

Relative units మరొక పరిమాణాన్ని ఆధారంగా చేసుకుని మారుతాయి. ఉదాహరణకు, % parent element వెడల్పును ఆధారంగా తీసుకుంటుంది. vw viewport widthను, vh viewport heightను ఆధారంగా తీసుకుంటాయి.

Responsive layouts తయారు చేయడానికి relative units ఉపయోగకరంగా ఉంటాయి. Browser window చిన్నదైనా పెద్దదైనా layout అనుకూలంగా మారుతుంది.

ఎప్పుడు ఏవి ఉపయోగించాలి?

ఒక నిర్దిష్ట పరిమాణం అవసరమైనప్పుడు absolute unit ఉపయోగించండి.
Parent లేదా screen size ఆధారంగా element మారాలి అనుకుంటే relative unit ఉపయోగించండి.
Responsive designలో relative units ఉపయోగించడం సాధారణంగా మంచి ఎంపిక.

Code Example

క్రింది ఉదాహరణలో మొదటి boxకి 240px అనే స్థిరమైన width ఉంది. రెండవ box parent containerలో 60% width తీసుకుంటుంది. మూడవ box viewport widthకు సంబంధించి 50vw width తీసుకుంటుంది.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Units</title>
  <style>
    .container {
      width: 500px;
      border: 2px solid #333333;
      padding: 16px;
    }

    .fixed-box {
      width: 240px;
      padding: 12px;
      background-color: #dbeafe;
      margin-bottom: 12px;
    }

    .percent-box {
      width: 60%;
      padding: 12px;
      background-color: #dcfce7;
      margin-bottom: 12px;
    }

    .viewport-box {
      width: 50vw;
      padding: 12px;
      background-color: #fef3c7;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-box">Fixed width: 240px</div>
    <div class="percent-box">Relative width: 60%</div>
    <div class="viewport-box">Relative width: 50vw</div>
  </div>
</body>
</html>

Browserలో ఎలా పనిచేస్తుంది?

.container width 500pxగా ఉంది. అందువల్ల అది స్థిరమైన పరిమాణం కలిగి ఉంటుంది. .fixed-box కూడా 240px widthతో ఉంటుంది. .percent-box తన parent అయిన container widthలో 60% తీసుకుంటుంది. .viewport-box browser viewport widthలో 50% తీసుకుంటుంది.

Simple Explanation

సులభంగా గుర్తుంచుకోవాలంటే:

Absolute unit = స్థిరమైన పరిమాణం. ఉదాహరణ: 240px.
Relative unit = మరో పరిమాణాన్ని ఆధారంగా చేసుకుని మారే పరిమాణం. ఉదాహరణ: 60% లేదా 50vw.

Parent element width మారితే percentage width మారుతుంది. Browser window width మారితే viewport-based width కూడా మారుతుంది.

Real-Life Example

ఒక cupboard width ఎప్పుడూ 120 cmగా ఉండాలని నిర్ణయిస్తే అది absolute size లాంటిది. కానీ ఒక tableపై పెట్టిన box table widthలో 50% మాత్రమే తీసుకోవాలని చెబితే అది relative size లాంటిది. Table పెద్దదైతే box కూడా పెద్దదవుతుంది; table చిన్నదైతే box కూడా చిన్నదవుతుంది.

Code Examples

Absolute and Relative Widths

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Units</title>
  <style>
    .container {
      width: 500px;
      border: 2px solid #333333;
      padding: 16px;
    }

    .fixed-box {
      width: 240px;
      padding: 12px;
      background-color: #dbeafe;
      margin-bottom: 12px;
    }

    .percent-box {
      width: 60%;
      padding: 12px;
      background-color: #dcfce7;
      margin-bottom: 12px;
    }

    .viewport-box {
      width: 50vw;
      padding: 12px;
      background-color: #fef3c7;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-box">Fixed width: 240px</div>
    <div class="percent-box">Relative width: 60%</div>
    <div class="viewport-box">Relative width: 50vw</div>
  </div>
</body>
</html>

ఈ ఉదాహరణలో ఒకే parent containerలో మూడు boxes ఉన్నాయి. మొదటి box 240px అనే absolute widthను ఉపయోగిస్తుంది. రెండవ box parent widthలో 60% తీసుకుంటుంది. మూడవ box viewport widthలో 50vw తీసుకుంటుంది. Browser windowను resize చేసి relative units ఎలా మారుతున్నాయో గమనించండి.

Browserలో 500px వెడల్పు ఉన్న border container కనిపిస్తుంది. అందులో 240px స్థిరమైన నీలం box, container widthలో 60% ఉన్న ఆకుపచ్చ box, viewport widthలో 50% ఉన్న పసుపు box కనిపిస్తాయి.

Line-by-Line Explanation

.container {

ఈ selector container class ఉన్న divను ఎంచుకుంటుంది.

width: 500px;

Containerకు 500px width ఇస్తుంది. ఇది absolute unit కాబట్టి సాధారణంగా స్థిరమైన widthగా ఉంటుంది.

border: 2px solid #333333;

Container చుట్టూ 2px border చూపిస్తుంది. ఇక్కడ 2px ఒక absolute unitకు ఉదాహరణ.

.fixed-box {

Fixed width boxకు styles ప్రారంభమవుతాయి.

width: 240px;

ఈ box widthను 240pxగా ఉంచుతుంది. Parent width మారినా ఈ value స్వయంగా percentageలా మారదు.

.percent-box {

Percentage width ఉపయోగించే boxను ఎంచుకుంటుంది.

width: 60%;

ఈ box తన parent container content widthలో 60% తీసుకుంటుంది. Parent width మారితే box width కూడా మారుతుంది.

.viewport-box {

Viewport ఆధారంగా width తీసుకునే boxను ఎంచుకుంటుంది.

width: 50vw;

vw అంటే viewport widthలో ఒక భాగం. 50vw browser viewport widthలో 50%ను సూచిస్తుంది.

<div class=”container”>

HTMLలో మూడు boxesకు parent containerను సృష్టిస్తుంది. Percentage width ఈ parent పరిమాణాన్ని ఆధారంగా తీసుకుంటుంది.

<div class=”fixed-box”>Fixed width: 240px</div>

ఈ elementకు fixed-box class వర్తిస్తుంది. అందువల్ల దీని width 240px అవుతుంది.

<div class=”percent-box”>Relative width: 60%</div>

ఈ element parent container widthలో 60%ను ఉపయోగిస్తుంది.

<div class=”viewport-box”>Relative width: 50vw</div>

ఈ element browser viewport widthకు సంబంధించి 50vw widthను ఉపయోగిస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try CSS Units</title>
  <style>
    .panel {
      width: 420px;
      border: 2px solid #333333;
      padding: 16px;
    }

    .fixed-item {
      width: 180px;
      padding: 12px;
      background-color: #dbeafe;
      margin-bottom: 12px;
    }

    .relative-item {
      width: 50%;
      padding: 12px;
      background-color: #dcfce7;
    }
  </style>
</head>
<body>
  <div class="panel">
    <div class="fixed-item">Absolute width: 180px</div>
    <div class="relative-item">Relative width: 50%</div>
  </div>
</body>
</html>

Try It Yourself »

Practice

Practice: పై codeను browser editorలో run చేయండి. .card యొక్క widthను 50% నుంచి 75%గా మార్చండి. ఇది relative unitగా ఎలా పనిచేస్తుందో గమనించండి.

Hint: width: 50%; ను width: 75%;గా మార్చండి. Percentage parent లేదా available width ఆధారంగా మారుతుంది.

Common Mistakes

width: 50; అని unit లేకుండా value రాయడం. చాలా sizing propertiesకు unit అవసరం.

సరైన unitను రాయండి: width: 50px; లేదా width: 50%;.

width: 50%%; అని percentage symbolను రెండుసార్లు రాయడం.

ఒక్క percentage symbol మాత్రమే ఉపయోగించండి: width: 50%;.

Parent widthను అర్థం చేసుకోకుండా percentage resultను fixed sizeగా భావించడం.

Percentage unit parent element width ఆధారంగా మారుతుందని గుర్తుంచుకోండి.

vw మరియు % రెండూ ఎప్పుడూ ఒకే విధంగా పనిచేస్తాయని అనుకోవడం.

% సాధారణంగా parent sizeను ఆధారంగా తీసుకుంటుంది. vw viewport widthను ఆధారంగా తీసుకుంటుంది.

Interview Questions

CSSలో unit ఎందుకు ఉపయోగిస్తారు?

Answer: Width, height, spacing వంటి valuesకు ఖచ్చితమైన పరిమాణాన్ని browserకు చెప్పడానికి CSS units ఉపయోగిస్తారు.

Absolute unit అంటే ఏమిటి?

Answer: సాధారణంగా స్థిరమైన పరిమాణాన్ని సూచించే unitను absolute unit అంటారు. ఉదాహరణకు px.

Relative unit అంటే ఏమిటి?

Answer: Parent element లేదా viewport వంటి మరో పరిమాణాన్ని ఆధారంగా చేసుకుని మారే unitను relative unit అంటారు. ఉదాహరణకు % మరియు vw.

width: 60%; సాధారణంగా దేనిని ఆధారంగా తీసుకుంటుంది?

Answer: ఇది element యొక్క parent container widthను ఆధారంగా తీసుకుంటుంది.

vw అంటే ఏమిటి?

Answer: vw అంటే viewport width unit. 50vw browser viewport widthలో 50%ను సూచిస్తుంది.

Exam Questions

క్రింది వాటిలో relative unit ఏది? A) px B) % C) cm D) pt

Answer:

సరైన సమాధానం: B) %

ఒక boxకు స్థిరమైన 300px width ఇవ్వడానికి CSS declaration రాయండి.

Answer:

width: 300px;

Parent widthలో 80% తీసుకునే box కోసం CSS declaration రాయండి.

Answer:

width: 80%;

Viewport widthలో 40%ను సూచించే value ఏది?

Answer:

40vw

Quick Revision

Absolute units సాధారణంగా స్థిరమైన పరిమాణాన్ని సూచిస్తాయి.
Relative units parent లేదా viewport వంటి మరో పరిమాణాన్ని ఆధారంగా తీసుకుంటాయి.
px ఒక సాధారణ absolute unit.
% సాధారణంగా parent width ఆధారంగా మారుతుంది.
vw viewport width ఆధారంగా పనిచేస్తుంది.
Responsive layouts కోసం relative units ఉపయోగకరంగా ఉంటాయి.
CSS sizing valueలో unitను మర్చిపోకండి.

Absolute and Relative Units