Ändern der Größe Elemente mit CSS und Douglas die javascript-Roboter

Jedes Element in einem HTML-Dokument ist ein Rechteck. Selbst wenn ein Element wie ein Kreis (wie Douglas Augen) sieht, ist es tatsächlich wie ein Rechteck behandelt, um den Kreis umgibt. Weil alles, was ein Rechteck ist, können Sie die Größe der Elemente mit CSS ändern, indem Sie ihre Breite und Höhe eingestellt werden.

Um zu beginnen, öffnen Sie Ihren Web-Browser und melden Sie sich in der öffentliche Armaturenbrett. Dann gehen Sie folgendermaßen vor:

1. Finden Sie die Geige genannt Kapitel 6: Roboter-Style - Start und klicken Sie auf den Titel, um es zu öffnen.

   Sie können auch direkt auf dem Sprung Roboter-App.

   Sie sehen einen Bildschirm mit HTML im HTML-Panel und einige CSS in der CSS-Panel.

2. Klicken Sie Gabel im oberen Menü eine Kopie der Geige in Ihrem eigenen JSFiddle Konto zu machen.

Wenn Sie die Breite und Höhe der Dinge in der realen Welt zu messen, verwenden Sie Maßeinheiten wie Zoll, Zentimeter oder Meter. Wenn Sie die Dinge in der CSS-Welt messen, haben Sie mehrere verschiedene Maßeinheiten. Diese beinhalten px (Pixel) und % (Prozent):

• Pixel: Der Pixel ist die kleinste Punkt, der im Web-Browser angezeigt werden können. Wenn Sie Breiten und Höhen mit Pixeln angeben, sagen Sie den Browser genau, wie viele Pixel breit und hoch sollte ein Element sein. Das Problem mit den Pixeln für Messungen ist, dass es zeigt immer Dinge die gleiche Größe - auch wenn das Browserfenster des Nutzers ist sehr groß oder sehr klein.

• Prozent: Wenn Sie Breiten und Höhen mit Prozent angeben, doch sagen Sie den Browser das Element ein bestimmter Prozentsatz der Größe des übergeordneten Elements zu machen.

Sie haben alle von Douglas Messungen angegeben mit Prozent. Dies ist vorteilhaft, weil es bedeutet, dass unabhängig davon, ob Sie bei Douglas freuen auf ein Mobiltelefon oder auf der Jumbotron in Times Square, wird seine Größe anpassen auf den Bildschirm passen. Um die Magie der relative Größe in Aktion zu sehen, ziehen Sie die Scheibe Grenzen in JSFiddle zu dem Ergebnis Scheibe größer oder kleiner zu machen. Beachten Sie, wie Douglas ändert Größe zusammen mit der Größe des Fensters.

Sie können den Begriff gehört haben, sich anpassendes Design. Responsive Design zielt Webinhalt zu schaffen, die flexibel ist und reagiert auf die Größe des Bildschirms des Benutzers. Die Art und Weise Sie Douglas angegebene Größe ist ein Beispiel für Responsive Design.

Machen Sie ein paar Änderungen an einigen von Douglas Teile:

1. Hier finden Sie die CSS-Regel für die Augen Klasse.

2. Ändern, um die Breite auf 30% und die Höhe auf 30%.

   Sie werden bemerken, dass Douglas die Augen größer werden. Aber sie sind auch nicht mehr auf seinem Gesicht zentriert, wie hier gezeigt!

   
   Douglas großen Augen sind aus der Mitte.

3. Hier finden Sie die CSS-Regel für den Arm Klasse.

   .Arm {background # 8208-color: # cacaca-position: absolute-top: 35% -Breite: 5% -Höhe: 40% -}

   Die .arm CSS-Regel steuert die Farbe und die Größe beider Arme.

   Die .arm Regel steuert auch den Abstand der Arme vom oberen Rand des Fensters.

4. Ändern Sie die Breite der Arme auf 3% und dann auf Ausführen geben Douglas dünnen Arme.

5. Hier finden Sie die CSS-Regel für Douglas linken Arm.

6. Fügen Sie Eigenschaften, um die Breite zu ändern, dass sie größer ist als die Höhe.

   Beispielsweise:

   #leftarm {position: absolute-left: 70% -Breite: 27% -Höhe: 5% -}

   Klicken Sie laufen um die Änderung zu sehen. Douglas zeigt nun außerhalb des Bildschirms, wie Sie hier sehen können.

   
   Douglas zeigt!

Im letzten Schritt hinzugefügt Sie eine Breite und Höhe in der Regel mit einer ID-Auswahl, auch wenn das ausgewählte Element hatte bereits eine Höhe und Breite angelegt, um eine Klasse-Selektor.

Auch wenn es bereits eine Breite und Höhe für den linken Arm war, nahm der Arm auf die neue Breite und Höhe von der Regel mit dem ID-Selektor.

Verstehen Kaskadierung

Ein linker Arm des Roboters kann nur eine Breite und Höhe sein. Also, was passiert, wenn zwei verschiedene CSS-Regeln versuchen, separat die Breite und Höhe des Armes zu setzen? Was passiert, ist, dass der Browser einen Wettbewerb zwischen den beiden CSS-Regeln hält.

Der Browser betrachtet Faktoren wie dem CSS-Regel zuletzt gesetzt wurde und welches ist präziser zu bestimmen, welche Breite und Höhe auch tatsächlich genutzt werden.

In diesem Kaskadierung Wettbewerb, ID-Attribute über Klasse gewinnen Attribute, weil sie zu einem einzigen Element einzigartig sind und daher spezifischer als Klassenattribute.

Positionierungselemente mit CSS

Darüber hinaus haben Sie die Möglichkeit zu geben Farben und Darstellung der Elemente in einem Browser zu ändern, auch CSS können Sie, wo auf dem Bildschirm verändern wird ein Element erscheinen. Ändern der Ort, an dem ein Element erscheint genannt wird Positionierung ein Element.

Ändern Sie die Position einiger Douglas Teile:

1. Finden Sie die CSS-Regel, die Douglas rechten Auge steuert.

   #righteye {position: absolute-left: 20% -Top: 20% -}

   Die erste Eigenschaft, die Position, sagt der Browser, wie die spezifischen Standorteigenschaften (wie oben und links) zu interpretieren. Wenn Sie die absolute Positionierung verwenden, kann das ausgewählte Element (das Auge in diesem Fall) überall im Kopf positioniert werden, ohne dass Ihr braucht sich Sorgen zu machen, ob ein anderes Element im Kopf, um ihn aus dem Weg zu schieben wird. Wenn zwei absolut positionierten Elemente an der gleichen Stelle positioniert sind, werden sie einfach überlappen.

   Das rechte Auge wird 20% unter zu zeigen (von der Höhe des Kopfes) von der oberen Kante des Kopfelementes und 20% (der Breite des Kopfes) nach rechts von der linken Kante des Kopfes.

2. Bewegen Sie das rechte Auge nach links und nach oben durch den Wert der beiden Wechsel links und oben auf kleinere Prozentsätze.

   Beispielsweise:

   #righteye {position: absolute-left: 10% -Top: 10% -}

   Klicken Sie auf Ausführen, um die Ergebnisse zu sehen, wie hier gezeigt.

   
   Douglas hob das rechte Auge.