例如:

  .element{
width:calc(expression);
}

兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持,但是在移动端的支持不是很好。

其中,expression是一个用来计算长度的表达式,支持“+”,“-”,“*”,“/”运算符。

表达式中有“+”,“-”运算符的,前后必须要有空格,例如 “width:calc(100% - 20px)”这种写法;而对于“*”,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格。

总结 :

1.兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+支持较好,移动端支持不理想;

2.表达式支持加、减、乘、除运算,同时也支持单位的混合使用(%、px、em等);

3.表达式中有“+”,“-”运算符的,前后必须要有空格。

参考原文地址:http://www.cnblogs.com/dan-dan/p/4589616.html

css盒模型宽高混合计算calc的更多相关文章

  1. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  2. 浅谈css盒模型

    在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model).使用Chrome的右键>审查元素对某个网页上的元素 ...

  3. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  4. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  5. CSS盒模型(Box Model)

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  6. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  7. CSS盒模型的介绍

    CSS盒模型的概念与分类      CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...

  8. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

  9. 来谈谈你对CSS盒模型的认识?

    任何一个网页的搭建都离不开盒模型的堆砌.应该说css模型是web的一个根基,最后呈现出来的效果不同无非就是在高宽.内容与背景删的区别而已. 那么CSS模型有什么认识的呢? 首先,css盒模型有几种呢? ...

随机推荐

  1. java基础学习笔记六(继承)

    继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父 ...

  2. 【leetcode】421. Maximum XOR of Two Numbers in an Array

    题目如下: 解题思路:本题的难点在于O(n)的复杂度.为了减少比较的次数,我们可以采用字典树保存输入数组中所有元素的二进制的字符串.接下来就是找出每个元素的异或的最大值,把需要找最大值的元素转成二进制 ...

  3. PHP curl_reset函数

    curl_reset— 重置libcurl会话句柄的所有选项. 说明 void curl_reset ( resource $ch ) 该函数将重新初始化cURL的所有选项值(默认值). 注意:cur ...

  4. 【LeetCode 38】报数

    题目链接 [题解] 模拟题 [代码] class Solution { public: string inttostr(int x){ string temp=""; while ...

  5. springcloud的config

    CONFIG服务端 加入依赖: <dependency> <groupId>org.springframework.cloud</groupId> <arti ...

  6. vue常见面试题

    什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...

  7. HBase 入门之数据刷写(Memstore Flush)详细说明

    接触过 HBase 的同学应该对 HBase 写数据的过程比较熟悉(不熟悉也没关系).HBase 写数据(比如 put.delete)的时候,都是写 WAL(假设 WAL 没有被关闭) ,然后将数据写 ...

  8. 力扣算法题—147Insertion_Sort_List

    Sort a linked list using insertion sort. A graphical example of insertion sort. The partial sorted l ...

  9. 一张图搞清楚Java异常机制

    下面是Java异常类的组织结构,红色区域的异常类表示是程序需要显示捕捉或者抛出的. Throwable Throwable是Java异常的顶级类,所有的异常都继承于这个类. Error,Excepti ...

  10. python 根据字典的键值进行排序

    1.利用key排序 d = {'d1':2, 'd2':4, 'd4':1,'d3':3,} for k in sorted(d): print(k,d[k]) d1 2d2 4d3 3d4 1 2. ...