css3的calc()实现自适应布局

目录(?)[+]

随着自适应布局的出现，我们在制作页面的时候，经常会碰到元素的宽度为100%的情况。了解盒模型的朋友不难想到，如果这个元素有margin，padding，border的时候，此时的元素整体宽度必会大于父级元素的宽，就会导致页面结构错乱等一系列布局问题。为了解决这种问题，我可以通过calc()来实现。

• calc()是什么

• calc()怎么用

• calc()实例

---

calc()是什么

首先calc是calculate(计算)的缩写，其次看起来像是一个函数，它是CSS3新增的一个功能，用来指定元素的长度，而且是通过计算来指定，因此不用担心添加边距或者边框带来的问题。

calc()怎么用

既然calc()能通过计算设定元素的长度，那怎么去实现呢？

我们知道元素可以通过百分比、px等单位定义高宽，而calc()可以通过计算得出高宽。如下：

width: calc(100% - 10px);

• 1

• 1

1. 可以使用”+”、”-“、”*”、”/”运算符进行运算
2. 可以混合使用百分比、em、px、rem等单位进行计算
3. 注意运算符前后使用空格

calc()实例

上面的用法是不是很简单呢，那我们来看一个完整的实例：

html代码片段

<<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div class="warpper">
    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div class="box1"></<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div>
    

---

    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div class="box2"></<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div>
</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

css代码片段

.warpper {
    width: 200px;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f00;
}
.box1,
.box2 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 10px;
    border: 5px solid #000;
    background-color: #ff0;
}
.box1 {
    width: 100%;
}
.box2 {
    width: calc(100% - (10px + 5px) * 2);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

从上面实例不难看出，box1和box2的区别就在于宽度的定义，在box2中，我们把padding和border的横向值去掉后，calc()计算出来的宽度才是我们想要的值。

---

特别说明

1. 到Can I use网站查看兼容浏览器情况
2. 在less中使用calc()编译后则会发现参数是按运算符计算后的结果，需特别注意如下：

less代码片段

width: calc(100% - 10px);

• 1

• 1

编译后如下：

css代码片段

width: calc(90%);

• 1

• 1

从以上代码可以看出，在less中使用时需另作处理如下：

less代码片段

width: calc(~"100% - 10px");

• 1

• 1

编译后如下：

css代码片段

width: calc(100% - 10px);