calc() 是一个css 函数, 可以实现.计算

----------------------------

1. 每个div宽度是25%; 总共4个div. 同时前三个div 有 border-right 为 3px.

方案一:

前三个div 的width是 25% - 3px , border-right 是 3px; 最后一个,第四个 div 的width 是 25%, 没有 border-right.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>calc使用1</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             width: calc(25% - 3px);

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             width: 25%;

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>

效果:

这种: 第四个的宽度比前三个多 3px;

第一个: width 是 122px .border-right : 3px

第四个: width 125px;

方案二:

总的长度是 500px, 有 3个border-right . 3 * 3px = 9px . 所有每个 div 的width 是 ( 500px - 9px ) / 4 = 122.75px

这种方案比上面一种方案更适合题意.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>calc使用1</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             width: calc((100% - 3 * 3px) / 4);

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>

width: calc((100% - 3 * 3px) / 4);

显示:

查看元素:

2. 兼容写法:

  .elm {

     /*Firefox*/

     -moz-calc(expression);

     /*chrome safari*/

     -webkit-calc(expression);

     /*Standard */

     calc();

  }

3.方法三: 通过设置box-sizing:border-box;进行设置

通常情况下:

1) 默认 box-sizing 是 content-box . 因此我们设置的高度 , 宽度指的是 content-box 的高度,宽度, ;

2) 如果将 box-sizing 设置为 border-box . 那么我们设置的高度 = 内容高度 + 边框高度 + 内边距高度

---------------------------------

这种前三个div 内容宽度是 122px, border-right是 3px;; 第4个内容宽度是 125px, 没有border .

------------------

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>box-sizing的使用</title>

     <style type="text/css">

         /***1: 初始样式设置*******/

         html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }

         /*******2: 清除浮动******/

         /*IE6, IE7 生效*/

         .floatfix{

             *zoom:1;

         }

         /*其他浏览器*/

         .floatfix:after{

             content:"";

             display:table;

             clear:both;

         }

         /***3: 超出长度显示省略号. 还需要设置width**/

         .ellipsis {

             text-overflow: ellipsis;

             overflow: hidden;

             white-space: nowrap;

         }

         /*********内容********/

         .all {

             width: 500px;

             height: 800px;

             margin: 0px auto;

             border: 1px solid black;

             position: relative;

         }

         .cell {

             -webkit-box-sizing: border-box;

             -moz-box-sizing: border-box;

             box-sizing: border-box;

             width: 25%;

             background-color: blue;

             float: left;

             text-align: center;

             height: 30px;

             line-height: 30px;

             border-right: 3px solid red;

         }

         /*最后一个cell*/

         div.cell:nth-child(4) {

             border: 0px;

         }

     </style>

     <!-- 引入js文件 -->

     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

 </head>

 <body>

     <div class="all">

         <div class="footer floatfix">

             <div class="cell">按钮1</div>

             <div class="cell">按钮2</div>

             <div class="cell">按钮3</div>

             <div class="cell">按钮4</div>

         </div>

     </div>

 </body>

 </html>

第一个div:

第三个div:

第4个div:

css 1) calc() 函数的使用. 2)box-sizing:border-box的更多相关文章

CSS 中 calc() 函数用法
CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数
本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
为什么CSS中的calc函数可能会不生效？
前言在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...
calc()函数的使用
calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...
详解calc()函数功能
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
CSS 使用calc()获取当前可视屏幕高度
来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...
CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）
1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...
CSS之calc()
calc() 函数支持任意CSS长度单位的混合计算,遵循标准数学运算优先级规则,可以动态计算长度值.注意,calc()函数内部的运算符两侧各加一个空白符,否则会产生解析错误. calc()使用的难点在 ...
CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

随机推荐

2.3 UML活动图
活动图定义活动图描述了在一个过程中,顺序的/并行的活动及其之间的关系应用于商业过程.工作流(业务过程).复杂算法的建模活动图是顶点和弧的集合活动节点动作流对象值注解和约束等活动图基本 ...
python-day73--django课上项目01
from django.db import models # Create your models here. class Book(models.Model): name=models.CharFi ...
php面向对象比较
在PHP中有 = 赋值符号.== 等于符号和 === 全等于符号, 这些符号代表什么意思? (1).=是赋值符 (2).使用 == 符号比较两个对象 ,比较的仅仅是两个对象的内容是否一致. (3). ...
Spring Boot集成Thymeleaf
Thymeleaf是一个java类库,是一个xml/xhtml/html5的模板引擎,可以作为mvc的web应用的view层.Thymeleaf提供了额外的模块与Spring MVC集成,所以我们可以 ...
2017-5-19&5-23/系统性能指标
1. 系统性能指标包括哪些? 业务指标.资源指标.中间件指标.数据库指标.前端指标.稳定性指标.批量处理指标.可扩展性指标.可靠性指标. 1)业务指标:主要包括并发用户数.响应时间.处理能力. 指标 ...
C++ leetcode Longest Palindromic Substring
明天就要上课了,再过几天又要见班主任汇报项目进程了,什么都没做的我竟然有一种迷之淡定,大概是想体验一波熬夜修仙的快乐了.不管怎么说,每天还是要水一篇博文,写一个LeetCode的题才圆满. 题目:Gi ...
把旧系统迁移到.Net Core 2.0 日记 (15) --Session 改用Redis
安装Microsoft.Extensions.Caching.Redis.Core NuGet中搜索Microsoft.Extensions.Caching.Redis.Core并安装,此NuGet包 ...
Android studio 一个项目引入另一个项目作为Libary
1.在我们开发Android项目时,有时需要一个项目作为另一个项目的工具类的引用,这样就需要配置下,使得MyLibrary到MyApplication作为一个module. 我们直接截图上步骤: 1. ...
Java线程池理解及用法
前言多线程的异步执行方式,虽然能够最大限度发挥多核计算机的计算能力,但是如果不加控制,反而会对系统造成负担.线程本身也要占用内存空间,大量的线程会占用内存资源并且可能会导致Out of Memory ...
ubuntu 双硬盘挂载 windows分区自动挂载
sudo fdisk -l 查看硬盘情况 1:新建一个目录,例:old 2:mount /dev/sdb1 old 3:cd old 4:ls (就可以看到新硬盘的内容了) 取消挂载:umoun ...

css 1) calc() 函数的使用. 2)box-sizing:border-box

1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-right 为 3px.