我们在写前端页面的时候，会遇到这样的情况，就是一个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. 290.单词模式。给定一种 pattern(模式) 和一个字符串 str ，判断 str 是否遵循相同的模式。（c++方法）

    题目描述: 给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之 ...

  2. android：如何通过自定义工程模板让新建的工程都默认支持lambda表达式

    首先参考这篇文章:自定义Android Studio工程模板,了解如何自定义模板   然后结合我们上一篇文章 android: 在android studio中使用retrolambda的步骤的要点, ...

  3. [Java] Hashtable 源码简要分析

    Hashtable /HashMap / LinkedHashMap 概述 * Hashtable比较早,是线程安全的哈希映射表.内部采用Entry[]数组,每个Entry均可作为链表的头,用来解决冲 ...

  4. [Python设计模式] 第10章 怎么出试卷?——模版方法模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 小时候数学老师的随堂测验,都是老师在黑板上写题目,学生在下边抄,然后再做题 ...

  5. 微软BI 之SSRS 系列 - 如何让报表在一页显示，两种常用的技巧

    通常情况下,SSRS 报表在页面内容过多的时候会自动分页.但有的时候当页面内容不是很多,大概最多2页的情况下,或者客户要求所有内容必须在一页显示时,应该如何设置. 实际上,要考虑两种情况:第一种情况是 ...

  6. Duplicate复制数据库并创建物理StandBy（pfile版本）

    1设定环境如下: Primary数据库 IP 172.17.22.16 SID orcl Standby数据库 IP 172.17.22.17 SID orcl 设置提示,以区分操作的位置 prima ...

  7. Mysql 8 常用命令测试

    1.创建数据库,帐号及授权 create database testdb; CREATE USER 'rusking'@'%' IDENTIFIED BY '12345678'; CREATE USE ...

  8. 【C#】详解C#序列化

    目录结构: contents structure [+] 简介 控制序列化和反序列化 特性(OnSerializing.OnSerialized.OnDeserializing.OnDeseriali ...

  9. Nginx 设置域名转向配置

    #运行用户 #user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processes 2; #全局错误日志及PID文件 error_log logs/error.lo ...

  10. Effective Java 第三版——56. 为所有已公开的API元素编写文档注释

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...