Γιώργος Καραγιάννης ρώτησε πριν 10 έτηΘέλω μια μικρή βοήθεια αν γίνεται στη CSS.
Η απορία μου είναι η εξής : ποια η διαφορά μεταξύ block, inline, inline-block;
Πες ότι έχω αυτόν τον κώδικα :
====================================
===============
* {
border: 1px dashed blue;
}
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius:100%;
/*Add your CSS here!*/
display: inline;
}
#one {
background-color: #FF0000;
}
#two {
background-color: #0000FF;
}
#three {
background-color: #FFD700;
}
#four {
background-color: #308014;
}
==========================
εκεί που λέει display και βάλεις block, το κάθε στρογγυλάκι θα είναι σε διαφορετική σειρά, άμα βάλεις inline-block θα είναι στην ίδια σειρά, ενώ σκέτο inline θα σχηματιστεί ένα τετραγωνάκι. Γιατί;
Πάνω-πάνω ανάμεσα στα ίσον αναφέρω και τον κώδικα html, αλλά δεν τον δείχνει.
Το inline δείχνει ένα αντικείμενο μέσα σε μια γραμμή, όπως το "span", δεν αλλάζει γραμμή για να εμφανιστεί.
Το block εμφανίζει το αντικείμενο σαν block element, όπως το "p", που αλλάζει γραμμή για να εμφανιστεί.
Το inline block οργανώνει εσωτερικά το αντικείμενο σαν block (όσον αφορά τα υποαντικείμενα που περιέχει) αλλά εξωτερικά σαν αντικείμενο που είναι μέσα στη γραμμή.
Δηλ. τα υποαντικείμενο ενός αντικειμένου το κάνει σαν block, το αλλάζει σειρά, ενώ το αντικείμενο το αφήνει στην ίδια γραμμή.
Υποαντικείμενο ποιο θεωρείται;
Και δηλ. όλο αυτό πως θα φαίνεται μετά στον browser;
Γιώργο, μην προσπαθείς να το καταλάβεις θεωρητικά. Κάνε αλλαγές και δοκιμές και θα δεις ακριβώς πως λειτουργεί.
Έκανα μερικές και το κατάλαβα, ευχαριστώ.
Και κάτι άλλο σχετικά με το positioning.
Κάνω δοκιμές στο codecademy αλλά ίδιες μου φαίνονται οι αλλαγές.
Άλλαξα το position:absolute σε relative και δεν έγινε κάτι διαφορετικό. Και με το fixed δοκίμασα.
Ποιες είναι οι διαφορές;
Δοκίμασε εδώ τα try it yourself για να καταλάβεις.
Please login or Register to submit your answer
