What is a 'computed property' in css

First of all, the calculated properties that this article will talk about have nothing to do with vue’s calculated properties.

(Recommended tutorial: CSS tutorial)

I believe everyone has encountered such a problem during development:

I design styles and mostly use percentage layout. In this way, there will not be particularly large deviations at different resolutions, but it cannot avoid not applying fixed units such as px. Therefore, when our parent element is divided into two parts, the head uses pixels px, but the bottom needs to leave all the size what to do? Flexbox can indeed solve it, but is there really no better way?

For another example, when I need an element to be displaced, for example, I need to center it, but when the parent element is not relatively positioned, it cannot be positioned and centered. Setting margin-left:50% will also appear to be half of its own width. The deviation has to be reversed, which is troublesome.

So here is a calculated property for you:

calc(percent - pixel)

Example one:

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

Example two:

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

The above is the detailed content of What is a 'computed property' in css. For more information, please follow other related articles on the PHP Chinese website!