Inhaltsverzeichnis
Webbrowser wie Firefox, Chrome, Safari, Opera usw.. Alle von ihnen Befolgen Sie die Regeln zum Ändern der Größe von Elementen je nach Fluss und Layout der SeiteDiese Regeln können vielleicht sehr detailliert sein, aber es ermöglicht uns festzulegen, wie die Elemente behandelt werden sollen, damit die Größen immer im Verhältnis zu dem gehalten werden, was wir von ihnen erwarten.Größeneigenschaften
Es gibt einige Größeneigenschaften, die es uns ermöglichen, dem Browser mitzuteilen, wie er unsere Elemente interpretieren soll. Sehen wir uns eine Liste davon an, bevor wir zu ihrer Anwendung gehen:
Breite Höhe: Sie konfigurieren die Breite und Höhe eines Elements, die Werte, die es annehmen kann, sind die folgenden: auto und.
min-Breite / min-Höhe: Es ermöglicht uns, die minimale Breite oder Höhe für ein Element festzulegen. Die Werte, die es annehmen kann, sind die folgenden: auto und
Max-Breite / Max-Höhe: Legt die maximal akzeptable Höhe oder Breite für ein Element fest, seine möglichen Werte sind: auto und
Kartongröße: Es legt fest, welcher Teil der Elementbox für die Größe verwendet wird, die verfügbaren sind: content-box padding-box border-box margin-box.
Wenn Sie keinen Wert für die angezeigten Eigenschaften festlegen, ist der Standardwert: auto, auch wenn er nicht angegeben ist, was bedeutet, dass der Browser derjenige ist, der die Größen festlegt, auch wie wir gesehen haben, können wir die Größen mit einstellen Längenmaße oder Prozentsätze, wobei die Prozentsätze basierend auf der Breite des Containerelements berechnet werden.
Nachdem wir die Theorie gesehen haben, gehen wir nun in die Praxis. Sehen wir uns den folgenden Code an, in dem wir die Größe von zwei Elementen festlegen, damit wir sehen können, wie das alles funktioniert:
Beispiel
Wie wir sehen, ist das, was wir hier gemacht haben, sehr einfach. Wir haben eine Breite und eine Höhe für das div-Element der Seite festgelegt, dann geben wir zwei Bezeichner an, an denen wir jeweils einen anderen platzieren KartongrößeMal sehen, was das alles für uns bringt:
Was passiert, wenn wir jetzt ein bisschen mit der Größenänderung des Browserfensters spielen, wissen wir, dass das div 75% der Größe seines Containers hat, in diesem Fall ist sein Container ein Körper, der sich mit dem Fenster ändert und sich wiederum das Bild mit Selektor #erste Es ist 50% der Breite seines Containers, was in diesem Fall div ist. Wenn wir dies sehen, wissen wir, dass etwas nicht so beibehalten wird, wie es ist. Schauen wir uns an, was mit all dem im Browser passiert.
VERGRÖSSERN
