我们在写前端页面的时候，会遇到这样的情况，就是一个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. 混沌的艺术--- YChaos通过数学公式生成混沌图像

    艺术真得很难吗?也许如同编程一样容易.我写了一套软件,其功能是通过输入数学方程式,生成艺术图像.一提到数学有人可能会发怵,这里请不要担心,生成混沌的数学公式大都很是简单,基本上只用加.减.乘.除.余. ...

  2. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  3. logback身份证脱敏

    logback身份证脱敏 学习了:https://shift-alt-ctrl.iteye.com/blog/2425469 https://blog.csdn.net/fywfengyanwei/a ...

  4. WIN10平板 总是提示你需要管理员权限怎么办

    例如在往C盘拷贝文件的时候,会出现下面的提示,虽然点击继续也可以执行,但是还是非常麻烦   WIN+R,打开组策略   在Windows设置-安全设置-安全选项中,找到用户账户控制,设置为已禁用,应用 ...

  5. 浅谈常用的几种web攻击方式

    一.Dos攻击(Denial of Service attack) 是一种针对服务器的能够让服务器呈现静止状态的攻击方式.有时候也加服务停止攻击或拒绝服务攻击.其原理就是发送大量的合法请求到服务器,服 ...

  6. gcc/g++ disable warnings in particular include files

    当在编译一个大项目的时候,你想打开所有的Warning,但是打开后发现一堆公共库文件都出现了warning报错.此时如果你想忽略公共库头文件中的warning报错,只需要在编译的时候,将公共库头文件的 ...

  7. WCF兼容WebAPI输出Json格式数据，从此WCF一举两得

    问题起源: 很多时候为了业务层调用(后台代码),一些公共服务就独立成了WCF,使用起来非常方便,添加服务引用,然后简单配置就可以调用了. 如果这个时候Web站点页面需要调用怎么办呢? 复杂的XML , ...

  8. System Monitor for Mac（系统监控工具）破解版安装

    1.软件简介    System Monitor 是 macOS 系统上的一款非常实用的 Mac 系统工具,System Monitor for mac 是一款六合一应用,您可以同时获得 CPU.RA ...

  9. cmd命令中截取日期字符

    %date:~0,10% 表示年份    

  10. LeetCode OJ 238. Product of Array Except Self 解题报告

        题目链接:https://leetcode.com/problems/product-of-array-except-self/ 238. Product of Array Except Se ...