【译转】快速概述的CSS calc()

时间:2014-11-17 13:08:49 浏览:862次

    讲到网站建设我们第一想到的往往就是DIV+CSS建站模式,CSS建站不论是在兼容上还是由其SEO优化上都是不错的选择。之前笔者小丹分享过很多关于CSS的文章,多是在CSS建站的各个局部命令执行上。今天依然如此,不过分享的是CSS的执行样式:CSS calc()。

    首先,我们要知道CSS calc()属性表达式允许我们在样式表执行简单的计算。下面是我们常见到的应用比较广泛的规则集展示CSS的使用calc():


    .container {
                height: calc(100% - 50px);
                width: calc(100% - 40px);
                }

    正如你所看到的在上面的例子中,CSS calc()属性表达式允许我们动态地计算结果之间的减两个CSS长度值正确的样式表不使用JavaScript,即使不共享相同的单位长度值。

    CSS calc()属性表达式中,在我们只能用CSS进行算术计算 calc():

    加(+)

    减(-)

    乘法(*)

    除法(/)

    在Css calc()适用于许多类型的数值CSS值:

    长度

    时间
 
    角

    频率

    没有单位的整数和数字

    还有就是,Css calc()不能使用CSS颜色值、CSS和其他类型的值。

    用例

    CSS的价值 calc()很快可以看到当我们执行数学计算与不同的CSS数值单位,时变得更加有用的值是一个相对和固定单位的混合物。

    那么就让让我们先来谈一个实例,我们不应该使用 calc()属性表达式。

    反例

    /* Do not do this! */
    div {
         width: calc(600px / 2);
        }

    在上面的样式规则中,我们执行计算就可以很容易地做自己。以便我们的CSS是更具可读性,并避免不必要的浏览器计算,可以减缓我们的网页,如果我们拿出一个真正的计算器和做数学自己:

    div{
        width: 300px;
       }

    那么,在哪里使用CSS calc()?

    Css calc()成为一个伟大的资产的单位是一个相对单位,另一个则是固定的。这种谈判的能力在不同的CSS网页设计单位尤其精彩的敏感。

    下面的一个例子为中心的容器,总有20 px利润在其左和右,无论屏幕尺寸:

    .container {
                margin: 0 auto;
                width: calc(100% - 40px);
               }

    视图的例子

    在这个用例的CSS calc()中我们能够占据一个垂直滚动条,确保可读性安慰我们的内容不管使用什么设备。流体容器归心这种方法只需要最小的CSS和HTML。其他响应设计技术实现相同的结果需要更多的代码,并且可能需要之类负利润、媒体查询和不相干的嵌套的HTML容器元素。

    规范的地位

    CSS的规范calc()描述的是W3C CSS值和单位模块3,这个模块是在W3C候选推荐标准(CR)状态,这意味着它是两个层次被终结。

    记住现在CSS calc()是三个CSS功能模块中挑出的规格是被下降的危险。

    The following features are at-risk and may be dropped during the CR period: ‘calc()’, ‘toggle()’, ‘attr()’.

    浏览器支持

    目前CSS calc()在大约82%的浏览器支持在Web上使用数据显示从caniuse.com。Internet Explorer 9部分支持CSS calc()以及后续版本的浏览器有完整的功能支持。

    (转载请注明转自:www.wangzhan.net.cn,谢谢!珍惜别人的劳动成果,就是在尊重自己!)

上一篇:整合营销下的SEO优化排名策略

下一篇:防止网站内部搜索被他人恶意利用

返回列表

网站建设知识

品牌创意网站建设 上市公司网站建设 大型门户类网站建设 全方位网站运营代理
企业官方网站建设 B2C电子商务网站建设 专题活动网站(MINISITE)

更多 +联系我们

24小时服务热线:400-1180-360

业务 QQ:  444961110传真: 0311-80979256

渠道合作:  444961110@qq.com

更多 +关于我们

河北供求互联信息技术有限公司(河北供求网)诞生于2003年4月,是康灵集团旗下子公司,也是河北省首批从事网站建设、电子商务开发,并获得国家工业和信息化部资质认证的企业。公司自成立以来,以传播互联网文化为已任, 以高科技为起点,以网络营销研究与应用为核心,致力于为各企事业单位提供网络域名注册、虚拟主机租用、网站制作与维护、网站推广和宣传、网站改版与翻译、移动互联网营销平台开发与运营、企业邮局、网络支付、系统集成、软件开发、电子商务解决方案等优质的信息技术服务,与中国科学院计算机网络信息中心、腾讯、百度、阿里巴巴、搜狗、360、电信、联通、中国数据、万网、中资源、阳光互联、点点客、北龙中网、电信通等达成战略合作伙伴关系。

版权所有 © 河北供求互联信息技术有限公司-优秀的石家庄网站建设公司,为您提供石家庄网站建设、网站推广等优质服务.   
服务热线:400-1180-360 传真:0311-80979256 增值电信业务经营许可证:冀B2-20105159 冀ICP备09010972号

在线留言
免费试用
扫一扫

扫一扫
赠送神秘大礼

全国免费服务热线
400-1180-360

返回顶部