我们在写前端页面的时候，会遇到这样的情况，就是一个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. Openstack配置文件管理的变迁之路

    在管理一个Openstack集群时,如何维护配置文件无疑是其中最艰难和繁琐的任务之一.因为你不仅要面对众多的核心服务(nova,keystone,glance,cinder,etc)的配置文件,还需要 ...

  2. Abp zero 示例运行

    https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Core Introduction The easiest wa ...

  3. JS代码把JSON字符串转换为对象，计算对象的长度并把它转换为数字类型，把转换的值相加减

    Number(JSON.parse(rowObject.RenewalProperty).length)-1

  4. 【Java】关于MyBatis框架的总结

    最近在学习MyBatis框架,我在这里记录一下学习MyBatis过程中的心得体会. Mybatis是什么?使用它我们可以做什么? MyBatis是一个开源的数据持久层框架,它内部封装了通过JDBC访问 ...

  5. Python之道（一）之安装Python

    "Python之道"首先介绍一下在windows系统下怎样安装Python开发环境. (1)下载MSI安装文件 进入网址www.python.org,点击Downloads进入下载 ...

  6. html元素不可见的三种方式

    html中使元素不可见有三种方法: 使用hidden属性 使用style中的display=none 使用style中的visibility=false 显然,使元素不可见有两类方式: 元素彻底不可见 ...

  7. UnDistracted for Mac（集中注意力辅助工具）破解版安装

    1.软件简介    UnDistracted 是 macOS 系统上一款可以帮助我们集中注意力的辅助工具,让我们在 mac 电脑上工作更加集中注意力,提高工作效率,隐藏所有文件或是文件夹窗口.隐藏所有 ...

  8. GraphQL，你准备好了么？

    一个多月前,facebook 将其开源了一年多的 GraphQL 标记为 production ready ( http://graphql.org/blog/production-ready/ ), ...

  9. Socket网络编程--简单Web服务器(3)

    上一小节已经实现了浏览器发送请求,然后服务器给出应答信息,然后浏览器显示出服务器发送过来的网页.一切看起来都是那么的美好.这一小节就准备实现可以根据地址栏url的不同来返回指定的网页.目前还不考虑带参 ...

  10. 我的Android进阶之旅------&gt;Android 关于arm64-v8a、armeabi-v7a、armeabi、x86下的so文件兼容问题

    Android 设备的CPU类型通常称为ABIs 问题描写叙述 解决方法 1解决之前的截图 2解决后的截图 3解决方法 4建议 为什么你须要重点关注so文件 App中可能出错的地方 其它地方也可能出错 ...