css中的“盘算属性”有哪些

第一本文要讲的运算属性和vue的运算属性没有一点关系。

（引荐教程：CSS教程）

信赖大家开发中碰到过这样的问题：

我设计样式，多用百分比规划，这样在不一样辨论率就不会显现特殊大的偏向，但是也不克不及幸免不适用px等牢固单位，所以当我们父元素分为2部分，头部使用了像素px，但是底部需要剩下所有的大小如何办？弹性盒也确实能解决，但真的没有更好的办法了吗？

再比方说，当我一个元素需要位移，比方我需要居中，但是当父元素没有相对定位，它又不克不及定位居中，设定margin-left:50%也会显现本身宽度的一半的偏向，还得在偏回来，费事。

所以这里给大家介绍一个运算属性：

calc(百分比 - 像素)

示例一：

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

示例二：

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

以上就是css中的“运算属性”是啥的具体内容，更多请关注百分百源码网其它相关文章！