Η κανονική ροή είναι ο τρόπος με τον οποίο τα στοιχεία εμφανίζονται σε μια ιστοσελίδα στις περισσότερες περιπτώσεις. Όλα τα στοιχεία σε HTML είναι μέσα σε κουτιά που είναι είτε κουτιά inline είτε κουτιά μπλοκ .
Τοποθέτηση κουτιών αποκλεισμού
Σε κανονική ροή, τα κουτιά μπλοκ τοποθετούνται σε μια σελίδα το ένα μετά το άλλο (με τη σειρά που γράφουν στο HTML ). Αρχίζουν στο επάνω αριστερό μέρος του πλαισίου που περιέχει και στοιβάζονται από πάνω προς τα κάτω. Η απόσταση μεταξύ κάθε πλαισίου ορίζεται από τα περιθώρια με τα επάνω και κάτω περιθώρια που συμπίπτουν μεταξύ τους.
Για παράδειγμα, μπορεί να έχετε το εξής HTML:
Αυτό είναι το πρώτο δις. Έχει πλάτος 200 pixels με περιθώριο 5px γύρω από αυτό.
Αυτό είναι ένα ευρύτερο div.
Αυτό είναι ένα div που είναι λίγο μεγαλύτερο από το δεύτερο.
Κάθε DIV είναι στοιχείο μπλοκ, έτσι θα τοποθετηθεί κάτω από το προηγούμενο στοιχείο μπλοκ. Κάθε αριστερή εξωτερική άκρη θα αγγίξει το αριστερό άκρο του μπλοκ που περιέχει.
Τοποθέτηση κιβωτίων Inline
Τα παράθυρα τοποθετούνται στη σελίδα οριζόντια, το ένα μετά το άλλο αρχίζοντας από το επάνω μέρος του στοιχείου του δοχείου. Όταν δεν υπάρχει αρκετός χώρος για να χωρέσει όλα τα στοιχεία του γραμματοκιβωτίου σε μια γραμμή, τυλίγουν στην επόμενη γραμμή και στοιβάζονται κάθετα από εκεί.
Για παράδειγμα, στα ακόλουθα HTML:
Αυτό το κείμενο είναι τολμηρό και αυτό το κείμενο είναι πλάγια . Και αυτό είναι απλό κείμενο.
Η παράγραφος είναι ένα στοιχείο μπλοκ, αλλά υπάρχουν 5 εν σειρά στοιχεία:
- "Αυτό το κείμενο είναι"
- "τολμηρός"
- "και αυτό το κείμενο είναι"
- "πλάγια γραφή"
- "Και αυτό είναι απλό κείμενο."
Έτσι, η κανονική ροή είναι ο τρόπος με τον οποίο τα εν λόγω στοιχεία μπλοκ και inline θα εμφανίζονται στην ιστοσελίδα χωρίς καμία παρέμβαση του σχεδιαστή ιστού.
Αν θέλετε να επηρεάσετε πού ένα στοιχείο βρίσκεται σε μια σελίδα, μπορείτε να χρησιμοποιήσετε το CSS positioning ή CSS floats .