css之calc,CSS之calc()

calc() 函数支持任意CSS长度单位的混合计算，遵循标准数学运算优先级规则，可以动态计算长度值。注意，calc()函数内部的运算符两侧各加一个空白符，否则会产生解析错误。

calc()使用的难点在于百分比，理解了百分比定位，使用calc()就非常便捷。譬如以background-position中使用为例。

将背景图片偏移距离底部10px

可以采用采用关键字的形式

.container {

width: 700px;

height: 400px;

background-color: #ccc;

margin: 0 auto;

background-image: url(./images/1.jpg);

background-size: contain;

background-repeat: no-repeat;

/* 核心代码 */

background-position:left 0 bottom 10px;

}

也可以采用calc()函数实现：

.container {

width: 700px;

height: 400px;

background-color: #ccc;

margin: 0 auto;

background-image: url(./images/1.jpg);

background-size: contain;

background-repeat: no-repeat;

/* 核心代码 */

background-position: 0 calc(100% - 10px);

}

实现效果

利用CSS函数calc(...)实现Web页面左右布局

前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

在Electron运行的页面使用CSS的calc导致应用卡死

这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: