css3 calc会计算的属性

SegmentFault 发布于2019-08-01 15:57 / 1757人阅读

摘要：是英文单词计算的缩写，是的一个新增的功能，你可以使用给元素的和等属性设置动态值。可以使用数学运算中的简单加减乘和除来解决问题，而且还可以根据单位如和百分比来转化计算。注意在写表达式中右侧要有空格，否则这行代码无效。这是浏览器支持情况。

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。

注意在写calc表达式中

width: calc(50% - 20px);

-右侧要有空格，否则这行代码无效。

这是calc浏览器支持情况。

例子：必须使用设置百分比页面同时又有margin时，会出现不够满挤到下一行的情况，所以要用到calc重新计算百分比

@media screen and (min-width:768px){
    .col-sm-1{
        width: calc(8.1% - 20px);
    }
    .col-sm-2{
        width: calc(16.7% - 20px);
    }
    .col-sm-3{
        width: calc(25% - 20px);
    }
    .col-sm-4{
        width: calc(33.3% - 20px);
    }
    .col-sm-6{
        width: calc(50%- 20px);
    }
    .col-sm-12{
        width: calc(100% - 20px);
    }
}

私有云 idc机房托管 calc Calces java 中calc 按天算的云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50223.html

纯css实现容器高度随宽度等比例变化的四种解决方案

摘要：除了增加了一个结构，但是相对与一个页面成百上千的代码来说，不值一提我们知道，容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度高度。使用一个隐藏的图片来实现这个方法是我最推荐的，因为不需要考虑任何兼容性，PC移动完美运行。除了增加了一个dom结构，但是相对与一个页面成百上千的代码来说，不值一提我们知道...

vslam 2019-08-29 11:09 评论0 收藏0
響應式設計中百分比 % 的問題

摘要：響應式自適應響應式和自適應設計共同點都是要處理在不同裝置下瀏覽網頁的問題，可讀性，版型等等。關於由於我們仍會在的設計中使用百分比，如此一來或多或少還是會受到進位誤差的影響，因此並不是佈局的萬能藥。 showImg(https://segmentfault.com/img/remote/1460000006786975); 問題為了要能夠解釋得更清楚我們需要實作一小段跟我們會遇到的問題...

wangym 2019-08-30 13:02 评论0 收藏0
CSS基础篇--CSS3 calc实现滚动条出现页面不跳动

摘要：不过最大的好处就是用在流体布局上，可以通过计算得到元素的宽度。于是，就是浏览器滚动条的宽度大小如果有，如果没有滚动条则是左右都有一个滚动条宽度或都是被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动参考的使用什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来...

894974231 2019-08-30 13:45 评论0 收藏0
WEB前端资源代码：CSS篇

摘要：误区注意只是动态分配父元素的剩余空间，而不是整个父元素的空间。默认值如果项目未设置高度或设为，将占满整个容器的高度。负值对该属性无效。高像素密度设备相应放大，像素密度设备相应缩小。css3新单位vw、vh、vmin、vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那...

番茄西红柿 2019-04-23 13:15 评论0 收藏0
CSS题目及答案整理

摘要：解决方案为加上使其形成，根据规则第六条，计算高度时就会计算的元素的高度，达到清除浮动影响的效果。并为这个外层元素设置，使其形成。生成相对定位的元素，相对于其正常位置进行定位。它的所有子元素自动成为容器成员，称为项目，简称项目。原文链接在这里 CSS 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有两种， IE 盒子模型（相当于box-sizing: bor...

lijy91 2019-08-29 12:34 评论0 收藏0