我们在写前端页面的时候，会遇到这样的情况，就是一个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. python 获取前一天或前N天的日期

    简单实现 import datetime # 获取前1天或N天的日期,beforeOfDay=1:前1天:beforeOfDay=N:前N天 def getdate(self,beforeOfDay) ...

  2. OAuth 2和JWT - 如何设计安全的API？

    OAuth 2和JWT - 如何设计安全的API? Moakap译,原文 OAuth 2 VS JSON Web Tokens: How to secure an API 本文会详细描述两种通用的保证 ...

  3. webapi帮助文档swagger

    nuget安装Swashbuckle包 修改SwaggerConfig文件 //c.IncludeXmlComments(GetXmlCommentsPath()); //设置接口描述xml路径地址 ...

  4. 摄像专用的SD卡推荐

      此类SD卡主要需要满足快速写入:特别对于4K的支持,速度要有很高才能满足. 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论

  5. spring cloud配置中心属性加密处理

    在现实的场景里,我们会在配置中心配置很多中间件的账号密码(通常都是读写账号),如果采用明文存储将会有很大的风险导致账号泄露,解决方案: http://blog.didispace.com/spring ...

  6. windows10多桌面创建 切换 和分屏

    windows键+Tab 可以创建和切换新的桌面 win+ctrl+左右箭头 可以切换桌面 Aero Snap是Win7时代增加的一项窗口排列功能,俗称“分屏”.一个最简单例子,就是当你把窗口拖至屏幕 ...

  7. 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...

  8. OpenCV 学习笔记 07 目标检测与识别

    目标检测与识别是计算机视觉中最常见的挑战之一.属于高级主题. 本章节将扩展目标检测的概念,首先探讨人脸识别技术,然后将该技术应用到显示生活中的各种目标检测. 1 目标检测与识别技术 为了与OpenCV ...

  9. MySQL 清除从库同步信息

    实际的业务生产系统中,mysql从库有时候会根据实际需求变更为主库,这时候我们需要清除掉从库配置的主从信息登录从库执行以下命令:mysql> stop slave;mysql> reset ...

  10. Python验证码识别 安装Pillow、tesseract-ocr与pytesseract模块的安装以及错误解决

    1.安装Pillow pip install Pillow 2.安装tesseract-ocr OCR(Optical Character Recognition, 光学字符识别) 软件 安装包含两个 ...