<<<<<<< HEAD ======= >>>>>>> cc1683e7a588738994e7380b578cca68c3975139

[CSS] calc()

<<<<<<< HEAD 最后更新于2018-12-13 ======= 最后更新于2019-03-15 >>>>>>> cc1683e7a588738994e7380b578cca68c3975139

记得刚毕业的时候找工作面试前端,面试官问了我这样一个问题:

我现在需要一个搜索框,左边放input,右边放搜索按钮,搜索按钮固定120px,请你写一下布局。

当时我的内心:”太简单了!“。

于是我劈里啪啦敲了一堆:

一个简单的搜索框就出来了,像这样:

然而面试官就是面试官,他又加了一个要求,我需要适配多种设备的分辨率

“切,看我CSS媒体查询一梭子!”

面试官看了后还是摇头:“我要input随窗口大小变化而变化,button长度不变且不能用js。”

然后,

我就,

呆了,

这他妈,

怎么搞???

你个犊子是来搞我的吗???

 

嗯,理所当然的,这家公司没有面试上,(谁要去你家啊那么远)。

(废话了一堆你到底要说什么啊?)

我要说的就是这个了。(催你🐎呢

改成这样之后,我的搜索框就变成了这样:

完整代码:

可以试试改变浏览器的大小来验证是否真的达到了那位面试官的要求。

calc()会让你的css也拥有计算能力,支持+ 、- 、*、/四种运算符(小学啦)。这个属性的应用很简单,不过有几点要注意一下:

  1. 运算符左右一定要有空格,如果你写成100%-5px是不会工作的。
  2. calc不要拼错(废话
  3. 不要滥用calc(),能定实际数值就定实际数值,css的运算速度肯定是没有js快的。
  4. <<<<<<< HEAD =======
  5. 浏览器兼容性可以去https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility查看详情。
  6. >>>>>>> cc1683e7a588738994e7380b578cca68c3975139

 

好了,今日份的blahblah结束!

有问题可以在下面评论或者发邮件给我,我都看得到,现在刚开始人少,只要是我能解决的问题,一定会回复的!

<<<<<<< HEAD