CSS inset-block ιδιότητα

Προηγούμενη σελίδα inset
Επόμενη σελίδα inset-block-end

Ορισμός και χρήση

inset-block Αποτελεσμα ρύθμισης αποστάσεων στοίβας μεταξύ του στοιχείου πλάτους και του γονικού στοιχείου.

Σημείωση:Για να γίνει η ιδιότητα αυτή λειτουργική, πρέπει να καθοριστεί position ιδιότητες.

inset-block Η ιδιότητα είναι συντομευμένη για τις παρακάτω ιδιότητες:

inset-block-start
inset-block-end

inset-block Η τιμή της ιδιότητας μπορεί να ρυθμιστεί με διάφορους τρόπους:

Αν η ιδιότητα inset-block έχει δύο τιμές:

inset-block: 10px 50px;

Η αρχική απόσταση είναι 10px
Η τελική απόσταση είναι 50px

Αν η ιδιότητα inset-block έχει μια τιμή:

inset-block: 10px;

Η αρχική και η τελική απόσταση του inset-block είναι 10px

CSS inset-inline ιδιότητες είναι πάνω,κάτω,αριστερά και δεξιά Η ιδιότητα είναι πολύ παρόμοια με την inset-block, αλλά η inset-block και inset-inline Η ιδιότητα εξαρτάται από την κατεύθυνση του τομέα και της γραμμής.

Σημείωση:σχετικές ιδιότητες CSS writing-mode Ορίζει την κατεύθυνση του τομέα. Αυτό επηρεάζει την αρχική και την τελική θέση του τομέα, καθώς και inset-block Το αποτέλεσμα της ιδιότητας. Για τις σελίδες με αγγλική γλώσσα, η κατευθύνση του τομέα είναι προς τα κάτω και η κατευθύνση της γραμμής είναι από αριστερά προς τα δεξιά.

Παράδειγμα

Παράδειγμα 1

Ρυθμίστε την απόσταση του ήδη τοποθετημένου στοιχείου div στο δομικό κατευθυντήριο του γονικού στοιχείου:

div {
  inset-block: 10px 50px;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Όταν το στοιχείο writing-mode Όταν η τιμή του attributes είναι vertical-rl, η αρχική θέση του στοιχείου μετακινείται από την κορυφή στο δεξί και η τελική θέση του στοιχείου μετακινείται από το κάτω στο αριστερό:

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

inset-block: αυτομάτως|length|initial|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή	Περιγραφή
αυτόματα	Προεπιλεγμένη τιμή. Η προεπιλεγμένη τιμή του inset-block του στοιχείου.
length	Ορίζει την απόσταση με μονάδες όπως px, pt, cm κ.λπ. Αποτελούνται από αρνητικές τιμές. Δείτε επίσης:Μονάδες CSS.
%	Ορίζει την απόσταση ως ποσοστό του μεγέθους του γονικού στοιχείου στον αντίστοιχο άξονα.
initial	Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη τιμή της. Δείτε initial.
κληρονομικότητα	Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε κληρονομικότητα.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή:	αυτόματα
Κληρονομικότητα:	Όχι
Ανίμαση:	Υποστήριξη. Δείτε επίσης:Ιδιότητες σχετικές με την αнимацию.
Έκδοση:	CSS3
Γλώσσα γραφικής γλώσσας:	object.style.insetBlock="100px 50px"