મોટાભાગના સંજોગોમાં સામાન્ય પ્રવાહ વેબ પૃષ્ઠમાં તત્વો દર્શાવવામાં આવે છે તે રીત છે. એચટીએમએલના બધા ઘટકો અંદરનાં બોક્સ છે જે ક્યાં તો ઇનલાઇન બોક્સ અથવા બ્લૉક બોક્સ છે.
આઉટ બ્લોક બોક્સીઝ મૂક્યા
સામાન્ય પ્રવાહમાં, બ્લૉક બોક્સ બીજા પછીના ક્રમમાં પેજ પર રાખવામાં આવે છે (ક્રમમાં તેઓ HTML માં લખેલા છે). તેઓ સમાવતી બોક્સની ઉપર ડાબી બાજુથી શરૂ કરે છે અને ઉપરથી નીચે સુધી સ્ટેક કરે છે. દરેક બૉક્સ વચ્ચેનું અંતર એકબીજામાં તૂટી પડતા ઉપર અને નીચેના માર્જિન સાથે માર્જિન દ્વારા વ્યાખ્યાયિત થયેલ છે.
ઉદાહરણ તરીકે, તમારી પાસે નીચેના HTML હોઈ શકે છે:
આ પ્રથમ div છે તે તેના આસપાસના 5 પીએક્સના માર્જિન સાથે 200 પિક્સેલ પહોળું છે.
આ વિશાળ ડિવ છે.
આ એક એવી div છે જે બીજા એક કરતા થોડી વધારે છે.
દરેક DIV એક બ્લોક ઘટક છે, તેથી તે અગાઉના બ્લોક ઘટક નીચે મૂકવામાં આવશે. દરેક બાકી બાહ્ય ધાર, સંલગ્ન બ્લોકની ડાબી ધારને સ્પર્શ કરશે.
ઇનલાઇન બોકસ બહાર મૂક્યા
ઇનલાઇન બૉક્સ આ પૃષ્ઠ પર આડી રીતે મૂકવામાં આવે છે, અન્ય એક પછી કન્ટેનર તત્વની શીર્ષ પર શરૂ થાય છે. જ્યારે એક લાઇન પર ઇનલાઇન બોક્સના તમામ ઘટકોને ફિટ કરવા માટે પૂરતી જગ્યા ન હોય ત્યારે, તેઓ આગલી લીટી પર લપેટીને અને ઊભી રીતે ત્યાંથી સ્ટેક કરે છે.
ઉદાહરણ તરીકે, નીચેના HTML માં:
આ ટેક્સ્ટ બોલ્ડ છે અને આ ટેક્સ્ટ ઇટાલિકો છે . અને આ સાદા લખાણ છે.
ફકરા બ્લોક ઘટક છે, પરંતુ તેમાં 5 ઇનલાઇન તત્વો છે:
- "આ ટેક્સ્ટ છે"
- "બોલ્ડ"
- "અને આ લખાણ છે"
- "ત્રાંસા"
- "અને આ સાદા લખાણ છે."
તેથી સામાન્ય પ્રવાહ એ છે કે કેવી રીતે આ બ્લોક અને ઇનલાઇન તત્વો વેબ ડિઝાઇનર દ્વારા કોઈપણ હસ્તક્ષેપ વગર વેબ પેજ પર પ્રદર્શિત થશે.
જો તમે પૃષ્ઠ પર એક તત્વ ક્યાં છે તે અસર કરવા માંગતા હો, તો તમે CSS પૉઝીંગિંગ અથવા CSS ફ્લોટ્સનો ઉપયોગ કરી શકો છો.