css之“计算属性“

no，no，no，这和vue的计算属性没有一点关系，所以这次介绍的也和vue无关。

相信大家和我一样，在开发中，也遇到过这样的问题：

我设计样式，多用百分比布局，这样在不同分辨率就不会出现特别大的偏差，但是也不能避免不适用px等固定单位，所以当我们父元素分为2部分，头部使用了像素px，但是底部需要剩下所有的大小怎么办？弹性盒也确实能解决，但真的没有更好的方法了吗？

再比如说，当我一个元素需要位移，比如我需要居中，但是当父元素没有相对定位，它又不能定位居中，设置margin-left:50%也会出现本身宽度的一半的偏差，还得在偏回来，麻烦。

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

calc(百分比 - 像素)

示例一：

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

示例2：

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

友情提示：注意加空格百分比和像素和减号之间

好了，以上就是简单的介绍，当然它的用途还不止于此，需要大家慢慢去了解。

计算属性一时爽，一直计算，一直爽。

如有问题，请指出，接受批评。

个人微信公众号：

css之“计算属性“相关推荐

css calc 计算属性值
css calc 计算属性值 definition The calc() CSS function lets you perform calculations when specifying CSS ...
cal css,CSS calc计算属性
calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border.margin.pading.font-size和width等属性动态的设置值. calc()语法 ...
css 计算属性的应用_如何使用一点CSS Grid魔术设计计算器应用
css 计算属性的应用 by Deepika Gunda 由Deepika Gunda 如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid ma ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
CSS 计算属性 calc()的完整指南（下）
从之前的文章:CSS 计算属性 calc()的完整指南(一),我们可以学习到几个方面: calc() 只作用于属性值 calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
vue从创建到完整的饿了么（5）v-for，v-bind与计算属性
说明 1.上一章--Home.vue及vue-resource使用 2.cangdu大神的项目源码地址--Github地址 3.接口地址--Github地址 4.UI框架用的是--Mint UI 5. ...
vue 02-上计算属性、样式的操作，指令（含自定义,全局和局部）
计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行典型案例todolistcomputed:{计算属性: function(){return 返回值} 使用: {{计算属性}}}与metho ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...

css之“计算属性“

css之“计算属性“相关推荐

最新文章

热门文章