Was ist eine „berechnete Eigenschaft' in CSS?

Erstens haben die berechneten Eigenschaften, über die in diesem Artikel gesprochen wird, nichts mit den berechneten Eigenschaften von Vue zu tun.

(Empfohlenes Tutorial: CSS-Tutorial)

Ich glaube, Sie sind während der Entwicklung auf dieses Problem gestoßen:

Ich entwerfe Stile und verwende hauptsächlich prozentuales Layout, damit es bei verschiedenen Auflösungen nicht zu besonders großen Abweichungen kommt, aber auch Es Es ist unvermeidlich, keine festen Einheiten wie px anzuwenden. Was ist also, wenn unser übergeordnetes Element in zwei Teile geteilt ist und der Kopf Pixel px verwendet, der untere jedoch die gesamte verbleibende Größe haben muss? Flexbox kann das Problem tatsächlich lösen, aber gibt es wirklich keinen besseren Weg?

Wenn ein Element beispielsweise verschoben werden muss, muss ich es zentrieren, aber wenn das übergeordnete Element nicht relativ positioniert ist, kann es auch nicht positioniert und zentriert werden Eine Abweichung von der Hälfte seiner eigenen Breite muss zurückkommen, lästig.

Hier ist also eine berechnete Eigenschaft für Sie:

calc(Prozent - Pixel)

Beispiel 1:

// 父元素
.box{
    width:100%;
    height:100;
}
// 子元素左边
.boxLeft{
    width:50px;
    height:100%;
}
// 子元素右边
.boxRight{
    width:calc(100% - 50px);
    height:100;
}

Beispiel 2:

// 需要居中的盒子
.box{
    width:500px;
    height:400px;
    margin-left:calc(50% - 250px);
    margin-top:calc(50% - 200px);
}

Das obige ist der detaillierte Inhalt vonWas ist eine „berechnete Eigenschaft' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!