calc() 是一个css 函数, 可以实现.计算
----------------------------
1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-right 为 3px.
方案一:
前三个div 的width是 25% - 3px , border-right 是 3px; 最后一个,第四个 div 的width 是 25%, 没有 border-right.
1 2 3 4 5calc使用1 6 79 80 81 82 83 84 85 8687 88 94 9596 97 98 99 100 101
效果:
这种: 第四个 的宽度比前三个 多 3px;
第一个: width 是 122px .border-right : 3px
第四个: width 125px;
方案二:
总的长度是 500px, 有 3个border-right . 3 * 3px = 9px . 所有 每个 div 的width 是 ( 500px - 9px ) / 4 = 122.75px
这种方案 比上面一种方案更适合题意.
1 2 3 4 5calc使用1 6 76 77 78 79 80 81 82 8384 85 91 9293 94 95 96 97 98
width: calc((100% - 3 * 3px) / 4);
显示:
查看元素:
2. 兼容写法:
1 .elm {2 /*Firefox*/3 -moz-calc(expression);4 /*chrome safari*/5 -webkit-calc(expression);6 /*Standard */7 calc();8 }
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 .
------------------
1 2 3 4 5box-sizing的使用 6 79 80 81 82 83 84 85 8687 88 94 9596 97 98 99 100 101
第一个div:
第三个div:
第4个div:
