我们在写前端页面的时候，会遇到这样的情况，就是一个div设置宽度100%，设置左右边距10像素，这样的布局，在里面嵌套的div的宽度设置100%，这样写的话，里面的宽度是和外面的宽度一致的，同样是100%的宽度。

而我们想要的就是里面的宽度是100%-20的宽度，很多时候我们会用JS来做，其实我们可以用css来做。

width: calc(100% - 20px);

CSS calc() 函数 ：calc() 函数用于动态计算长度值。

● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

● 任何长度值都可以使用calc()函数进行计算；

● calc()函数支持 "+", "-", "*", "/" 运算；

● calc()函数使用标准的数学运算优先级规则；

css---计算页面的的宽度和长度的更多相关文章

  1. css居然有根据容器宽度自动截取长度加省略号功能，强大!!

    作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newL ...

  2. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  3. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  4. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  5. HTML+CSS实现页面

    使用HTML和CSS实现以下页面: 抽屉首页 个人博客首页 小米官网首页 登录注册页面 一.抽屉首页 1.实现目标:https://dig.chouti.com/ 2.代码: HTML: <!- ...

  6. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  7. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  8. CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除

    CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除 实例: .add{ width: calc(100% - 10px); height: calc(100% - 10p ...

  9. CSS美化页面滚动条

    文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...

随机推荐

  1. Ubuntu安装使用SS客户端上网

    1.安装shadowsocks sudo apt-get install python-pip pip install shadowsocks 以上代码用root执行效果较好 查找shadowsock ...

  2. 微软BI 之SSIS 系列 - Lookup 组件的使用与它的几种缓存模式 - Full Cache, Partial Cache, NO Cache

    开篇介绍 先简单的演示一下使用 Lookup 组件实现一个简单示例 - 从数据源表 A 中导出数据到目标数据表 B,如果 A 数据在 B 中不存在就插入新数据到B,如果存在就更新B 和 A 表数据保持 ...

  3. MDX Cookbook 10 - 计算 Year To Date 的 Running Total(YTD 与 PeriodsToDate 的区别)

    在这个小节中我们将计算度量值的 Year To Date 的值,也就是计算从年开始到当前时间成员为止的度量值的累加结果. 下面的这个查询显示了所有以周为单位的 Reseller Sales Amoun ...

  4. 【转载】js关闭当前页面(窗口)的几种方式总结

    1. 不带任何提示关闭窗口的js代码 复制代码代码如下: <a href="javascript:window.opener=null;window.open('','_self'); ...

  5. 11g新特性-自动sql调优(Automatic SQL Tuning)

    11g新特性-自动sql调优(Automatic SQL Tuning) 在Oracle 10g中,引进了自动sql调优特性.此外,ADDM也会监控捕获高负载的sql语句. 在Oracle 11g中, ...

  6. Android 组件系列-----Activity生命周期

    本篇随笔将会深入学习Activity,包括如何定义多个Activity,并设置为默认的Activity.如何从一个Activity跳转到另一个Activity,还有就是详细分析Activity的生命周 ...

  7. 盒型图(boxplot)

      最近在摆弄数据离散度的时候遇到一种图形,叫做盒图(boxplot).它对于显示数据的离散的分布情况效果不错. 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数 ...

  8. JAVA和JAVAC 命令行

    转自:http://www.blogjava.net/pdw2009/archive/2008/06/12/207413.html?opt=admin javac和java命令行中的-classpat ...

  9. Linux内核修炼之framebuffer分析

    Linux源代码包中/document/fb/framebuffer.txt有例如以下介绍: The frame buffer device provides an abstraction for t ...

  10. 物联网架构成长之路(3)-EMQ消息服务器了解

    1. 了解 物联网最基础的就是通信了.通信协议,物联网协议好像有那么几个,以前各个协议都有优劣,最近一段时间,好像各大厂商都采用MQTT协议,所以我也不例外,不搞特殊,采用MQTT协议,选定了协议,接 ...