举个例子ul li适配屏幕,如果加个border:1px,不用border-content得情况下,每个li多加了2px:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<style>

ul{
  width:100%
  list-style:none
}

ul li{
    width:(calc:25% -2px);
  list-style-type:none;
  float:left
  border:1px #ddd solid;
  height:15px
}

</style>

效果:

CSS也能计算:calc的更多相关文章

  1. 原来css也可以计算-calc()使用

    在浏览其他人的源代码时,看到了一个陌生的属性:width:calc(100% - 10px -10px); 出于好奇心,百度了一下,看到了以下这篇文章,http://www.w3cplus.com/c ...

  2. CSS当中数学表达式calc

    CSS当中数学表达式calc  数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容 定义 数学表达式calc ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 计算(calc.cpp)

    计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有“(”,“)”,“0-9”,“+”,“-”,“*” ...

  5. 计算(calc.cpp) 这题我搞了2晚上qwq

    终于会了!可喜可贺!可喜可贺!   计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有“(”,“)” ...

  6. 计算(calc)

    计算(calc) [题目描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有"(",")",& ...

  7. css盒模型宽高混合计算calc

    例如: .element{ width:calc(expression); } 兼容性:在IE9+.FF4.0+.Chrome19+.Safari6+都得到了较好支持,但是在移动端的支持不是很好. 其 ...

  8. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  9. css的新特性 calc () 使用

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

随机推荐

  1. FormData/Go分片/分块文件上传

    FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接.如果送出时的编码类型被设为 & ...

  2. 还是只使用console.log()进行调试?好吧,其实还有更多。

    在浏览器控制台中打印消息无疑可以拯救所有开发人员. console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题. 那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解 ...

  3. mysql字段数据类型、设置严格模式

    表操作 今日内容 1.数据类型 建表的时候,字段都有对应的数据类型 整型 浮点型 字符类型(char与varchar) 日期类型 枚举与集合 2.约束条件 primary key unique key ...

  4. Codeforces Add on a Tree

    Add on a Tree time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  5. [leetcode] 位操作题解-2

    本文是 leetcode 位操作题库的题目解析.点击每个标题可进入题目页面. 重复的DNA序列 题目:所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:"ACGAATT ...

  6. jsonp跨域的原理及实现

    1,什么是跨域? 跨域跨域,跨过域名,笼统来说就是一个域名区请求另外一个域名的数据,但实际上,不同端口.不同域名.不同协议上请求数据都会出现跨域问题.浏览器出于安全考虑会报出异常,拒绝访问. 2,js ...

  7. 白嫖Office365

    写作不易,资瓷一下呗!个人博客:https://raycoder.me 最近系统升级到1909, 送了我一套Office365. 我也很无奈啊, 送了让我激活也是够了... 用了各种激活软件都无效,比 ...

  8. JAVA研发面试题

    转自:http://www.jianshu.com/p/1f1d3193d9e3 Java基础的知识点推荐<Java编程思想>,JVM的推荐<深入理解Java虚拟机>,Spri ...

  9. Spring Cache 缺陷,我好像有解决方案了

    Spring Cache 缺陷 Spring Cache 是一个非常优秀的缓存组件. 但是在使用 Spring Cache 的过程当中,小黑同学也遇到了一些痛点. 比如,现在有一个需求:通过多个 us ...

  10. 解决ASP.NET MVC返回的JsonResult 中 日期类型数据格式问题,和返回的属性名称转为“驼峰命名法”和循环引用问题

    DateTime类型数据格式问题 问题 在使用ASP.NET MVC 在写项目的时候发现,返回给前端的JSON数据,日期类型是 Date(121454578784541) 的格式,需要前端来转换一下才 ...