css中的“计算属性”是什么

王林
Freigeben: 2020-09-14 11:32:44
nach vorne
2242 Leute haben es durchsucht

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; }
Nach dem Login kopieren

示例二:

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

Das obige ist der detaillierte Inhalt voncss中的“计算属性”是什么. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
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
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!