Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ιδιότητες στο μοντέλο κουτιού

υλικό παραγεμίσματος

padding Χρησιμοποιείται για τον έλεγχο του διαστήματος μεταξύ του περιεχομένου του στοιχείου και του περιγράμματος μπορεί να ρυθμιστεί ξεχωριστά για κάθε πλευρά του στοιχείου (πάνω, δεξιά, κάτω, αριστερά). Η μονάδα πλήρωσης μπορεί να είναι pixel (px), ποσοστό (%), κ.λπ.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

σύνορο

border Χρησιμοποιείται για τον ορισμό του περιγράμματος του στοιχείου, συμπεριλαμβανομένου του πλάτους, του στυλ και του χρώματος του περιγράμματος.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

χαρακτηριστικό μέγεθος

πλάτος

width Χρησιμοποιείται για τον ορισμό του πλάτους του στοιχείου Η μονάδα μπορεί να είναι εικονοστοιχεία (px), ποσοστό (%), μονάδα πλάτους προβολής (vw) κ.λπ.width Ορίζει μόνο το πλάτος της περιοχής περιεχομένου, εξαιρουμένων των συμπληρωμάτων, των περιγραμμάτων και των περιθωρίων.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

ύψος

height Χρησιμοποιείται για τον ορισμό του ύψους του στοιχείου Η μονάδα μπορεί να είναι εικονοστοιχεία (px), ποσοστό (%), μονάδα ύψους προβολής (vh) κ.λπ.height Ορίζει μόνο το ύψος της περιοχής περιεχομένου, εξαιρουμένων των συμπληρωμάτων, των περιγραμμάτων και των περιθωρίων.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

Ιδιότητες διάταξης

απεικόνιση

display Οι ιδιότητες χρησιμοποιούνται για τον καθορισμό του τύπου εμφάνισης του στοιχείου. Οι κοινές τιμές περιλαμβάνουν:

• block: Τα στοιχεία σε επίπεδο μπλοκ καταλαμβάνουν ολόκληρο το πλάτος του γονικού κοντέινερ και θα αναδιπλωθούν από προεπιλογή.
• inline: Τα ενσωματωμένα στοιχεία καταλαμβάνουν μόνο το πλάτος του περιεχομένου τους και δεν θα τυλιχτούν.
• inline-block: Τα ενσωματωμένα στοιχεία σε επίπεδο μπλοκ είναι διατεταγμένα σαν ενσωματωμένα στοιχεία, αλλά το πλάτος και το ύψος μπορούν να ρυθμιστούν.
• none: Τα κρυφά στοιχεία δεν εμφανίζονται στη σελίδα και δεν καταλαμβάνουν χώρο.
• flex: Ενεργοποιήστε την ευέλικτη διάταξη πλαισίου και τακτοποιήστε τα θυγατρικά στοιχεία σε μια γραμμή.
• grid: Ενεργοποιεί τη διάταξη πλέγματος, τακτοποιώντας θυγατρικά στοιχεία σε ένα πλέγμα.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

με το συνδυασμό padding、border、width、height καιdisplay και άλλα χαρακτηριστικά, μπορείτε να ελέγχετε με ευελιξία το μέγεθος, την απόσταση και τη διάταξη των στοιχείων. Αυτές οι ιδιότητες αποτελούν τη βάση για τη δημιουργία ιστοσελίδων με ανταπόκριση και όμορφη εμφάνιση. Ακολουθεί ένα ολοκληρωμένο παράδειγμα που δείχνει πώς να χρησιμοποιήσετε αυτές τις ιδιότητες μαζί για να δημιουργήσετε ένα στοιχείο σε επίπεδο μπλοκ με γέμιση, περιγράμματα και συγκεκριμένο πλάτος και ύψος:

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

Σε αυτό το παράδειγμα,.box Το στοιχείο έχει ρυθμιστεί ως στοιχείο σε επίπεδο μπλοκ με πλάτος 300 εικονοστοιχεία και ύψος 150 εικονοστοιχεία, με 20 εικονοστοιχεία επένδυσης και 5 εικονοστοιχεία συμπαγούς μαύρου περιγράμματος. Αυτή η ρύθμιση διασφαλίζει ότι υπάρχει αρκετός χώρος μεταξύ του περιεχομένου του στοιχείου και του περιγράμματος, ενώ το περίγραμμα ορίζει σαφώς το εξωτερικό όριο του στοιχείου.

Ελπίζουμε αυτές οι εξηγήσεις να είναι χρήσιμες, παρακαλώ ενημερώστε με εάν έχετε περισσότερες ερωτήσεις ή χρειάζεστε περισσότερα παραδείγματα!