Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Zusammenfassung des allgemeinen Wissens in CSS-Projekten

高洛峰
Freigeben: 2017-02-13 14:25:09
Original
1122 Leute haben es durchsucht

1. div+css-Layout

1.css horizontale und vertikale Zentrierung

Methode 1: Die kompatibelste Methode

.box{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: #eee;
    }
Nach dem Login kopieren

Methode 2: CSS3-Transformationsattribute

.box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: #eee;
    }
Nach dem Login kopieren

Methode 3: Nur Flex IE11 unterstützt die Verwendung von mdn zum Anzeigen der Kompatibilitäts- und Anwendungsbeispiele von Attributen

display: flex; Stellen Sie den übergeordneten Container auf eine flexible Box ein. flex-direction: row ; Definition Die flexiblen Elemente des übergeordneten Containers werden auf der Hauptachse angeordnet.
justify-content: center definiert die Anordnung der flexiblen Elemente auf der Hauptachse X, die hauptsächlich für horizontal zentrierte Textausrichtungselemente verwendet wird:
center; definiert die Anordnung der flexiblen Elemente auf der Y-Seitenachse. Die Anordnungsmethode wird hauptsächlich für vertikal zentrierten mehrzeiligen Text verwendet.

.box-wrapper{        width: 1000px; /*需要给父容器设置宽高*/
        height: 1000px;        background-color: #e9e9e9;        display: flex; /*设置父容器为弹性盒子*/
        justify-content: center; /*定义弹性项目在主轴X的排列方式,主要用于水平居中文字*/
        align-items: center; /*定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字*/
    }
    .box{        width: 200px; /*弹性盒子的项目*/
        height: 200px;        background-color: #eee;    }
Nach dem Login kopieren

Weitere Artikel zur Zusammenfassung allgemeiner Kenntnisse in CSS-Projekten finden Sie hier Achtung auf die chinesische PHP-Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!