Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS-CSS-Tutorial-php.cn

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS

WBOY

Freigeben： 2021-12-22 18:32:08

Original

1774 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über das CSS-Positionierungslayout. Werfen wir einen Blick auf die relative Positionierung, die absolute Positionierung und die feste Positionierung, die verschiedenen Elementeigenschaften und -verwendungen usw. Wir hoffen, dass er für alle hilfreich ist.

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS

1. Relative Positionierung

1.1) Was ist relative Positionierung?

Relative Positionierung: Die Box kann entsprechend ihrer ursprünglichen Position positioniert werden (implementiert durch Positionsdeskriptoren).

Positionsbeschreibungen:
nach rechts bewegen; nach links bewegen; nach unten bewegen; (Wenn der Wert darin eine negative Zahl ist, bewegen Sie sich in die entgegengesetzte Richtung)

Zum Beispiel:

Original:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style></head><body>
    <p>
    	<p></p>
    </p></body></html>

Nach dem Login kopieren

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS p auf relative Positionierung setzen:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

Nach dem Login kopieren

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS

1.2) Eigenschaften und Verwendungen der relativen Positionierung

Eigenschaften

Verwenden

Zum Beispiel:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 780px;
            height: 50px;
            margin: 40px auto;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            float: left;
            width: 156px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        nav ul li a {
            display: block;
            width: 156px;
            height: 50px;
            background-color: lightcyan;
            color: #000;
            text-decoration: none;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
        }
    </style></head><body>
    <nav>
        <ul>
            <li>
                <a href="#">导航一</a>
            </li>
            <li>
                <a href="#">导航二</a>
            </li>
            <li>
                <a href="#">导航三</a>
            </li>
            <li>
                <a href="#">导航四</a>
            </li>
            <li>
                <a href="#">导航五</a>
            </li>
        </ul>
    </nav></body></html>

Nach dem Login kopieren

Der Effekt zu diesem Zeitpunkt ist wie folgt Folgendes:

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS Sie werden Folgendes finden: Wenn die Maus darüber schwebt, sinkt der Navigationsbereich. Nachdem wir die relative Positionierung dafür festgelegt und eine Feinabstimmung vorgenommen haben:

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

Nach dem Login kopieren

Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS Damit wird das Problem gerade gelöst

2. Absolute Positionierung

2.1) Was ist absolute Positionierung

Absolute Positionierung: Die Box beschreibt ihre Position mit Koordinaten und hat eine eigene absolute Position.

Absolut positionierte Referenzbox: Eine absolut positionierte Box verwendet die nächstgelegene Box mit Positionierungsattributen unter ihren Vorgängerelementen als Referenzpunkt.

Dieses Kästchen ist normalerweise relativ positioniert, daher wird es auch „das Aussehen des Vaters des Sohnes“ genannt.

Positionsbeschreibungen: links: Abstand nach rechts; oben: Abstand nach oben; unten: Abstand nach unten rrree

2.2) Absolute Positionierung Die Eigenschaften und die Verwendung von

absolut positionierten Kisten sind vertikal zentriert:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style></head><body>
    <p class="box">
    </p></body></html>

Nach dem Login kopieren

absolut positionierte Kisten sind horizontal zentriert:

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

Nach dem Login kopieren

stacking Order Z-Index-Attribut

ist eine positive Ganzzahl ohne Einheiten. Größere Werte können kleinere Werte unterdrücken (dh größere Werte werden auf der oberen Ebene angezeigt). folgt:

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}
Nach dem Login kopieren
 Zu diesem Zeitpunkt legen wir ein Z-Index-Attribut fest, wenn Box1 auf der oberen Ebene angezeigt werden soll.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: antiquewhite;
        }

        .box2 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 200px;
            background-color: lightblue;
        }
    </style></head><body>
    <p class="box1"></p>
    <p class="box2"></p></body></html>

Nach dem Login kopieren

Sehen Sie sich den Effekt an:

Verwendung

Absolute Positionierung wird verwendet, um den Effekt zu „abdecken“ und zu „maskieren“ Es kann in Kombination mit CSS-Sprites verwendet werden Eingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS Es kann mit JS kombiniert werden, um Erzielen Sie einige Animationen

Feste Positionierung: Unabhängig davon, wie die Seite gescrollt wird, wird die Seite immer als Referenzpunkt verwendet und dort fixiert.

Positionsbeschreibungen:

links: Abstand nach rechts; oben: Abstand nach oben; unten: Abstand nach unten

<br/>

Nach dem Login kopieren

3.2) Die Art und Verwendung der festen Positionierung

Ja Wird verwendet, um zu erkennen, dass einige Elemente immer vor dem aktuellen Fenster angezeigt werden sollten, z. B. die Schaltfläche „Zurück zum Anfang“ beim Durchsuchen einer Seite, die immer an einer bestimmten Position auf der aktuellen Seite angezeigt wird. Zum Beispiel:

.box1 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: antiquewhite;
    z-index: 100;}.box2 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-color: lightblue;
    z-index: 1;}

Nach dem Login kopieren

Der Effekt ist wie folgt: Wenn die Seite den unteren Rand erreicht Wenn , bleibt die Position der Schaltfläche „Zurück nach oben“ in der unteren rechten Ecke unverändert.

Bei Interesse können Sie weiterhin Folgendes besuchen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEingehende Analyse und Verständnis der Details der Positionierung und des Layouts in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!